Forums

christiela

Hi, I'm currently trying to recode the navigation portions of my company's site from javascript to CSS, but I'm not allowed to alter the design very much...I have managed to code both menus on the page into CSS, you can see it here
http://www.ea-inc.com/Testing/index.shtml.

It seems to work fine in Firefox but when it's in IE, the sub menu for the horizontal drop-down menu offsets to the right, and layers under the other vertical menu. I've tried it on its own and it has the same effect in IE 7. Tried everything I could think of already but still it's like this. If anyone can give me some help, it would be appreciated greatly!

this is the code for the horizontal drop down..


/* CSS Document */

#menu2 {
width: 100%;
float:left;
background: #333;
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
float:left;
text-align:left;
}

ul.home {
width: 4em;
}

ul.about {
width:8em;
}

ul.careers {
width:8em;
}

ul.contact {
width:6em;
}

ul.sitemap {
width:6em;
}

ul.break {
width:0.4em;
height:40px;
color: #fff;
background-color: #bb0022;
padding-top:10px;
}

#menu2 a {
font: 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 12px 6px;
color: #fff;
background: #bb0022;
text-decoration:none;
vertical-align:middle;
}

#menu2 a:hover {
color: #FFF;
text-decoration: underline;
background: #dd0022;
}

#menu2 li {
position: relative;
}

#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu2 ul ul {
position: absolute;
z-index: 500;
}

div#menu2 ul ul {
display: none;
}

div#menu2 ul li:hover ul 
{display: block;
width:100%
}

<!--[if IE]>
<style type=\"text/css\" media=\"screen\">
body{
behavior: url(css/csshover3.htc); 
margin: 0;
padding: 0;
}

#menu2 ul li
{
float:left;
width: 100%;
background: #bb0022;
}

</style>
<![endif]-->

and this is for the vertical one, just in case it's needed...


/* CSS Document */

#menu {
width: 14em; /* set width of menu */
background: #fff;
font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu a { 
display: block;
border-width: 1px;
border-style: solid;
border-color: #FFF #FFF #FFF #FFF;
margin: 0;
padding: 4px 3px;
color: #1D5EB7;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #1D5EB7;
background:  #CCCCCC;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 18em; /* width is based on the containing block */
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 19em; /* width is based on the containing block */
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display:none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type=\"text/css\" media=\"screen\">
body{
behavior: url(css/csshover3.htc); 
}

/*#menu ul li {
float:left;
/* cure IE5.x \"whitespace in lists\" problem 
width: 100%;
}*/
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 
</style>
<![endif]-->

christiela

Okay, after reading a bunch of sites about z-index I finally got the overlap part working...but i'm still lost on the offset in IE...please help?

This is the change made to the horizontal menu that solved the overlapping issue


#menu2 li {
position: relative;
z-index: 1000;
}

christiela

Could someone help me out here? Please, i really need some idea on this...thanks..

TheDoc

It's very very early in the morning for people in North America, and people in Europe should just be getting into work, a little patience is needed!

I'll have a look when I get in to work in the morning if noone else nabs this by then.

tbwcf

I haven't got a web developer bar for ie on my test machine (normally use a mac) but it looks to me that ie is applying margin to your list items, you have margin:0; padding:0; on your ul but not your li, perhaps give that a go....
#menu ul li {margin:0; padding:0;}

Hope that helps

TheDoc

I see the problem you're having, but honestly have nary a clue as to why it's happening. I feel like I just had a problem like this but I can't quite put my finger on it.

As a side note:

You should really be structuring the nave like this:

<ul id=\"menu2\">
    <li>Home</li>
    <li>Other
        <ul>
        <li>Dropdown1</li>
        <li>Dropdown2</li>
        </ul>
    </li>
    <li>Jiggins</li>
</ul>

treehouse : what would you like to learn today?

Forums

Need help with multiple nav menus and weird offset in IE