Hi,
IE has mangled my menu (wow! that’s a surprise!)
My menu uses a transparent png sprite and doesn’t work properly in IE8. No transparency and some of the level 2 menus are cut off on the right for some reason.
Works fine in Firefox on Mac and PC but not in IE8.
In IE8 I can’t figure out why the repeating transparent png works for the body of the page but the menu sprite png doesn’t render transparency.
http://www.temp.subseaonningaloo.com.au/
Any help appreciated.
Regarding the menus being cut off, it seems to be because you have a 160px wide image in a 140px wide box. The overflow is supposed to be visible, but…
The quick fix is to adjust the submenu’s item width to 160px, or let it be auto.
Regarding the transparency… you’re pretty much screwed on that one. See http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/. At the end of that article, there are a couple fixes you can try, but in my experience, there is no solution. All you can do is avoid any opacity. You can write special cases for IE8 or lower so that the submenus pop in rather than fade in.
Thanks for your reply. I guess I shouldn’t bag a browser that 80% of the public use. I hope I live to see the day when IE moves with the times like Opera, Chrome, Firefox and Safari. These browsers render my site perfectly.
The level 2 menu ‘view ports’ (divs) are sized to accommodate wider (160px) buttons - level 1 is 140px - nope, it’s just IE that trashes my design.