internet explorer 8 ignores width for 'display: table-cell' element

html css internet-explorer internet-explorer-8

33,139

Solution 1

After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html> element using conditional comments:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

So all I had to do is add an extra CSS rule for IE 8 and lower:

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.

Solution 2

Use width instead of max-width because in ie8 the actual width of the image will be taken for the table. Check this Fiddle .

Rearrange CSS :

.root img {
    width: 130px;
    max-height: 130px;   
}

Updated

CSS :

.root span {
    width:130px;
    overflow:hidden;
    display:inline-block;
}
.root img {
    max-width: 130px;
    max-height: 130px;
}

HTML :

<div class="root">
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png  /></span>
</div>

Solution 3

It seems to help if the parent container of a display:table-cell element has a display:table attribute (and a table-layout:fixed), see this example and this related question.

Solution 4

If text-align: center isn't working, can you try the following, instead (unless you have some reason that using the table layout is necessary). This is generally the preferred method of centering any block layout element. Using text-align center is a fallback when necessary, but less reliable in my experience - you can't use it for nested divs, etc.
```
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
```
If you need to do a custom override for IE, the easiest way is to use an external stylesheet, and supply the following in your <head> section:
```

```
Supply that stylesheet below the ordinary one, and it should override it. If it does, you can always resort to supplying !important tags at the end of statements you need to override (though it's always preferable to avoid that unless absolutely necessary, as it messes up the inheritance for child elements, and you constantly have to remember it). For example:
```
.root img {
    text-align: left !important;
    ...
}
```

View more solutions

33,139

Author by

Nikita Rybak

Recently joined Google in Australia. Feel free to visit if you happen to be in the office. Author of Newt - question, answer, comment and reputation notification utility for OS X. If you want to say hi, drop me a mail: [first name].[last name]@gmail.com Se vc fala Português, apoia proposta de lingua Português no area 51!

Updated on June 01, 2020

Comments

Nikita Rybak almost 4 years
According to quirks mode, internet explorer 8 does support table options for display property, but in this example it exhibits very strange behaviour
http://jsfiddle.net/e3cUn/3/

In a normal browser, inner image will be scaled to fit 150x150 box without changing dimension ratio (stretching).

But in IE8, outside box (blue one) will also stretch:

1) Have you seen anything like that? It seems to be related to text-align:center: removing this property fixes the problem, but I do need to center image (in non-ie browsers, at least).

2) If this can't be fixed properly, how can I provide a special display value for IE? I've seen a few examples on the web, like #display: block;, but all of them work up to IE7 only.

edit I know about <!--[if IE 8]> and similar commands to put in html, but I was actually looking for a way to do that in css file. Something like this
```
    display: table-cell;
    #display: block;
```
Second line isn't a comment, it overrides previous value for ie7 and below. (but not ie8)

Thanks!
Nikita Rybak over 13 years

I changed 'strict' to 'transitional', still the same. Well, thanks for trying!
Nikita Rybak over 13 years

1) 'display:table-cell' is the only decent way I know to center image vertically. And if I remove it, horizontal centering isn't a problem anymore.
Nikita Rybak over 13 years

2) I know that, I was actually looking for a way to provide IE-specific values inside css file. I don't want to create separate stylesheet for ie (although I will, if that's the only option). Do you know anything like that?
Chris Krycho over 13 years

1) I noted in a brief test that you can use both display: table-cell for the container element and the margin: auto trick on the img element. So you could probably drop the text-align: center from the .root element and style the img directly instead. 2) The only internal IE CSS hack I've seen with any reliability (though I'm not fond of it) is using *, which I believe still works as of IE8. I also don't observe the stretching you're reporting in IE7, which is odd given IE8 is wrong.
Nikita Rybak over 13 years

1) It didn't seem to work, until I removed display: table-cell (I tried with jsfiddle example) 2) Thanks, I'll try that. As for ie7, that's no surprise what the behaviour is completely different: it's supposed to ignore display: table-cell.
Andy E over 12 years

It's a halfway solution, but that will not keep the image's aspect ratio when the image height is greater than its width, right?
Sanooj over 12 years

ok, I have Updated the jsfiddle.net/e3cUn/61 , but you will need to use span outside the image. Please check the above answer its updated
Nikita Rybak over 12 years

Nice trick with conditional styles! Like all amazing things, seems simple in retrospective.
Andy E over 12 years

great solution, +1. Since I was already targeting CSS towards IE 7 and IE 6, I decided to just alter my code to target the same CSS to IE 8, which fixed the problem for me. Otherwise, I would have definitely gone for this.
David Oliver over 10 years

The table-layout:fixed seems to fix it for me. Thanks.