Height of td in ie9

HTML & CSS
1

Hello and nice to meet you.
I have the following problem.
Please take a look at http://paste2.org/p/1911703(I have attached the code below).
In firefox the whole page fits in the viewport(no scrollbars appear) but in ie9 it doesn’t.
Each td has height 100%(the whole page).
The code is generated from a control so it’s a little bit difficult for me to change it.
Any ideas please? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="X-UA-Compatible" content="IE=8" /><title>

</title>
</head>
<body>

    <form method="post" action="" id="form1" enctype="multipart/form-data">
<div style="height:20px" id="menu">
  foobar
</div>
<div id="secondMain" style="position:absolute;top:20px;right:0px;left:0px">
 second
</div>
<div id="editorDiv" style="position:absolute;left:0px;right:0px;bottom:0px;top:50px">
	<div style="height:100%;border:1px solid #f00">
		
		<table cellspacing="0" border="1" cellpadding="0" style="table-layout: auto; width: 100%; height: 100%;">
		<tr>
		<td>
		asf
		</td>
		
		</tr>
		<tr>
		<td style="height:100%">
		1
		</td>
		</tr
		<tr>
		<td style="height:100%">
		2
		</td>
		</tr>
		</table>
	</div>

</div>
</form>
</body>
</html>
2

Hi, Welcome to Sitepoint :slight_smile:

The problem is that you are using the IE8 meta tag and making the pretty good IE9 behave like the pretty bad IE8. Remove the meta tag and let IE9 loose.

Remove This:


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

IE8 and under will still get it wrong though as they will add the 2 cells up and make 2 * 100% equal 200% (as you might expect). You probably should only apply the 100% to the last td anyway otherwise IE9 will try and equally divide it between the 2 cells that have the height specified.

3

Thanks for answering.
In ie8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>

</title>
</head>
<body>
  
    <form method="post" action="" id="form1" enctype="multipart/form-data">
<div style="height:20px" id="menu">
  foobar
</div>
<div id="secondMain" style="position:absolute;top:20px;right:0px;left:0px">
 second
</div>
<div id="editorDiv" style="position:absolute;left:0px;right:0px;bottom:0px;top:50px">
	<div style="height:100%;border:1px solid #f00">
		
		<table cellspacing="0" border="1" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%;">
		<tr>
		<td >
		asf
		</td>
		
		</tr>
		<tr>
		<td style="height:100%">
		1
		</td>
		</tr
		<tr>
		<td >
		2
		</td>
		</tr>
		</table>
	</div>
  
</div>
</form>
</body>
</html>

this still doesn’t work as expected.
The height of #menu and #secondMain are ignored when ie8 calculates the height of the table.
I would expect the table to be equal to the height of #editorDiv.

ps:Well ok,I suppose the title of my post is not 100% correct.

4

No, I said it wouldn’t work in IE8. If you remove the height:100% from the td then it will work and the table will be 100% high (apart from the borders you added which make it bigger). Once you add 100% to one of the tds then the table height in IE8 becomes 100% + the height of the other 2 tds. IE8 doesn’t understand that when you over constrain the height of the table-cells that it should re-distribute within the original table height. Instead it just expands the table to fit the content. Can you get away with just one cell?

Maybe there’s some other way of doing what you want without a table but it sounds like you are stuck to what you have already.

5

sorry for the delay,thank you very much.