1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE8: the sum of the row heights exceeds the table height

Works in FF

         

pat90

8:41 am on Jul 21, 2011 (gmt 0)

10+ Year Member



Hi,

I am using a table based HTML template and a page generator which will display 2 of 3 rows of the table. One row is suppressed (height=0) by the page generator. Additionally the first of the diplayed rows gets a fixed height (85px). The second one shall fill up the remaining vertical space (100% definition is used). The explicit height of the table is unknown to the server, i.e. 100% is used.

The IE8 (older versions do not need to be supported) shows a vertical overflow by 85px (100% + 85px). FF displays the table content correctly.

I did not manage to fix this problem (by using spacers, height=auto, etc). I do not want to use the quirks mode. I also cannot change the HTML template (which is located on the server). The height sizes of the tds/divs are generated by the server, as well.

Does anybody know how this can be fixed via CSS means?

Best Regards
Richard

Simplified example (in IE8 you will see the blue box stretching 85px below the bottom range of the yellow table):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
<link rel="stylesheet" type="text/css" href="table.css">
-->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
div#tbl {
padding: 0px 5px;
position: absolute;
left: 10%;
top: 10%;
right: 10%;
bottom: 10%;
background-color: yellow;
}
table {
border-spacing: 0px;
height: 100%;
width: 100%;
}
td, td div {
width: 100%;
}
td#td1 {
height: 85px;
}
td#td1 div {
height: 85px;
background-color: red;
}
td#td2 {
height: 100%;
}
td#td2 div {
height: 100%;
background-color: blue;
}
td#td3 {
height: 0;
}
td#td3 div {
height: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="tbl" valign="top">
<table>
<tr id="tr1"><td id="td1"><div></div></td></tr>
<tr id="tr2"><td id="td2"><div></div></td></tr>
<tr id="tr3"><td id="td3"><div></div></td></tr>
</table>
</div>
</body>
</html>

Paul_o_b

12:10 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



Does the first row always get an 85px heigh or is is dynamic? If its always 85px then there may be a solution but if its dynamic then I can't see a solution (at the moment).

pat90

12:33 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



Hi,

the server assigns a dynamic height to the first row/td element (85px was just an example).

So if there is no solution via CSS I will need to change the js in the page generator to calculate an exact height of the row/td currently being assigned the 100% height.

Still it would be helpful (also to others) to have a solution without any server / js impacts. E.g. I have tried to use CSS expressions but these seem to be no longer supported in IE8.

Best Regards
Richard

Paul_o_b

1:19 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



If the purpose of the height 100% is simply to provide a full length background then you could do this for IE8 and IE9 as they both fail(and probably ie10 will fail). This assumes that you have the ability to add an IE only stylesheet. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
<link rel="stylesheet" type="text/css" href="table.css">
-->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
div#tbl {
padding: 0px 5px;
position: absolute;
left: 10%;
top: 10%;
right: 10%;
bottom: 10%;
background-color: yellow;
}
table {
border-spacing: 0px;
height: 100%;
width: 100%;
}
td, td div {
width: 100%;
vertical-align:top;
}
td#td1 {
height: 85px;
}
td#td1 div {
height: 85px;
background-color: red;
}
td#td2 {
height: 100%;
}
td#td2 div {
height: 100%;
background-color: blue;
}
td#td3 {
height: 0;
}
td#td3 div {
height: 0;
background-color: green;
}
</style>
<!--[if IE]>
<style type="text/css">
td#td2 div {height: auto;}
td#td1 div {
position:relative;
z-index:2;
}
td#td2:after {
position:absolute;
content:" ";
bottom:0;
top:0;
left:5px;
right:5px;
width:auto;
background-color: blue;
z-index:1;
}

</style>
<![endif]-->

</head>
<body>
<div id="tbl" valign="top">
<table>
<tr id="tr1">
<td id="td1"><div>First row</div></td>
</tr>
<tr id="tr2">
<td id="td2"><div>Second Row</div></td>
</tr>
<tr id="tr3">
<td id="td3"><div></div></td>
</tr>
</table>
</div>
</body>
</html>



Of course this works on the simple example above but may not be suitable if there is more going on than shown above or if the real situation has more requirements. The background is simply shimmed under the content and under the cell above and manipulated via z-index.

pat90

2:48 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



Hi and thanks for the proposal!

rocknbil

4:32 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, first,

I do not want to use the quirks mode.


But then you have

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Which is a "half-doctype" (nickname) which will put you into Quirks Mode. Since you say you can't mod the template, and use a full doctype,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

... you're going to be in Quirks Mode no matter what you do. At any rate, a few grains that may help you:

IE always has (and likely always will) abhorred vacuums. Empty table cells,

<td></td>

Zero "anything's"

height:0;
font-size: 0px;

.. all have been troublesome in the past. Anywhere you have empty content add a non breaking space:

<td>&nbsp;</td>

And set the smallest non-zero values where you have to, for example, a "spacer cell" in a table:
font-size: 1px;

Instead of height:0; use display:none;

td#td3 {
display:none;
}

And in looking at it, you may have another issue. Your selector applies the style to the TD id'ed as #td3, but it applies no such style to the row. Combine that with IE not playing nicely with height 0, maybe it's the <tr> that's giving you the grief. Try

#tr3 {
display:none;
}

That will effectively hide the entire row, cell included.

Paul_o_b

6:42 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



I should have mentioned that point about the doctype but as less than ie8 wasn't to be supported the meta tag ensures that IE8+ stays in standards mode regardless of doctype so I let it slide.:) 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />


Regarding targeting the last row then issue will still be there in IE8 even if you remove the html for the last row so setting it to zero or display none is of no use I'm afraid. The problem is that the 100% is interpreted as 100% of the whole table so you get 100% + 85px(the first row).

lucy24

6:56 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Applying format rules to <tr> can be a bit unpredictable. (That's real-life experience talking, not CSS rules.) Sometimes you can get around it by saying 
tr.suchandsuch td

instead of 
tr.suchandsuch

pat90

7:28 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



Hi and thanks again for all the valuable hints.

I want to share my experience with the proposed DOCTYPE:

Applying the DOCTYPE / loose.dtd (and without the meta tag) makes my IE8 to report:
- IE8 compatible view + IE7 standard document
--> border-spacing does not seem to be interpreted.

Using the meta tag (with or without DOCTYPE / loose.dtd) makes my IE8 to report:
- IE8 compatible view + IE8 standard document
--> border-spacing is interpreted.

I will keep the meta tag to benefit from the support of border-spacing, :first-child, float applied to table rows, iframes with allowtransparency... in the IE8. Since the meta tag is a mandatory change to the server's HTML templates I will also change the js assigning the 100% height and change the procedure to explicitely calculate the tr/td height. With this the content of the included div will be completely available to the user.

I case I still manage to "compress" the second row such as the complete content of the div is displayed I will post it here. Sure I will also follow up on any updates / hints.

Best Regards
Richard

P.S. Glad to see so many professional answers just within few hours.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026