Welcome to WebmasterWorld Guest from 54.234.153.186

Forum Moderators: not2easy

Message Too Old, No Replies

css box model problem in mozilla

css box model problem in mozilla

     

egiss

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

10+ Year Member


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

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

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



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

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

10+ Year Member



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

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

10+ Year Member



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

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

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



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

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

10+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month