Suckerfish Menu IE6 IE7

HTML & CSS
1

Can anyone tell me why this suckerfish drop down will not show in IE6 & IE7?

Link: wwwDOTpremierlimoDOTcom (the drop down is titled “packages” at the top of the page)

Thanks,

Sam

2

There are 69 HTML errors on that page, which makes it a bit difficult to troubleshoot, especially since 9 of the errors are within that menu. Most of those errors are with your ID values containing a space (you can use something like an underscore instead of a space).

Try correcting those and see if you have any luck. If not, at least it’ll be easier to troubleshoot.

3

Hi,

Ie7 doesn’t like auto co-ordinates so set position:relative on the parent list and set the sub ul to left:0. Hide the menu with margin instead.


#nav li {
    float: left;
  [B]  position:relative;[/B]
}
#nav li ul {
    position: absolute;
[B]    margin-left:-999em;
    left:0;[/B]
    height: 190px;
    width: 150px;
    float: left;
    clear:left;
    margin-top: 17px;
    padding-top: 10px;
    background-repeat: no-repeat;
    background-position: 2px;
    padding-left: 15px;
    font-size: 12px;
    background-image: url(../images/bg-packages-drop-down.jpg);
}
#nav li ul li {
    float: left;
    clear: left;
    padding-top: 10px;
    padding-bottom: 10px;
}
#nav li:hover ul, #nav li.sfhover ul {
[B]    margin-left: 0;[/B]
}

You can’t put breaks between list items:


<li><a href="airport-transportation.html" target="_self">Airport Transportation</a></li>
<br/>
<li><a href="corporate-travel.html" target="_self">Corporate Travel</a></li>
<br/>

All content must be inside the list. Don’t use a break to make space anyway but just use a bottom margin in the list if necessary.