Menu CSS in FF appears wider than it should

[Xurion]

Hi all,

 

The site I'm building at the moment is http://natural.sqcms.co.uk/ and the menu on the left appears to work fine in IE. In FF though, the menu appears wider than it should, pushing the boundaries of the menu cells to the right.

 

The code for a cell is:

 

<td><a class="link" href="http://natural.sqcms.co.uk/bedroom.php" onmouseover="divMenu.show('menu2', this, 120, 0)" onmouseout="divMenu.hide('menu2')">Bedroom</a>

 

(the onmouseover shows the floating JS menu)

 

and the CSS for 'link' class is:

 

width: 100%;
padding: 2px;
font-weight: bold;
display: block;
text-decoration: none;
color: #656D36;
font-size: 12px;
border-bottom: 1px dotted #fff;
background: #B2B296;

 

Thanks for any help/advice in advance.

 

Xur~

[ToonMariner]

This is the box model prob again....

 

Either switch your doctype to xhtml strict (or 1.1) or read this http://css-discuss.incutio.com/?page=BoxModelHack

[mainewoods]

I tested your home page for html validation at w3.org and came up with 34 validation errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fnatural.sqcms.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline

 

--if the page doesn't validate then ie might display it in quirks mode which will make it even more different looking than in ff. ie might start using non standards paddings, margins, font inheritence, box models, ect, on every css attribute not specifically set.