0

I have a layout that uses display: flexbox; to centre content, amongst other things. As IE9 and below do not support this I've used a display: table; method instead with almost works a treat.

The problem I'm having is in IE8 (Yes I know, but I have to). For some reason the text escapes it's container, which has display: table-call; set on it. I've never experienced this before using this method and was hoping someone can help. Here is a screenshot of what occurs. with the img and figcaption coloured so you can see there width easier:

Text breaking out of table layout As you can see, the text breaks out of the figcaption.

Here is the mark-up for the code:

<figure>
    <figcaption>
        <h3>E-commerce + Retail</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </figcaption>
    <img src="img/content/ipad.png" alt="ALT TEXT." class="ipad" />
</figure>

And also the CSS:

figure {
    display: table;
    width: 100%;
}

figcaption,
.ipad {
    display: table-cell;
    vertical-align: middle;
}

.ipad {
    width: 48.4375%;
    max-width: 620px;
}

figcaption {
    padding: 0 8% 0 2%;
    width: 51.5625%;
}

The original figcaption width was '41.5625%;', taking into account the padding. But I think table-cell's take this into account themselves, so I've set the width as the actual width. Seems to work in everything else, bar IE8!

Thanks, really hope someone can shed some light on this annoying little glitch!

user1406440
  • 1,329
  • 2
  • 24
  • 59
  • Maybe you hit this issue? http://stackoverflow.com/questions/4608278/internet-explorer-8-ignores-width-for-display-table-cell-element make sure to also read this answer: http://stackoverflow.com/a/7735363/451480 – Blaise Apr 23 '15 at 13:17
  • Thanks, I checked out that thread before posting but unfortunately none of the fixes suggested seemed to work. Maybe because I have 2 div's side-by-side, so display block or inline-block won't work. Cheers again! – user1406440 Apr 23 '15 at 14:59

1 Answers1

1

at <figcaption> use word-wrap: break-word;

That should do what you want.

FYI though, there are other ways that you can contain the text within it's parent element other than the one specified.

gsp
  • 21
  • 5
  • Also i should have added to my last answer that the reason the width : % isn't working in properly in IE is because none of the parents has an actual width set. thus IE doesn't know how to calculate `width: %` since it has no reference point to use for calculations. – gsp Apr 23 '15 at 14:34
  • Thanks for the reply. Unfortunately it's all a percentage layout. I guess with it being IE8 it's not worth going through and changing it all. The fix didn't work but I assume that is because of the percentage layout again. Maybe I should just set the `

    ` tag to have a width of 90% which should do it?

     – user1406440 Apr 23 '15 at 14:58
  • If you can post me a jsfiddle link with some working code, i can take a look and give you a workaround that will work – gsp Apr 23 '15 at 19:52
  • I've added everything into a codepen: http://codepen.io/moy/pen/OVJGWp. I've include my base styles, then the 600px+ styles (I've not bothered putting them in a media-query for this. And then my no-flexbox styles for IE9 and below, which is where the display: table; is set. At the bottom of the CSS you'll see some styling on a class of lt-ie9. That's my 'solution' so far, it doesn't fix the bug but at least the text doesn't overlap. Cheers! – user1406440 Apr 24 '15 at 10:44