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 th
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 style="clear: both"></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 id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>
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.
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 id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...