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

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

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

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?

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.

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.

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