CSS drop down menu won't appear in IE7 & IE6

Forum Moderators: not2easy

Message Too Old, No Replies

CSS drop down menu won't appear in IE7 & IE6

irock

4:04 pm on Nov 14, 2009 (gmt 0)

Hi, I was wondering if you guys know why my drop down menus (top navigation bar) won't work in IE7 & IE6 when they work perfectly in IE8, FireFox, Chrome, Safari and Opera. Is there something i miss there?

< no personal URLs - please see Forum Charter [webmasterworld.com] >

Thanks.

[edited by: tedster at 4:40 pm (utc) on Nov. 14, 2009]

D_Blackwell

4:23 pm on Nov 14, 2009 (gmt 0)

The personal link is going to get chopped, so I cannot use it as a reference.

Can you strip the HTML and CSS down to the problem itself? If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

irock

4:40 pm on Nov 14, 2009 (gmt 0)

Thanks the reminder.

Here's the HTML part...

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<style media="all" type="text/css">@import "menu_style.css";</style>
</head>

</ul>
<div class="btm-bg"></div>
</div>
</li>

</ul>
<div class="btm-bg"></div>
</div>
</li>

</ul>
<div class="btm-bg"></div>

</div>

</div>
</li>

</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="/software.html">
<span class="menu-left"></span>
<span class="menu-mid">MENU F</span>
<span class="menu-right"></span>
</a>
</li>
<li class="">
<a href="/forums/">
<span class="menu-left"></span>
<span class="menu-mid">MENU G</span>
<span class="menu-right"></span>
</a>
</li>
<li class="last">
<a href="/about-us.html">
<span class="menu-left"></span>
<span class="menu-mid">MENU G</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>

</div>
</div>

Here's the CSS code:

.wrapper1{
color: #44433f;
font: 14px "Trebuchet MS", "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 1px auto;
}
.nav {
background: #fff url(images/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(images/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(images/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;
}
.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
text-align: left;
padding: 0 7px;
background: url(images/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(images/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(images/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(images/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(images/submenu_top.png) no-repeat;
width: 336px;
padding-top: 9px;

}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 312px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}

.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(images/submenu_top.png) no-repeat;
width: 336px;
padding-top: 9px;
}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 312px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 306px;
padding: 8px 3px 3px;
text-indent: 1px;
font: 13px "Trebuchet MS";
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
font: 13px "Trebuchet MS";
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
font: 13px "Trebuchet MS";
}
/**/
.nav .btm-bg {
background: url(images/submenu_bottom.png) no-repeat;
width: 355px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(images/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
.content-bottom {
width: 710px;
background: transparent url(images/content_bottom.png) no-repeat;
height: 13px;
float: left;
}

birdbrain

11:17 am on Nov 15, 2009 (gmt 0)

Hi there irock,

before your site link was removed I ran the page through the validator at w3.org.

The results showed 530 coding errors and 118 warnings.

I would ,humbly, suggest that you give the correction of these errors your fullest attention. ;)

birdbrain

irock

9:28 am on Nov 16, 2009 (gmt 0)

I figured out what I did wrong. Turns out I only need to add this to the first line of the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But yea, the zillion error does aren't pretty... I will try to fix them. Thanks for your help.