homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
White Boxes Next to Subitems in Navigation Bar in Mozilla
Works fine in IE, but a white box appears next to each subitem in Mozilla.
justachild20




msg:4092678
 7:58 pm on Mar 6, 2010 (gmt 0)

For some strange reason, when I view my website in IE, it appears fine, however, when I view it in Mozilla, there is a white box next to each subitem under my horizontal navigation bar. I'm sure the HTML portion is correct, using the <li> and <ul> tags, but I'm not sure what is wrong with my CSS portion.

Also, I noticed that in Mozilla, the height of the navigation bar increases.

#nav{position:absolute;width:98%;left:0c;list-style:none;z-index:99;background:#927B51;}

#nav li{float:right;padding:10px 35px;position:relative;;list-style:none}
#nav ul li a{font-size:9pt;;list-style:none}
#nav a{color:#FFF;font-weight:bold;font-size:10pt;text-decoration:none;white-space:nowrap;}
#nav a:hover{text-decoration:none;}
#nav li ul{display:none;list-style:none;position:absolute;top:28px;left:0;background:#FFF;border-bottom:2px solid #FFF;}
#nav li:hover ul{display:block;}
#nav li ul li{float:none;position:static;border-bottom:0;background:#A89166;font-size:9pt;padding:0;height:31px;width:215px;list-style:none;ist-style-image: none;}

#nav li ul li a{padding:6px 13px;display: inline-block;height:19px;width:auto;list-style:none;ist-style-image: none;}
#nav li ul li:hover{background:#80C31C;}
#nav li:hover{background:#80C31C;}

 

MarkFilipak




msg:4092942
 3:44 pm on Mar 7, 2010 (gmt 0)

Because their default style is under-specified in the CSS spec., list tags are notoriously browser specific, especially in positioning of their bullets and horizontal positioning of their items. I would avoid using them in menus at all costs! You should be using only absolutely positioned DIVs in menus.

rocknbil




msg:4092998
 7:21 pm on Mar 7, 2010 (gmt 0)

when I view it in Mozilla, there is a white box next to each subitem under my horizontal navigation bar.


I'm not sure I understand the problem, but if it's what I think it is, try removing the white space in the <li>'s

<ul>
<li><a href="#">link one</a></li><li><a href="#">link two</a></li><li><a href="#">link three</a></li><li><a href="#">link four</a></li>
</ul>

I've encountered issues with this that no CSS attributes fix, but this does.

If anything, I'd avoid absolute positioning . . .

list tags . . . I would avoid using them in menus at all costs!


Document semantics dictate a menu is a list of links and is entirely appropriate, and can be made cross browser compatible without too much trouble and **no** conditional hacks.

tangor




msg:4093011
 8:01 pm on Mar 7, 2010 (gmt 0)

Like rockinbil I have used ul lists for menus without problem. This works for me just fine:

<ul>
<li>one
<li>two
</ul>

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