View Full Version : IE8 Image Link Issue

12-03-2009, 06:16 PM
Hi there,
I'm having issues with a menu not working in IE8. It works fine in IE7, FF, Safari, etc, but not in IE8.
It's an unordered list, with text links, which are then styled so that the text is moved off-screen and replaced with an image from a sprite.
The page in question is http://www.wccc.co.uk/juniors/index.asp
I'm getting a bit stuck as to why this may be misbehaving like this...
I'm happy to answer any questions as necessary of course.
Any help would be greatly appreciated.

12-03-2009, 06:33 PM
Hello dudeshouse,
If you remove the text-indent: -9999px; it's a link again. IE8 must be shoving the entire anchor over the 9999px... what happens when you style that li like that instead?
Like this:

<div id="menu"><ul>
<li id="menu-details"><a href="/juniors/details.asp">Junior Royals Details</a></li>
<li><a href="/juniors/bb.asp" id="menu-bb">Bulletin Board</a></li>
<li><a href="/gallery/index.asp" id="menu-gallery">Gallery</a></li>
<li><a href="/juniors/fun.asp" id="menu-fun">Fun</a></li>
<li><a href="/juniors/wallpapers.asp" id="menu-wallpapers">Wallpapers</a></li>
<li><a href="/index.asp" id="menu-wccc-home">WCCC Home</a></li>
<li><a href="/juniors/index.asp" id="menu-home">Home</a></li>

12-03-2009, 06:52 PM
Thanks for the reply.
I've just tried what you suggested, and no change.
Very strange. I still don't get why it's IE8 that's choking...
Any more ideas? The updated css and menu file are live for you to see.
Thanks again.

12-03-2009, 06:59 PM
Ok, fixed it. It would appear that giving the menu div around the menu a position:relative; fixes this issue.
Thanks anyway. I can go home now.