Block link: hasLayout but still not clickable in IE6.

[jlizarraga]

Test case:

http://thayerauto.autofusion.com/test.html

I've given the block link a fixed width to give it Layout, and the IE Developer Toolbar confirms that it hasLayout.

I'm new to this hasLayout concept, but after reading many an article from Google on the subject, they all have the same conclusion: give your block links a CSS style that forces hasLayout, and then they will work as intended in IE.

I can't find a single article that explains what could be causing this behavior when the block link hasLayout and is still not clickable in IE.

*very frustrated with google right now*

[Medyman]

Just tested in IE6 and IE7: I could click on it.

[jlizarraga]

I should rephrase. While it is partially clickable, no pointer cursor appears and you cannot click on blank areas. How do I get IE6 to treat it as a link like the test cases on this page? :

http://www.brunildo.org/test/IEABlock.html

[jscheuer1]

I think it has to do with the fact that regardless of the display property of the a tag, it is invalid to have a divsion inside of it. The desired objective could probably be had by linking the large image and the text with the small image (using two links).

Like:

<div id="ta_HomepageThayerCares">
        <div class="ta_HomepageBoxLeft">
            <a href="#"><img src="/images/thayer_cares_heart.png" alt="Thayer Cares" /></a>
        </div>
        <div class="ta_HomepageBoxRight">
            <a href="#" style="display:block;width:100%;height:100%;">Click here to find out how much Thayer cares about you!
            <img src="/images/thayer_cares_hearts_small.png" alt="Thayer Cares" /></a>
        </div>
        <div class="ta_ClearDiv"></div>

</div><!-- end ta_HomepageThayerCares -->

Now, I'm not sure whether existing styles required the added inline style I used or not, but I suspect it would be required in any similar case (text and image being linked inside a div while desiring the entire div to be a link), and of course could be made a part of the stylesheet.

[jlizarraga]

Oh, I thought you could use block level elements inside inline elements if their display property was block. Thanks for correcting me on that.

Let's consider a situation where the content of the block link would be loaded dynamically, and you don't know whether it will have text, images, or whatever, but you need the whole block area to be clickable. Instead of divs, would block spans work?

[jscheuer1]

Funny you should ask that. I was wondering the same thing so I tried it out, and it did not appear to work. However, all is not lost. I think the more basic problem here is one of too much markup, not the right markup, and even perhaps also too much style, and/or the wrong style. Generally, the simpler the better.

Consider this simplified version (it looks more complex because I've put all of the styles inline after removing the linked stylesheet):

<div style="width:236px;" title="Thayer Cares">
            <a href="#" style="display:block;width:100%;height:100%;text-decoration:none;"><img style="float:left;display:block;border:none;" src="/images/thayer_cares_heart.png" alt="" />
            Click here to find out how much Thayer cares about you!
            <img style="border:none;margin:-1ex 1.5em 0 0;float:right;" src="/images/thayer_cares_hearts_small.png" alt="Thayer Cares" /></a>
        <div style="clear:both;"></div>
        </div>

It uses only one link, and has no native block level elements inside the link. It lays out about the same as what you had, and is linked throughout, exhibiting the pointer (hand) cursor cross browser.

It could perhaps be simplified further. I'll leave that up to you. But one of the most important things you can do is keep everything as simple as possible.

[jlizarraga]

Thank you so freaking much. You and Medyman have taught me A LOT.