The other day I ran across a silly bug in Internet Explorer 7 and 8 (and probably 6) where my links weren’t actually working, clickable links, but the mouse was turning to a pointer! Bizarre.

It took quite a bit of Googling before I found the culprit – and a solution.

The deal is, when floating div elements, sometimes the anchor link elements flow behind other elements, so links don’t work, even though they may be visible. In my case it was an unordered list of links that made up a sidebar menu.

The solution is simple. Add the style attribute ‘position:relative’ to the main parent floated div as in this example:

<div style="float:left; position:relative;">
<ul>
<li><a href="">link</a></li>
</ul>
</div>

The reason this works is because IE will now correctly order the elements from front to back, but in a real, standards compliant browser, the position:relative attribute is meaningless because float elements are by design relatively positioned.

I’m sure this IE bug has provided hours of frustration for many savvy developers and designers. By no fault of your own, your site becomes useless! And unfortunately, it looks like we’re stuck with this one for a while, since it wasn’t fixed until IE 9.

Oh well. Think of it as job security. And be thankful it’s a simple fix compared to the many other gross IE bugs!