homepage Welcome to WebmasterWorld Guest from 54.166.14.218
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, Moderators: not2easy

CSS Forum

    
CSS Navigation displaying strangely in IE
magic8designs



 
Msg#: 4339243 posted 9:52 pm on Jul 13, 2011 (gmt 0)

I'm working on a site and everything displays fine within the site apart from the navigation. If you look at the navigation in IE and then in FF or Safari you'll see that the navigation overlaps in IE, but not in FF or Safari. Can anybody help me out with this?

HTML
<div class="menu" align="center">
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</li>
</ul>
<li><a href="#">Menu</a></li>
</ul>
</ul>
</div>

CSS
.menu {height: 40px; margin: 0 auto; text-align: center;width: 800px;z-index: 5000;}
.nav, .nav ul {list-style: none outside none;margin: 0;padding: 0;}
.nav a {text-decoration: none;}
.nav {float: left;margin-right: -1px;width: 100px;}
.nav .drop {width: 100px;}
.nav a {font-size: small;margin-bottom: -1px;margin-right: -99px;width: 123px;}
.nav ul li {max-width: 100px;}
.nav b {border: 0 none;cursor: pointer;display: block;font: inherit;}
.nav a {background: none repeat scroll 0 0 transparent;color: #FFFFFF;}
.nav ul a {background: none repeat scroll 0 0 #000000;}
.nav ul ul a {background: none repeat scroll 0 0 #000000;}
.nav ul ul ul a {background: none repeat scroll 0 0 #000000;}
.nav a:hover, .nav a:focus, .nav a:active {background: none repeat scroll 0 0 #000000;color: #FFFFFF;}
.nav li:hover > a {background: none repeat scroll 0 0 #000000;color: #CCCCCC;}
.nav {height: 40px;}
.nav .drop {height: 40px;}
.nav ul {left: 0;position: relative;top: 0;z-index: 5000;}
.nav ul ul {left: 125px;top: -26px;}
.nav ul ul.two {top: -39px;}
.nav ul ul.three {top: -30px;}
.nav ul ul.three li a {width: 150px;}
.nav li.left ul ul {left: auto;right: 95px;}
.nav li, .nav ul {float: left;}
.nav ul li {clear: left;}
.nav a {display: block; position: relative; z-index: 10;}
.nav a.sub-link {float: left; margin-top: 10000px;}
.nav .drop, .nav .fly {margin-top: -10000px;}
.nav ul {margin-bottom: -5000px;}
.nav a:hover, .nav a:focus, .nav a:active {margin-right: 0;}
.nav .fly {width: 100%;}
.nav ul:hover {clear: left;}

Thanks,

[edited by: alt131 at 10:36 am (utc) on Jul 14, 2011]
[edit reason] Thread Tidy [/edit]

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4339243 posted 3:30 pm on Jul 16, 2011 (gmt 0)

Hi magic8designs and welcome to WebmasterWorld :).

The drop-down/fly-outs are behaving as expected in the code sample, however, some of the sub-menus need to be closed, which could be causing the problem. If the following adjustments to the html don't resolve the issue, look through the css for a rule that hasn't been posted.
<div class="menu" align="center">
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</li><!-- delete -->-->
</ul> <!--close ul.three-->
</li><!--close li.fly-->
<li><a href="#">Menu</a></li>
</ul> <!--close ul.two-->
</li> <!--close li.drop-->
</ul>
</div>

magic8designs



 
Msg#: 4339243 posted 5:08 pm on Jul 16, 2011 (gmt 0)

Is this the structure you are referring to? I've made what I think are the edits that were suggested.

Thanks.

<div class="container" align="center">
<div class="menu" align="center">
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu |</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url" style="padding-top:5px; padding-bottom:5px"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
</ul>
</div>

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4339243 posted 5:41 pm on Jul 16, 2011 (gmt 0)

Hi magic8designs, almost:

<div class="container" align="center">
<div class="menu" align="center">
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu |</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly">
<a class="sub-link" href="#url" style="padding-top:5px; padding-bottom:5px"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<!--close ul.three-->
</li>
<!--close li.fly-->
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<!--close ul.two-->
</li>
<!--close li.drop-->
</ul>
<!--close ul.nav-->
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<!--</ul> delete-->
</div> <!--close div.menu -->
</div><!--add to close div.container-->

Does that resolve the overlap issue?

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