Question

After designing and coding a standards-compliant website, that works functionally in normal browsers (Firefox, Chrome, etc), I now need to make it look identical (or mostly so) in Internet Explorer, down to Internet Explorer 6.

The current version of the website can be found at http://www.adwas.org/test/redesign/, with a minimal version of the problem at http://jsfiddle.net/FdS6L/

The problem I’m having is that at and below the area with the logo, it absolutely breaks down in IE6 (and 7, I’m guessing, still). I’ve already attempted to fix some of the issues, using the star-hack selector, though it still looks heavily borked. My question is: how do I maintain the size of the header, and get the elements to be (somewhat, if not totally) visible, similar to how it looks in most browsers?

Note:

I’m not adverse to adding JavaScript for the layout to work as necessary in IE6. (applies mostly to the submenu navigation)

Answer 1

I was trying to work on your site, and got it to this point: http://jsfiddle.net/3m367/3/. I basically cleaned up some code and restructured the header, where the bars are full-width automatically rather than forcefully (overflow-x is a CSS3 property, so wouldn’t work for older browsers). This displays fine in IE7 and up. However, I stumbled upon an issue with your navigation – IE6 supports :hover pseudo-class on a elements only, so selectors like li:hover wouldn’t work. Yet, you cannot put your submenus inside parent menu item’s a element because you cannot have links within links. I’m not sure if it’s possible to do that drop-down menu in IE6 without using JavaScript. Other than that, the navigation seems to be the only thing messing up in IE6 right now.