homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
css box model problem in mozilla
css box model problem in mozilla
egiss




msg:1192637
 11:57 pm on Mar 19, 2003 (gmt 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!

 

DrDoc




msg:1192638
 12:48 am on Mar 20, 2003 (gmt 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.

WibbleWobble




msg:1192639
 4:50 pm on Mar 20, 2003 (gmt 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.

WibbleWobble




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

DrDoc




msg:1192641
 6:45 pm on Mar 20, 2003 (gmt 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...

egiss




msg:1192642
 10:01 pm on Mar 20, 2003 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved