css box model problem in mozilla

[egiss]

dear,

please consult the following code:

<code>
#menu
{
position: absolute;
left: 0.5em;
top: 4em;
width: 7.25em;
}

#menu a
{
font-family: comic sans ms,verdana,helvetica,sans-serif;
text-decoration: none;
display: block;
padding: 0.25em 0em 0.5em 1em;
color: #ffffff;
width: 90%;
background-color: #000099;
border-left: 1px solid rgb(0,0,153);
border-right: 1px solid rgb(0,0,153);
border-top: 1px solid rgb(0,0,153);
border-bottom: 1px solid rgb(0,0,153);
}
< /code>

When i use this css code in Explorer or opera everything works fine. But when i try to use it with Mozilla(1.0) the browser draws an unwanted white line(whitespace) between some of the #menu a elements, but not all of them. Does anyone else have this problem and knows a solution?

PS. The buttons that i draw are under each other

Thanks!

[DrDoc]

First of all, which version of IE and Opera are you using for testing?

Then (don't know if it helps or not) put "comic sans ms" in quotes. That could be what's causing the problem. Either way, font names containing more than one word should be in quotes (such as "Times New Roman", "Comic Sans MS" etc). Don't know if Mozilla chokes on it...

Finally, replace these lines

border-left: 1px solid rgb(0,0,153);
border-right: 1px solid rgb(0,0,153);
border-top: 1px solid rgb(0,0,153);
border-bottom: 1px solid rgb(0,0,153);

with just

border: 1px solid rgb(0,0,153);

Test and see if the problem is still there.

[WibbleWobble]

Removing the bottom padding (.5em) of the a element seems to remove the white space (regardless of the quotes thing). However, the link elements appear to extend past the container div, when testing three such in Phoenix. I shall investigate.

[WibbleWobble]

Back so soon? Yes. I doubt mine's the best manner of doing it, but I should be doing other stuff ;)

Making the width for the a elements 6.25em's instead of 90% brings them flush to the border in Phoenix, though the bar is narrower in IE as a result. I don't trust em's in this context, they seem eeeevil.

[DrDoc]

hehe

ems can be great, if you know the exact width of the text (provided the browser also interprets ems correctly) ;)

I'd stick with ems for font sizes, not widths .. if there's a possible optional workaround...

[egiss]

DrDoc was right,

All Gecko browsers(Mozilla,Netscape,...) choke when you donīt use quotes to indicate fonts consisting over 1 word.
This solved my problem. Spread the word!