PDA

View Full Version : navigation problem with IE6


volcanocave403318
03-15-2010, 11:06 AM
Hi.
I am new to this forum. But i have read some articles which has been already published relating to my problems, and i tried , nothing worked. I have created horizontal navigation bar then I used Jquery for subnavigation , It works absolutely fine with IE7, firefox, even with google chrome. but it doesn't work on IE6 . here is my code:
For html:
<div id="nav"><div class="inner">
<ul>
<li><a href="index.html" class="current"><span class="link">home</span></a>
<ul>
<li><a href="">some other link</a></li>
<li><a href=""> link example</a></li>
<li><a href="">add anything</a></li>
<li><a href="">this will hopefully work</a></li>
</ul>
</li>
<li><a href="about.html"><span class="link">about</span></a></li>
<li><a href="portfolio.html"><span class="link">portfolio</span></a></li>
<li><a href="blog.html"><span class="link">Services</span></a>
<ul>
<li><a href="">Building</a></li>
<li><a href="">Roofing</a></li>
<li><a href="">Commercial</a></li>
</ul>
</li>
<li><a href="contact.html"><span class="link">contact</span></a></li>
</ul>
</div></div>
FOr css:
/* === Nav === */
#nav{
background:url(images/navbg-repeat.jpg) repeat-x top;
height:56px;
width:100%;
margin:2px 0;
position:relative;z-index:999;
}
#nav .inner{
width:100%;z-index:999;
height:56px;
background:url(images/navbg-middle.jpg) top center no-repeat;
}
#nav ul {
font-size:18px;
padding: 5px 0 0 30px;
margin: 7px 0;
list-style: none;
float: left;
text-shadow:1px 1px white;
z-index:999;
}
#nav ul li{
display:inline;
float:left;
z-index:100;
}
#nav ul li a:link, #nav ul li a:visited{
display:inline;
color:#525252;
display:block;
text-decoration:none;
height:44px;
}
#nav ul li a:hover{
display:inline;
color:#000;
background:url(images/bgright.jpg) no-repeat top right ;
display:block;
text-decoration:none;
height:44px;
}
#nav ul li a.current{
background:url(images/bgright.jpg) no-repeat top right ;
height:44px;
}
#nav ul li a.active{
background:url(images/bgright.jpg) no-repeat top right ;
height:44px;
}
#nav ul li a.current span.link,#nav ul li a.active span.link, #nav ul li a:hover span.link {
background: url(images/bgleft.jpg) no-repeat top left;
}
#nav ul li a span.link {
margin: 0 18px 0 0px;
padding: 12px 8px 14px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
cursor:pointer;
}
/* === Dropdown Nav === */
#nav ul ul {
position:absolute;
display:none;
top:37px;
z-index:9999;
background:#d0d2d3;
padding:5px;
border:1px solid #a2a2a2;
width:170px;
}
ul#nav ul ul li{
background:none;
padding:0;
margin:0;
z-index:999;
}
#nav ul li ul li{
background:none;
border-top:1px solid #fff;
border-bottom:1px solid #e4e4e4;
z-index:999;
padding:0;margin:0
}
#nav ul li ul a:link, #nav ul li ul a:visited{
display:block;
padding:10px 0 8px 10px;
width:160px;
font-size:12px;
color:#333;
text-decoration:none;
font-weight:normal;
background:#fff;
float:left;
margin:0;z-index:999;
height:16px;
}
#nav ul li ul a:hover{
display:block;
width:160px;
text-decoration:underline;
font-weight:normal;
font-size:12px;
float:left;z-index:999;
background:url(images/nav-submenu.jpg) repeat-x bottom #fff;
}

#nav ul ul ul{
top:auto;z-index:999;
}

#nav ul li ul ul {
left:146px;
margin:0px 0 0 10px;
z-index:9999;
}
#nav ul li{
position:relative;
}

in the IE6 the main nav bar is not showing as horizontal , it breaks the link and is showing as drop down menu. Can anyone help? It is not on the web that i can show you. But if anyone likes to help please email me I can send u the screenshot. thanks

Jason Byrnes
03-15-2010, 03:21 PM
IE 6 does not handle percentage based widths very well.

I see in a few spots you have set width to be 100%. for compatability with IE6, it is important to set a pixel based width.


I cant see to musch else that raises an eyebrow, I'd have to examine the page in a browser to be able to debug the problem.

volcanocave403318
03-17-2010, 12:21 AM
Hi, thanks for the reply. I have changed the width with pixel but it still rises the problem. How can I send the index .html and css file to u so u can test it.? I tried to attach it but it says it 's invalid, I tried even compressed zip folder , ( rar) but it is not uploading here).. thanks

Jason Byrnes
03-19-2010, 12:36 PM
add the files to a zip archive and attach the zip file so I can examine the code.