16

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).

alt text

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

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
  • 67,365
  • 22
  • 157
  • 181

5 Answers5

19

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.

Andy E
  • 338,112
  • 86
  • 474
  • 445
12

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>
Sanooj
  • 2,637
  • 15
  • 20
  • 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? – Andy E Oct 12 '11 at 08:42
  • 1
    ok, I have Updated the http://jsfiddle.net/e3cUn/61/ , but you will need to use span outside the image. Please check the above answer its updated – Sanooj Oct 12 '11 at 09:06
  • 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. – Andy E Oct 13 '11 at 12:41
4

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.

Community
  • 1
  • 1
0x4a6f4672
  • 27,297
  • 17
  • 103
  • 140
2

  1. 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;
}

  2. 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:

    <!--[if lte IE 8]>
   <link type='text/css' rel='stylesheet' src='link-to-your-source'/>
<[endif]-->

    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;
    ...
}
Chris Krycho
  • 3,125
  • 1
  • 23
  • 35
  • 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 Jan 05 '11 at 19:42
  • 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? – Nikita Rybak Jan 05 '11 at 19:43
  • 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. – Chris Krycho Jan 05 '11 at 20:54
  • 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`. – Nikita Rybak Jan 06 '11 at 15:34
0

do you have a doctype tag?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

I had a same problem once with IE, that solved the problem.

Good luck

Sebastjan
  • 1,117
  • 2
  • 17
  • 24