When I wrap contents in an <a> tag, the link doesn't work in IE, help?

I know this is probably frowned upon, but a client wants live text wrapped in ONE tag....

So, here is my dilemma:

I have some code like this:

<a href="google.com">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;">&l开发者_开发技巧t;/div>
</a>

I styled the to be display:block.

This method works great in FF5, IE = not all content is clickable, in this example only the image is clickable. Chrome = works. Safari = works.

If you have a different method you might suggest please offer it.

Thanks in advance!

Try setting the link style like this:

<a style="display: block; position: relative;" ><div/></a>

One suggestion is not to use block level elements in an inline element. It won't always render properly (beyond being semantically incorrect). Try removing the floats and using spans to style the part that you want to be an H3 and p.

<a href="google.com">
    <img src="img.jpg" style="float:left;">
    <span class='title'>Title</span>
    <span class='desc'>Description</span>

</a>

This is completely against the html specification since <a> elements can only contain inline elements and <div> is a block element. So, it's no surprise that it doesn't work in Internet Explorer. In fact, it probably doesn't work in a number of other browsers, and even in those where it does work, there's no guarantee that it will continue to work.

The only workaround I can think of involves JavaScript, like this:

<div onClick="javascript:window.open('google.com')">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;"></div>
</div>

However, that will break support for users that don't have JavaScript, or have it disabled.

In HTML 4, block-level elements are not allowed in <a> tags so I would not expect it to work cross-browser.

A better solution may be to use a Javascript onclick event to send the user to the intended destination.

<div id="clickable_div" onclick="document.location.href='http://google.com'">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
    </div>
    <div style="clear:both;"></div>
</div>

You could try making the <a> into a <div> and use javascript & css to make it look & work like a link

<div onclick="document.location.href='http://www.google.com'" style="cursor:pointer">
    <img src="img.jpg" style="float:left;">
    <div style="float:right;">
        <h3>Title</h3>
        <p>Description</p>
   </div>
     <div style="clear:both;"></div>
</div>