SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie9 div layout issue

    Hi, I'm having a problem with my site on some older Internet Explorer browsers, specifically IE9 on Windows. The layout gets really screwed up on IE6, but I don't think I'm going to worry about that one.

    I have a grid of thumbnail boxes, 3 rows of 5 for 15 total boxes. On IE9, the fourth box in the second row of the grid ends up blank, causing the thumbnails to get pushed into an additonal row, which messes up the layout of the lower part of the page.

    http://www.motionphi.com

    I suspect there may be something I can add to the declaration block of my DIV that will fix this issue on older IE browsers.

    Much thanks in advance for any help.

    DS

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is known that the inline-block property is't working in older IE versions. There are some hacks to make it work though.

    display:inline-block;
    zoom:1;
    *display:inline;

    What you can do as well is make the img-wrap divs float. I made a list of the thumbnail part and made the <li's> float and it is working for me in IE9. Furthermore did I remove the extra border class and attached the border property to the image inside img-wrap.

    Have a look here
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's invalid to have <a> tags around block elements like a <div> in anything other than HTML5, but that aside, you've messed up your HTML here, placing the img-wrap div around the shadowbox <a> instead of the other way around, as is the case for the other items.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's invalid to have <a> tags around block elements like a <div> in anything other than HTML5, but that aside, you've messed up your HTML here, placing the img-wrap div around the shadowbox <a> instead of the other way around, as is the case for the other items.
    I understand now that it is invalid to wrap an <a> tag around a <div>. However, I need the entire box to be clickable, and I have a hidden <div> that fades in on mouseover for each box.

    So wrapping the <a> around the <img> inside the visible <div> means that the box is no longer clickable when the hidden <div> fades in. Wrapping the <a> around the content in the hidden <div> means that only that content is clickable (not the whole box), and since that content contains an <h1> and an <h2> tag, i get more invalid markup anyway.

    Is there a solution to this problem that will validate? I've fixed some other issues with the HTML and CSS so this "<a> around the <div>" issue is the only thing keeping my site from validating!

    Thanks in advance for your help.

    DS

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by motionphi View Post
    Is there a solution to this problem that will validate?
    Hehe, just switch to a modern doctype:

    Code:
    <!DOCTYPE html>
    HTML5 allows <a>s to wrap around block elements.

    I need the entire box to be clickable, and I have a hidden <div> that fades in on mouseover for each box.
    You didn't need to use divs to achieve that, but it doesn't really matter, anyhow.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,464
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hehe, just switch to a modern doctype:

    Code:
    <!DOCTYPE html>
    HTML5 allows <a>s to wrap around block elements.
    A note from @Paul O'B about "a" tags around blocks: "Set the anchors that wrap your block elements to be display:block (although IE will sometimes still get confused in more complicated circumstances)."


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
  •