How can I fix IE 8's goofy handling of anchor tags

HTML & CSS
1

I’ve been using <div> tags to create boxes that are links. I had a series of links in an unordered list like this:

<ul>
<li><a href><div>Link Text</div></a></li>
</ul>

That worked ok but IE seems to be buggy with respect to borders inside <ul> tags. So I switched to just this:


<a href><div>Link Text</div></a>

Now IE doesn’t transform the cursor to indicate it’s over a hyperlink although the link will still work. Is this a known issue and does anyone know how I can get IE to behave?

2

That’s completely invalid markup and you can’t say that it ‘works’ or doesn’t work, because the behaviour is undefined. Relying on contemporary browser error handling is not conducive to a good night’s sleep. :slight_smile:

A block-level <div> can never be a child of an inline-level <a>.

Use a <span> instead of a <div> and style it with display:block if necessary.

3

Gotcha. We’ll I’ve tried with span tags too but the problem still persists. Actually it looks like by commenting out the width and height properties this will work but I need both of those.

4

Use display:block on the <a> tag so you can assign the sizes directly to it without needing the other tags.