When links in ULs don’t work in IE

In redesigning my business web site: Left Logic I came across a particularly frustrating bug that took me a good deal of time to find the source of. Since I couldn’t find any info out it on the Internet, I thought it would be worth posting.

IE, both IE6 and IE7, in the following example, causes links to just stop working.

The bug is to do with links within list elements that have a relative position combined with hidden elements.

Example

If you view the IE broken links example in IE6 or IE7 you’ll find you can’t click on any of the non-selected tabs in the first example.

The Problem

It’s pretty particular, but in my case I had my navigation, which required the UL and the A links to be position:relative. I would then have a hidden H2 before the UL that would display ‘Navigation’ when the style sheet was turned off. Perfectly acceptable.

In the above example, the first example has the hidden H2 before the UL within my holder DIV, currently with lorem ipsum to demonstrate the breadth of the problem.

The second example works fine because the hidden element is outside of the holder DIV.

Effectively, it’s like the hidden H2 is sitting over the links rendering them useless. I’ve checked out the DOM in IE and I can’t see how it is overlapping – but it definitely is.

This is proven when I change the length of the content in the hidden H2. When it just read ‘Navigation’, only the home link was disable, and only when the second link was selected. Very, very strange.

The Solution

It’s pretty straight forward, but definitely not obvious. Move the hidden element from next UL and out of the holder. It sorts out the problem, but took me many days to work out!

  • http://forboden.com Yansky

    I realise you’ve already fixed it, but what about using z-index to get the links above the hidden H2 element that was overlapping them.

    i.e.

    Give the a style of position:relative; z-Index:4; display:none;
    then give the <a> links a style of position:relative; z-Index:5;

  • http://forboden.com Yansky

    Woops – that should read:

    Give the H2 a style of position:relative; z-Index:4; display:none;
    then give the links a style of position:relative; z-Index:5;

  • Marcus

    Another way to resolve this that I’ve used, which works really well is to leave the hidden element where it is, and along with setting its style to display:none to hide it, and set its innerHTML to nothing. This removes the content, so there’s nothing left to overlap the content which you intend to display.

  • charles

    Hi, I read this post and I like to say i have similar problem!!

    I put a link in a button as shown below. it works well with firefox and chrome but does not work with IE. what should I do?

    Thanks for youe response.

  • http://liquiddiamond.org jsk

    i’m quite sure you’ve saved me at least a day of my life by having this post. the first comment by @Yansky is the solution i used but i had a similar problem, tho this with all browsers (invisible element covering links), so… I AM SO GRATEFUL for this post. thank you.