Image and text inside of tag

This is the html asp.net generated (with some client-identifying details removed)

In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.

In other browsers, it all works as expected.

Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?

<div> <a title="XXX" href="" target="_blank"> <div> <img src="Images/XXX.png" /> </div> <div> <span>Some text right here</span> </div> </a> </div> 

3 Answers

You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.

You don't need to use division to do this:

<div> <a title="XXX" href="" target="_blank"> <img src="Images/XXX.png" /> <span>Some text right here</span> </a> </div> 

This should work to the same effect...

Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.

Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.

Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>

<div></div> 

You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:

.clear-fix { clear: both !important; display: block !important; font-size: 0 !important; line-height: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } 

A better way to do your code which is W3C compliant is the following:

<div> <a title="XXX" href="" target="_blank"> <span> <img src="Images/XXX.png" /> </span> <span> <span>Some text right here</span> </span> <span></span> </a> </div>