IE8 height problem (display:table and box-sizing) - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

IE8 height problem (display:table and box-sizing)

How can I make IE8 render my simple layout like Chrome/Firefox does?

hdn75

8:10 am on Jun 23, 2010 (gmt 0)

10+ Year Member

I am trying to achieve a liquid layout that takes up 100% width and 100% height, using display:table and setting the box-model to include borders/paddings in the width.

This all works fine in Chrome (5.0) and Firefox (3.6.3) but in IE8 it does not. The problem is that setting the height of the cell to 100% makes IE expand beyond the 100% height causing scrollbars. This does not happen in the other browsers and I would not expect this to happen when box-sizing is set to border-box.

Here is an example that demonstrates the error:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Test</title>
 <style type="text/css">
 html, body
 {
  height:100%;
  margin:0px;
 } 
 div.table
 {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display:table;
  table-layout:fixed;
  border-collapse:separate;
  border:5px solid #666666;
  width:100%;
  height:100%;
 }
 div.cell
 {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display:table-cell;
  padding:10px;
  border:10px solid #cccccc;
  background-color:#0000ff;
  width:100%;
  height:100%;
 }
 div.inner
 {
  height:100%; 
  background-color:#ffff00;
 } 
 </style>
</head>
<body>
 <div class="table">
  <div class="cell">
   <div class="inner">Lorem ipsum...</div>
  </div>
 </div>
</body>
</html>

I hope anyone can help figure out how to make IE8 render this corrrectly...

/hdn

Major_Payne

2:14 pm on Jun 23, 2010 (gmt 0)

Design the pages using Firefox or any other browser that is more compliant to CSS 2.1 or CSS 3.0. IE is still years behind in parsing a web page according to web standards. The nice thing about IE is that you can make an entirely IE only CSS file and call it using IE's Conditional Statements [msdn.microsoft.com].

Also, be sure to validate your CSS and HTML:

[jigsaw.w3.org...]
[validator.w3.org...]

hdn75

8:21 am on Jun 24, 2010 (gmt 0)

10+ Year Member

You are probably right. The IE9 testdrive seems to render it correctly.

alt131

2:14 pm on Jun 24, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi hdn75 and welcome to WebmasterWorld,

Although ie8 supposedly has full supports box-sizing, it does not appear to support it on elements with display:table. (So html tables, as well as other elements using display:table as in this sample code.)

I am not recommending any of these options, but they make it work:

Send display:block (rather than display:table/cell to ie using a conditional comment:
Remove display:table/cell from the main css so the divs default to display:block.
That requires adding -webkit-box-sizing:border-box; to div.table/cell or the code fails in chrome/winSafari.
It also thwarts your goal of using display:table/cell.
Use a doctype that produces quirks mode.
That also means the code displays as designed in ie5.5-8 - and even as far back as Opera 7 as well.

I guess my real question is why this technique? Only Chrome and Safari (the same engine) get the combination of display:table and box-sizing right without a proprietory extension. FF gets it right with that assitance, but Opera and ie8 still do not. (Actually both use box-sizing so the -ms extension is redundant). I'm not sure mac or linux browsers would be better.

@Major_Payne: Proprietary properties mean css will not validate.

Major_Payne

2:41 pm on Jun 24, 2010 (gmt 0)

@hdn75: Yeh. Loved the test drive on IE 9. Can't wait for it to come out for all to use so all other IEs can be dumped (wishful thinking :P).

IE Exposed [positioniseverything.net]

Position is Everything [positioniseverything.net]

IE's Box Model Bug [en.wikipedia.org]

Lots more, but think everyone gets the idea what's wrong with IE and the "fixes" used.