IE6 Nav Issues

HTML & CSS
1

Hi all,

I am still learning about bugs in IE, and am working through fixing all the IE 6 issues, one I can’t seem to sort is the nav.

Works well in Firefox etc, but IE6 is broken, assuming it’s to do with position relative etc?

Can anyone offer me some advice?

The site is: http://www.portsmouthels.co.uk/new/

Many thanks in advance guys

2

Hi,

You have 2 ids called #nav which is not allowed and is confusing. Ids must be unique.

You have also self closed spans which is not allowed either and is messing up ie.

e.g.
This:


[B]<span class="arrow" />[/B]

Should be this instead:


[B]<span class="arrow"></span>[/B]

Try this:


#nav {
    float:right;
    margin-top:10px; /*position:relative; z-index:2;*/
}
#nav ul {
    list-style:none;
    position:relative;
    z-index:99;
[B]    margin:0 25px 0 0;
    float:left;
    display:inline;[/B]
}
#nav li {
[B]    float:left;
    margin:0 2px 0 0;
    position:relative;
    display:inline;[/B]
}
#nav li a {
    padding:4px 9px;
    position:relative;
    float:left;
    height:24px;
    line-height:24px;
    text-decoration:none;
    background:#cfcfcf;
    color:#383835;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-top-left-radius:10px;
}
#nav li a:hover {
    background:#153267;
    color:#fff;
}
#nav li#current span.arrow {
    position:absolute;
    top:32px;
    left:50&#37;;
    margin-left:-5px;
    width:17px;
    height:6px;
    background:url(http://www.portsmouthels.co.uk/new/templates/pels/images/nav-current-arrow.gif) no-repeat left top;
}
#nav li#current a {
    background:#ef0000;
    color:#fff;
}




[B]<div id="nav"[/B] class="right30">
  [B]  <ul class="menu">[/B]
        <li id="current" class="active item1"><a href="http://www.portsmouthels.co.uk/new/"><span>Home</span></a>[B]<span class="arrow"></span>[/B]</li>
        <li class="item197"><a href="/new/the-school.html"><span>The School</span></a>[B]<span class="arrow"></span>[/B]</li>
        <li class="item167"><a href="/new/courses.html"><span>Courses</span></a>[B]<span class="arrow"></span>[/B]</li>
        <li class="item168"><a href="/new/fees-a-dates.html"><span>Fees &amp; Dates</span></a><span class="arrow"></span></li>
        <li class="item169"><a href="/new/accommodation.html"><span>Accommodation</span></a><span class="arrow"></span></li>
        <li class="item198"><a href="/new/book-a-course.html"><span>Book a Course</span></a><span class="arrow"></span></li>
        <li class="item199"><a href="/new/why-choose-us.html"><span>Why Choose Us</span></a><span class="arrow"></span></li>
        <li class="item200"><a href="/new/useful-info.html"><span>Useful Info</span></a><span class="arrow"></span></li>
        <li class="item201"><a href="/new/agents.html"><span>Agents</span></a><span class="arrow"></span></li>
        <li class="item211"><a href="/new/gallery.html"><span>Gallery</span></a><span class="arrow"></span></li>
    </ul>
</div>
3

Perfect, thank you so much :slight_smile: