3

I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
.slide {
    border-style: solid;
    border-color: #DDDDDD;
    border-width: 7px;

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

.slide img {
    border-right-style: solid;
    border-color: #DDDDDD;
    border-width: 7px;

    float: left;
}

.slide .caption {
    width: 230px;
    float: left;
    padding: 10px 10px 10px 20px;
}

/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
    max-width: 100%;
    height: auto;
}*/
    </style>
</head>
<body>
    <div class="slide_wrapper">
        <div class="slide">
            <img src="http://placehold.it/362x250" />
            <p class="caption">
            test2
                </p>
        </div>
    </div>
</body>
</html>
zimdanen
  • 5,508
  • 7
  • 44
  • 89
  • 1
    The question has compatibility mode in the tags. Can I just clarify: exactly which IE version(s) you're using, and what mode(s) you're testing it with? And if you're using IE's compatibility mode to test older IE versions, please note that compatibility mode isn't really all that 'compatible'; it has some known bugs and quirks that make it different from the real thing; you would be better off testing in a real copy of IE8 than IE9's IE8 mode. – Spudley May 29 '13 at 14:02
  • @Spudley: I'm in IE9 using IE8 Browser Mode and IE8 Standards Document Mode. However, I just moved this example over to a server that has IE8, and you're right - it's different there (and the text is floating next to the image). – zimdanen May 29 '13 at 14:15
  • 1
    @Spudley: Found the difference; I was setting the mode explicitly in IE9, whereas my example was loading in Quirks mode in IE8. I added the `DOCTYPE` declaration, and now it looks the same in actual IE8. – zimdanen May 29 '13 at 15:12
  • Ah, good old quirks mode. Scourge of the earth. Glad you found it. – Spudley May 29 '13 at 15:13
  • @Spudley: Thanks. Now that the sample is right, I need to get the display right. :) – zimdanen May 29 '13 at 15:15

2 Answers2

1

Setting an explicit width makes the text behave as expected:

.slide {
    width: 629px;
}
zimdanen
  • 5,508
  • 7
  • 44
  • 89
0

Put this in your <head></head> 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

It probably fix the problem.

Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
  • Wow, helps if I uncomment the problematic CSS before testing. This did not work. – zimdanen May 29 '13 at 13:45
  • I didn't downvote; just removed the upvote. I didn't have the last bit of CSS uncommented when I added the meta tag, which is why it looked like it worked. The meta tag does not make a difference to the result (the text is still below the image). – zimdanen May 29 '13 at 13:47
  • ah that's why. I don't know what the problem could be then. It works in IE9? – Kees Sonnema May 29 '13 at 13:48
  • It works in IE9 and IE7; it's just an IE8 issue. (Unfortunately, I have to support IE7+..) – zimdanen May 29 '13 at 13:49
  • In the problem CSS (the last bit)? Does not change the page. – zimdanen May 29 '13 at 13:52
  • Actually make a new css class like: .clear{ clear: both; } and add a div:
    between your image and the `

    ` class.

     – Kees Sonnema May 29 '13 at 13:55
  • That doesn't fix IE8 and also breaks IE7 and IE9. – zimdanen May 29 '13 at 14:04
  • IE8 always had a bug with floats. So I can't help you with this. I'm sorry. This was all that could cause problems. I don't know any more options. – Kees Sonnema May 29 '13 at 14:06