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

CSS Forum

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




msg:4024913
 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




msg:4024921
 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




msg:4024928
 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>

<div class="wrapper1" style="margin-left:6px;">
<div class="wrapper" >
<div class="nav-wrapper" >
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation" style="width:955px;">

<li class="">
<a href="/">
<span class="menu-left"></span>
<span class="menu-mid">MENU A</span>
<span class="menu-right"></span>
</a>
</li>

<li class="">
<a href="/news.html">
<span class="menu-left"></span>
<span class="menu-mid">MENU B <font size=1 color=#ffc627>&#9660;</font></span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>

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

<li class="">
<a href="/superspeed-usb.html">
<span class="menu-left"></span>
<span class="menu-mid">MENU C<font size=1 color=#ffc627>&#9660;</font></span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>

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

<li class="">
<a href="/superspeed-usb.html">
<span class="menu-left"></span>
<span class="menu-mid">MENU D <font size=1 color=#ffc627>&#9660;</font></span>
<span class="menu-right"></span>
</a>
<div class="sub">

<div class="nav_short">

<ul>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>

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

</div>

</div>
</li>

<li class="">
<a href="/hardware/">
<span class="menu-left"></span>
<span class="menu-mid">MENU E <font size=1 color=#ffc627>&#9660;</font></span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</li>
<li>
<a href="">BLAH BLAH</a>
</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




msg:4025209
 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




msg:4025674
 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.

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