Welcome to WebmasterWorld Guest from 50.17.117.221

Forum Moderators: not2easy

Message Too Old, No Replies

css box model problem in mozilla

css box model problem in mozilla

     
11:57 pm on Mar 19, 2003 (gmt 0)

New User

10+ Year Member

joined:Feb 22, 2003
posts:7
votes: 0

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!

12:48 am on Mar 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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.

4:50 pm on Mar 20, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Dec 13, 2002
posts:307
votes: 0


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.
4:52 pm on Mar 20, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Dec 13, 2002
posts:307
votes: 0


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.

6:45 pm on Mar 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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...

10:01 pm on Mar 20, 2003 (gmt 0)

New User

10+ Year Member

joined:Feb 22, 2003
posts:7
votes: 0


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!