1

There's a problem while trying to see the project I have when using Internet Explorer 8 (how not?)

The thing is that the image and span, which can be both inline or block with floats, makes always be one below the other, or part of the text.

My example code is:

HTML

<div>
    <div class="text-left">
        <img src="my_image_path.png"><span>Some text at it's side</span>
    </div>
    <div class="text-right">
        <span>Text to the right</span>
    </div>
</div>

CSS:

.text-left {
    float: left;
}
.text-left img {
    margin-right: 10px;
}
.text-right {
    float: right;
}

That code above works perfect in IE9, Safari, Chrome, Firefox... But not in IE8. The image is placed well, but the span doesn't stays in one line (not a very long text). As said above, I've tried with both being block with float left, but doesn't work either. The div container is with an auto width.

Edit: the only way, and not very proud of it, to solve it I found by myself, it's adding minimum width to the div container of the image and span. Hope it's another way more accurate.

Edit 2: here I show you the result in IE8 and Chrome.

Result in IE8:

enter image description here

Result in Chrome (good):

enter image description here

Zander
  • 1,076
  • 1
  • 9
  • 23
  • Put the floating right item in the html first then the float left item, it should fix your problem in IE8 – Huangism Apr 27 '15 at 14:52
  • possible duplicate of [Divs wont float in IE8](http://stackoverflow.com/questions/15811029/divs-wont-float-in-ie8) – Huangism Apr 27 '15 at 14:54
  • Hi @Huangism, I tried that, but the image (left item) is places below. For what I can see in the developers tools from IE8, the width is not the add from the span and image, just the longest one. – Zander Apr 27 '15 at 14:58

5 Answers5

0

Try

.text-left > span { white-space: nowrap; }

Not exactly pretty, but a better alternative than dealing with min-width.

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • Thanks for the try, but seems that doesn't works. The `span` is placed under the image still :( But this time it's all under, not as the image from the question that it's half cutted – Zander Apr 27 '15 at 15:20
0

the reason why you needed a min-width is because you haven't cleared your float.

either use a clearfix or create another element below the floated elements and set it to clear: both;

more on clearfix: https://css-tricks.com/snippets/css/clear-fix/

lifeiscontent
  • 593
  • 5
  • 18
  • Thanks for responding, but I already tried that, and done it again just in case. But it's not that unfortunately :( By this way, it places the span under the image aswell. – Zander Apr 27 '15 at 15:46
0

The key to targeting Internet Explorer 8 and below, with a hack, is to append "\9" to the end of your style.

.text-left img {
margin-right: 20px\9; //Whatever it takes to make it perfect}

This might help you.

Raj
  • 199
  • 1
  • 1
  • 14
  • Thanks, but I tried removing the margin-right too, and still makes it go under or cutted :( – Zander Apr 27 '15 at 15:52
  • Have you tried just by removing or you tried targetting IE8 – Raj Apr 27 '15 at 15:53
  • Removing it completely. – Zander Apr 27 '15 at 15:55
  • This might help you because you have problems in IE8 and that "\9" at the end of the style will make difference in IE8 browser. check it once. – Raj Apr 27 '15 at 15:56
  • I know about that hack, thanks anyways! But for the moment, the only solution I found, and it's a "dirty" one, is adding a `min-width`. It's like IE8 only gets the width from one and adds it to the parent, the container, so it's getting the span width for the container, ignoring the width from the image. – Zander Apr 27 '15 at 16:00
0

Yesterday, I accidentally knew why that was happening.

Bootstrap adds automatically the CSS attribute max-width: 100%; to images. I tried to remove that attribute and magically what the image above didn't happened anymore. IE8 makes some very strange things with some attributes.

Basically you need to remove that attribute to desired images in the moment you need with some kind of class, such as .no-max-width { max-width: none !important; }

Hope this answer can help anyone facing this issue.

Zander
  • 1,076
  • 1
  • 9
  • 23
0

You could use a media object.

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

lifeiscontent
  • 593
  • 5
  • 18