Hi there,
I set up a test page and got the menu working in IE. Here are some
things I changed:
1) removed width:100% from menu.css as shown below. That was making IE
stretch the link to full width meaning that they no longer floated
together horizontally:
.nav ul li,
.nav a {
width: 100%; /* removed this */
}
2) added some padding to the links in order to space them out. This
works better than text-indent for this purpose so I removed that.
3) altered width values (and added explicit width to various li and ul
elements) so that the li and ul parent elements add up to their child
links' padding, borders and width. This ensures that the sudden
addition of the right border after the animation has run is avoided.
4) slightly altered border widths, left values, top values, padding
values etc to make things line up nicely.
5) I noticed you were also suffering from the IE z-index bug (submenus
were appearing beneath some floated images in the main content area)
so I added the following to style.css to solve it.
div#header {
background: #FFCC33 url("../images/headBG.gif") top repeat-x;
text-align: left;
width: 100%;
height: 110px;
color: #000;
position: relative; /* ADDED THIS */
z-index: 1; /* ADDED THIS */
}
6) The code that invoked the bgIframe plugin had the opacity:true
option set whereas it needed to be opacity:false in order for the
fade-in animation to work for IE6.
Here is a link to my test page - you can just replace your current
style.css, menu.css and code to initialise Superfish with mine:
http://users.tpg.com.au/j_birch/plugins/superfish/shs/
A few things to note:
- I just rechecked your HTML and it seems that it may have been
altered since I first took that code for my test page. You now have
two body opening tags and I think IE6 is in Quirks Mode due to the
comment at the top of the page. You might want to run the site through
the W3C validator and fix the errors that come up as this will avoid
certain problems with how JavaScript (and CSS) interacts with your
page in the future.
- I'll leave it to you to avoid the top level nav links from turning
orange on hover in IE6 only.
- the main columns were not floating in IE6. I'll assume you are onto that.
- I didn't get the png fix working on my pages - I don't know much
about that so I just left it.
Hope my test page files help you.
Joel Birch.
