Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anchor tag around fluid image in IE8

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #36049

    Here’s a fiddle. My issue is in IE8 only: http://jsfiddle.net/3gkXU/25

    Much longer story:

    I’m having some trouble with a fluid layout (with images using max-width:100%) in Internet Explorer 8. The problem comes when I want to wrap an anchor tag around a flexible-width image and margins, padding, and borders get involved. This is a little harder than you’d think.

    So the HTML is roughly this:

    And the styling:

    img {
    max-width: 100%;
    display: block;
    }

    .image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: block;
    }

    So what I have is a fluid image, surrounded by an anchor with a padding and border.

    The above is good unless the image is smaller than the container. In that case, the anchor’s padding and border expand beyond the image (filling the full width of the container).

    So let’s try something to force the anchor to fit its content:

    .image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    }

    With display: inline-block, the anchor doesn’t grow larger than the child image, but the anchor box is now not flexible in Firefox, Opera, and IE8+. Next up:

    .image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
    }

    With max-width: 100%, the anchor is flexible again, but it’s 12px larger than the container when the image starts scaling down. The anchor box is calculating its width based on the child image, then adding the border and padding. I believe that’s the correct use of the box model. For some reason, Chrome and Safari don’t do this. Anyway, alternate box model to the rescue:

    .image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    Now it’s working as expected in Firefox, Chrome, Safari, Opera, IE7, IE9, but not IE8 for some reason. There, the anchor still extends outside the container. I’m a little stumped as to what to do, as box-sizing: border-box is supposed to be supported in IE8.

    (As a last resort I could use JavaScript to detect if the anchor is bigger than its parent element, and then switch it to display: block on the assumption that people are unlikely to resize their browser. I’m not against that, but is there a CSS-only solution here?)

    #94835

    In case anyone finds this, I mirrored this discussion on Stack Overflow and got a working response: http://stackoverflow.com/questions/6742877/anchor-tag-around-fluid-image-in-internet-explorer-8

    Basically, you need more markup. Wrap the img in a span. The img is display:block and max-width: 100%. The span is display:block with the padding and border. Then the anchor is display:inline-block (with max-width: 100%) to only grow as large as its contents. Works in all browsers.

    You could also try faking the margin/border on a pseudo element, but this is easier

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.