IE6 Bug - Div within Anchor tag: inline images not links

Question

I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.

Thanks!

<div class="tab-panel-init  clear  ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">

        <a href="#" class="last ph-item-featured clear">
            <div class="ph-item-featured-img">
                <img src="#">
                &nbsp;
            </div>
            <strong>
                PRODUCT CODE
            </strong>
            <p>
                PRODUCT CODE Heavy Duty Aluminum Led Flashlight
            </p>
            <span>Learn more &gt;</span> </a>

        <a href="#" class="last ph-item-featured clear">
            <div class="ph-item-featured-img">
                <img src="#">
                &nbsp;
            </div>
            <strong>
                PRODUCT CODE
            </strong>
            <p>
                PRODUCT CODE Heavy Duty Aluminum Led Flashlight
            </p>
            <span>Learn more &gt;</span> </a>

    </div>

Answer 1

If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.

Answer 2

The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.

Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.

Answer 3

You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.

Alternate strategies:

• Remove everything but the image and give it an onclick handler that does the link mechanics.
• Remove the DIV and just have the IMG inside the anchor tag.
• etc.

Answer 4

Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.

Answer 5

This is what the w3c validator returns when I pass in the snippet you posted:

Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag

       <div class="ph-item-featured-img">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.

Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.

Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.

I believe you can do this with conditional comments like so:

<html>
    <head>
<!--[if lte IE 6]>
        <meta http-equiv="refresh"
         content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
    ...
    </head>