SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <a ...><div> ... </div> </a> will fail on IE 6 and IE 7

    once in a while i have layout like this

    Code HTML4Strict:
    <a href="...">
        <div>
            <img ...>  some title
        </div>
    </a>

    and then the link works in Firefox 2, 3, Safari, Chrome, but it won't work well in IE 6 and 7. Usually, the title is a valid link, but the image is not. The mouse cursor does change to a "hand" shape when we move the mouse over the image, but when you click on it, it won't go. Any body know how to fix it besides using 2 links, one around the image and one around the title? thanks.

    (i am using XHTML 1.0).

    [Update: the main requirement is that the whole div of 300 x 200px will be clickable]
    Last edited by winterheat; Nov 6, 2008 at 09:32.

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It should fail on all browsers. It is not valid XHTML code. You should not have block level elements within inline elements like that. The proper coding would be:

    <div><a ...><img... /></a></div>
    Wayne Luke
    ------------


  3. #3
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what if i have something like this:

    Code HTML4Strict:
    <a href="...">
        <div>
            <img ... style="float: left">  <div style="float:left">some title</div>
            <div style="clear:both"></div>
        </div>
    </a>

    then also just wrap the link around the image and the title itself?

    what if i actually want the whole 300 x 200px div to be linkable (instead of just the image and the title, coz the title can be just 60px long and i want the whole 300 x 200px to be clickable).

    by the way, is it an HTML or XHTML design shortcoming that <a > cannot wrap around a div? coz, it is quite reasonable to have a block that is clickable.

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not sure how it would solve the problem. If it does then use it.

    I don't necessarily agree that the <a> tag should be considered an inline element but it is. There are other ways to get around block and inline nesting. Not even sure the terminology is correct anymore since you can make any element simulate inline or block display with CSS. Oh well... to get it changed you need to talk to the W3C.
    Wayne Luke
    ------------


  5. #5
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so my ultimate question is, how do you make the whole div clickable (300 x 200) px not just the image and the title (the title may be short, like 60px wide).

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You put an onclick event on the div, or even preferably just the anchor, and handle it from there. The people in the javascript forum can help you out with that.

    Code javascript:
    <a href="..." class="globalClick">
        <img ...>
        Title
    </a>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    You put an onclick event on the div, or even preferably just the anchor, and handle it from there. The people in the javascript forum can help you out with that.

    Code javascript:
    <a href="..." class="globalClick">
        <img ...>
        Title
    </a>
    oh isn't it true that then when people turn off javascript, then it won't work? kind of want a solution that gracefully degrades. thanks.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by winterheat View Post
    oh isn't it true that then when people turn off javascript, then it won't work? kind of want a solution that gracefully degrades. thanks.
    It's about progressive enhancement rather than graceful degradation, the former being the preferred alternative over the latter.

    First you get the page working as best as possible using only standards-based html. This means only inline elements inside anchors. No block-level elements are allowed.

    Next, you use javascript to improve the experience, by allowing clicks on the background area of the linked items to be considered a link click as well.

    There is a way to do this without javascript at all, and that's where a second image of transparent pixels is used and placed behind the text, but that won't degrade as nicely when there's no css.

    So apply the progressive enhancement principles. Start with standards-based HTML, improve the presentation with CSS, then enhance the behaviour with javscript. That's the most reliable way for any design to work across a majority of interfaces.

    A List Apart recently ran an excellent article about understanding progressive enhancement.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    It's about progressive enhancement.

    First you get the page working as best as possible using only standards-based html. This means only inline elements inside anchors. No block-level elements are allowed.

    Next, you use javascript to improve the experience, by allowing clicks on the background area of the linked items to be considered a link click as well.

    There is a way to do this without javascript at all, and that's where a second image of transparent pixels is used and placed behind the text, but that won't degrade as nicely when there's no css.

    So apply the progressive enhancement principles. Start with standards-based HTML, improve the presentation with CSS, then enhance the behaviour with javscript. That's the most reliable way for any design to work across a majority of interfaces.

    so you mean for the HTML only page, use 2 links for the image and for the title, then, add the onclick event to the outer div?

    a big issue is that when we change the link, we have to change it at 3 places. Granted... if we use PHP, then we can set a variable first and use it at 3 places. But that means for users who have no javascript, the whole div won't be clickable on IE 6 or 7 huh? thanks.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    No sorry, what I mean is what I said before. The div isn't required for the effect to work well. It's better to have the anchor as the element that fires the onclick event, so that the script has an easier time working out what path it should follow.

    Code javascript:
    <a href="..." class="globalClick">
        <img ...>
        Title
    </a>

    The script would be something like the following:

    Code javascript:
    getElementsByClassName('globalClick').onclick = function () {
        location.href = this.href;
    }

    But would obviously require other code for the getElementsByClassName function

    You are right that with no javascript that users will be able to follow the link by clicking either on the image or the text, but not the background itself. That is unavoidable unless you use a server-side solution to create an image from text and use that instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    There is no reason to use Javascript for this. Just do the following:
    Code html4strict:
    <div class="image">
      <a href="...">
        <img>
        Lorem ipsum dolor sit amet.
      </a>
    </div>

    Code css:
    div.image {
      height: 200px;
      width: 300px;
    }
     
    .image a {
      display: block;
      height: 200px;
      width: 300px;
    }
     
    img {
      display: block; /* Fixes display issue in some browsers */
    }
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I agree, that is a great css solution to the problem
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just using a span in place of the div in the original post will work perfectly well and be entirely valid.
    Ed Seedhouse

  14. #14
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    There is no reason to use Javascript for this. Just do the following:
    Code html4strict:
    <div class="image">
      <a href="...">
        <img>
        Lorem ipsum dolor sit amet.
      </a>
    </div>

    Code css:
    div.image {
      height: 200px;
      width: 300px;
    }
     
    .image a {
      display: block;
      height: 200px;
      width: 300px;
    }
     
    img {
      display: block; /* Fixes display issue in some browsers */
    }
    thanks for the solution. I will try next. the thing is that i am actually floating the img to the left (size 60 x 45px) and then the title also in a div float to the left, so that a title of 2 lines will be nicely displayed by the side of the image.

    so i will try next. maybe the title can be in a span but with the display set to block, so that the width and height is settable. (span won't follow the width in standard CSS). thanks very much.

  15. #15
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I tried for 3 simple cases:

    http://www.0011.com/css/link-whole-div1.html
    this is the classic case where it works on FF and Chrome, but not on IE 6 or 7 (the image not clickable)

    http://www.0011.com/css/link-whole-div2.html
    having a 300 x 100px <a> element wrapping around the row. Still, the same problem as case 1.

    http://www.0011.com/css/link-whole-div3.html
    the row wrapping around the <a>, both of them 300 x 100px. Now it works on FF, Chrome, and IE 6, and 7, but the issue is that on IE 6 and 7, when the mouse is over the text, it won't be a "hand" cursor. the clicking works, just that the cursor won't change. so in the next example, i used cursor: pointer for the title class:

    http://www.0011.com/css/link-whole-div3b.html
    now it works in FF, Chrome, IE 7, but not on IE 6. I found that the a:hover needs to set to { cursor: pointer } for IE 6

    http://www.0011.com/css/link-whole-div3c.html
    And it works in FF3, Chrome, IE 6 and 7. I guess then this is a solution that works in most popular browsers? Gee... such a simple requirement and it takes so much effort? Could there be something simpler? thanks.

    http://www.0011.com/css/link-whole-div3d.html
    finally, this is a sample where the div is changed to an aqua background. again, i cannot just set .title:hover to have the aqua background because it won't work on IE 6. I need to set it for .row a:hover as well. or, only set it for .row a:hover, as in the next example:

    http://www.0011.com/css/link-whole-div3e.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •