Firefox problem

[DarkElf]

To view the website I'm currently having trouble with visit Sounds of Salvation.In IE the website works fine and there are no problems. However when you view the site in firefox the menu does not display properly, the background colour to the hyperlinks hangs over the edge of the table cell. It's a fairly simple menu, just a table cell with hyperlinks in it that change color on mouse hover. The code for menu (including the table that divides it from the page content) is as follows:

<table class="page-table" cellpadding="10">    <tr>     <td class="border" width="100px" valign="top">      <a class="menu" href="link1.htm">link1</a><br />      <a class="menu" href="link2.htm">link2</a><br />      <a class="menu" href="link3.htm">link3</a><br />[I]etc.[/I]     </td>     <td valign="top">[I]Page content[/I]    </tr></table>

The relevant css is:

body {background-color: #FDF3F0;margin: 0%;padding: 0%;}.page-table {margin: 8px;border: 0px solid black;width: 98%;}.border {border: 1px solid black; background-color: #F08A38;margin: 0px;padding: 0px;}a.menu {font-family: arial; font-size: 12pt;color: black;text-decoration: none;background-color: #F08A38;padding: 2px 8px;width: 100%;float: left;}a.menu:hover {background-color: #FAAA50;}

I've tried fiddling with margins and padding etc but to no avail. Any suggestions?

[Aphotic]

Try changing the widths to set units, specifically the td. You could (which I really do suggest) use division tags rather than tables, but I don't know if you'll want to spend the time.~Aphotic

[DarkElf]

the td which contains the problem elements does already have set width units (in px). I'll give divs a try and see what happens.

[sbrownii]

Aphotic mentioned using units instead of a percentage for the width... The problem is not with the td, but with the styles you definedIt is in your style definition!Try changing the width on the "a.menu" from 100% to 100px

/* Menu */a.menu {font-family: arial; font-size: 12pt;color: black;text-decoration: none;background-color: #F08A38;padding: 2px 8px;width: 100px;float: left;}a.menu:hover {background-color: #FAAA50;}.border {border: 1px solid black; background-color: #F08A38;margin: 0px;padding: 0px;}td.menu{width:100px;}

also... don't set width of the column explicitly in the html. Rewrite that td as

<td class="border menu"  valign="top">

This is possibly not the best fix, but it works in my version of firefoxIn the future you might try to make more use of the "em" unit. This be helpful because "10em" should leave room for 10 characters. This way the menu fits the items even if the user needs to use larger fonts (because they can't see well....) - you can usually test this by holding ctrl key while rolling the mouse wheel.Anyway...Have a nice day

[DarkElf]

genius, ta very much.

[Aphotic]

Thanks, sbrownii, that is exactly what I meant.

[sbrownii]

Isn't it cool to see members rated as "newbie" answering the questions of those rated as "advanced members"... kinda funny how forums always do that...anyway... happy to help