0

I'm trying to make a semi-responsive design on my website. And for that I use percentage for the width and height of everything except the page-wrapper, where I set a max-width in pixels.

I also put max-width and max-height equal 100% on my pictures, so that when people decrease their browser size, so will the images and follow along with the rest of the content. This is working as intended in Chrome, but in IE10 it does not. As far as I can see, it's only when I put my pictures in divs that have display: table-cell

Without the picture in the div, the div increases or decreases according to the window size, just as it should, in both IE and Chrome. But when I put in an image with style="max-width: 100%; max-height: 100%;", then it doesn't scale, not in IE at least.

Is this a bug, or is it working as intended. And is there anything I can do ? :)

Thanks in advance.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
Denver Dang
  • 2,433
  • 3
  • 38
  • 68
  • The problem occurs in IE, Firefox, and Opera. With some types of content, it also occurs in Chrome and Safari. In short, this appears to be a limitation of table cells. Related question: http://stackoverflow.com/q/16397667/1306809 – Matt Coughlin May 06 '13 at 17:11

2 Answers2

2

This IS a bug in IE...but you can often fix it by making the table container have a table-layout attribute equal to 'fixed'.

MattDMo
  • 100,794
  • 21
  • 241
  • 231
Matthue DeYarus
  • 21
  • 2
0

Add !DOCTYPE to the top of the page to get max-width and max-height working in IE, e.g.: < !DOCTYPE html public "-//W3C//DTD HTML 4.0 Strict//en" >

http://msdn.microsoft.com/en-us/library/ie/ms530811(v=vs.85).aspx

CodeWriter
  • 1