PDA

View Full Version : Simple Table Problem in IE 6



RogerWilco
Nov 14th, 2006, 04:35 PM
Does anyone know how to fix this simple HTML table problem in IE 6 (works in Mozilla). To see the problem, just view it in IE 6. The page is simple but heavily commented.

This is from a more complex dynamic web app. I would really like to avoid:
- Simplifying the table structure
- Removing the DOCTYPE header. If I remove that, the problem completely disappears.

Any ideas?


<!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">
<body style="height: 100%; margin: 0;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0">
<tr style="height: 100%;">
<td style="background-color: #DDEEFF; vertical-align: top; height: 100%; width: 20%">
<!-- This cell properly extends to the full height of the page including scrolling. -->
<table style="height: 100%;" cellpadding="0" cellspacing="0">
<tr height="100%">
<td height="100%" style="background-color: #EEFFDD; vertical-align: top;">
This is the sole cell within an embedded table inside of the outer table's left cell.<br/>
<br/>
This cell has a green background.<br/>
<br/>
On Mozilla, I get the desired behavior where the inner cell extends to the bottom
of the outer cell. If you scroll down, the whole height of the page is green.<br/>
<br/>
On IE, the embedded cell only extends to the height of the first page. The background
is green on this page. However, if you scroll down, the cell ends and you can see the
blue background of the outer cell.<br/>
<br/>
How do I get IE to behave like Mozilla where the inner cell/table takes up the entire outer cell?<br/>
</td>
</tr>
</table>
</td>
<td style="background-color: #FFDDEE; width: 80%; vertical-align: top;">
This is the right cell.<br/>
This has a lot of contents that requires vertical scrolling...<br />
<br />
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>
</td>
</tr>
</table>
</body>
</html>

_Aerospace_Eng_
Nov 14th, 2006, 05:40 PM
Why are you even using tables for this? It can be done without tables. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". Take a look at this example as well.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background:#DEF;
}
p {
margin:0;
padding:5px;
text-align:justify;
}
#container {
min-height:100%;
margin-left:20%;
background:#FDE;
position:relative;
border-left:1px solid #000;
}
#left {
width:20%;
float:left;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="left">
<p>This is the sole cell within an embedded table inside of the outer table's left cell.</p>
<p>This cell has a green background.</p>
<p>On Mozilla, I get the desired behavior where the inner cell extends to the bottom
of the outer cell. If you scroll down, the whole height of the page is green.</p>
<p>On IE, the embedded cell only extends to the height of the first page. The background
is green on this page. However, if you scroll down, the cell ends and you can see the
blue background of the outer cell.</p>
<p>How do I get IE to behave like Mozilla where the inner cell/table takes up the entire outer cell?</p>
</div>
<div id="container">
<div id="right">
<p> This is the right cell.</p>
<p> This has a lot of contents that requires vertical scrolling...</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin lorem. Nunc vel nibh ac turpis varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eget neque condimentum quam consectetuer ornare. Integer dignissim condimentum tortor. Pellentesque quis purus et augue viverra vestibulum. Etiam eros. Nam vel mauris ut tellus ultricies accumsan. Sed a nibh porttitor nulla dignissim lobortis. Sed sapien. Etiam convallis. Vivamus metus. Vivamus ut lorem eu odio consectetuer blandit. Integer rutrum orci a nulla. Cras pulvinar ultricies urna. Mauris eleifend lacus sit amet elit. Pellentesque placerat tincidunt ipsum. In justo. </p>
<p> Nam a velit at ligula nonummy posuere. Duis congue lectus. Aliquam erat volutpat. Proin ac orci quis odio consequat placerat. Proin porttitor, nunc sit amet faucibus posuere, mi dolor pharetra libero, non adipiscing arcu pede a elit. Maecenas faucibus. Mauris sit amet nulla eget mauris mollis pellentesque. Vestibulum ornare nulla sed elit nonummy consequat. Suspendisse et eros. Fusce suscipit sagittis magna. Maecenas auctor tincidunt ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nec felis eu felis egestas imperdiet. Integer lacus metus, lacinia eget, ullamcorper laoreet, eleifend vitae, enim. Phasellus dapibus. Donec urna. </p>
<p> Integer nec massa nec ipsum mattis tincidunt. Praesent eu elit et dui placerat tristique. Quisque vulputate dolor sit amet dolor pharetra porta. Aliquam lacus justo, cursus quis, vehicula vitae, rutrum quis, est. Donec libero purus, fringilla vitae, molestie in, pellentesque vel, felis. Fusce quis justo in arcu tempor vehicula. Vivamus velit justo, auctor a, euismod vel, consequat non, neque. Praesent tristique nunc feugiat dui. Ut tempor urna nec lorem. Phasellus egestas sapien ac elit. Nulla imperdiet malesuada risus. Etiam mi. Donec quis est. Duis nisi nisl, scelerisque eu, hendrerit vel, feugiat eu, leo. Fusce scelerisque. Morbi porttitor adipiscing quam. </p>
<p> Pellentesque tristique. Cras rutrum dolor nec nisi. Nam erat. Nunc nulla leo, sollicitudin ut, condimentum eget, tincidunt vel, lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer posuere pretium massa. Suspendisse nulla. Donec quis eros. Sed sed lorem. Nunc mollis. Nunc enim justo, lacinia id, eleifend eu, feugiat vitae, lectus. </p>
<p> Donec hendrerit quam eget urna. Praesent interdum. Nam tristique. Phasellus adipiscing interdum est. Pellentesque ac felis. Aenean vel neque sit amet nulla commodo ultricies. Etiam mattis. Nunc consectetuer cursus odio. In quam tellus, tristique ut, congue ut, commodo nec, dui. Nunc malesuada aliquam augue. In varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in mauris. Phasellus tristique, massa at tempor mattis, nisl mauris commodo lorem, ut dignissim dolor leo ac augue. Nullam tortor libero, dictum eu, consequat eu, lacinia at, lacus. Curabitur aliquam. Aenean consectetuer. Nam molestie tortor non arcu. Sed ac massa et sapien varius commodo. Phasellus sapien augue, blandit id, pharetra eget, ultrices quis, turpis. </p>
<p> Nunc dolor sem, volutpat et, eleifend quis, scelerisque non, arcu. Quisque quis enim. Aliquam et lorem non lacus accumsan convallis. Duis semper lacus sed nisl. Nullam adipiscing, lectus non dapibus bibendum, ante enim laoreet tortor, vitae laoreet dui nisl ut nunc. Curabitur condimentum consequat ante. Vestibulum convallis, turpis at dictum feugiat, felis tortor feugiat lacus, vitae ultrices purus leo in enim. Donec tellus elit, mollis ut, iaculis quis, facilisis nec, turpis. Donec faucibus, massa a lobortis iaculis, mauris turpis pharetra leo, a nonummy dui felis at pede. Phasellus tristique. </p>
<p> Vivamus eleifend tortor eget dui. Sed pretium. Curabitur consequat nulla viverra ligula. Suspendisse eget dui non est tincidunt gravida. Vivamus ut erat. Phasellus at orci. Nulla varius gravida sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed lectus tellus, placerat eu, elementum sit amet, tristique vulputate, justo. Maecenas pede. Etiam aliquet dui at ipsum. </p>
<p> Aenean gravida ante ut erat. Aenean porta, eros a laoreet vulputate, nunc dolor faucibus lorem, in tempus lectus turpis eu mi. Duis felis nunc, cursus vitae, suscipit eget, faucibus a, turpis. Duis id nisi. Etiam pulvinar dolor et tortor. Vestibulum ac velit et nisl tristique egestas. Fusce non elit. Sed nisi. Suspendisse nec mi id nunc dapibus placerat. Nullam eget magna. Suspendisse congue. Nam luctus velit at massa. Donec quis sapien. Donec ac massa. Nullam ut magna. Proin mattis orci eget mauris. Sed augue. Aenean lacus. </p>
<p> Vestibulum eu velit vitae nulla consequat tristique. Vivamus odio eros, suscipit sit amet, posuere eget, porta eu, arcu. Ut leo dui, laoreet et, condimentum et, tincidunt quis, lacus. Proin arcu magna, sagittis sed, accumsan sed, dictum sed, sem. Nulla facilisi. Nulla facilisi. Phasellus semper auctor enim. Sed felis dui, pretium nec, tristique nec, tristique a, massa. Vestibulum sapien est, accumsan vel, cursus blandit, placerat in, risus. Cras et lectus at massa pulvinar venenatis. Aenean quam. Praesent ut augue ut nulla elementum bibendum. Maecenas ultricies accumsan arcu. Mauris non nulla. Mauris faucibus dui in risus. </p>
<p> In ac arcu. Vestibulum orci. Nullam euismod urna quis nisl. Curabitur turpis justo, interdum sed, blandit nec, aliquet et, nisl. Quisque sed velit a est dapibus placerat. Vivamus aliquet, felis ac feugiat eleifend, nisi elit fringilla ligula, ac venenatis metus lacus placerat quam. Suspendisse lorem. Aliquam erat volutpat. Aenean tempus, massa ut posuere auctor, nunc lorem placerat enim, id consectetuer nisl dolor quis lorem. Duis mi. Morbi eget mi. Sed sem lacus, vulputate a, nonummy vitae, tempus eget, est. Nam lacinia felis in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam urna neque, tempor quis, hendrerit tempor, placerat ac, ligula. Vestibulum convallis ornare dui. In dapibus lacinia magna. Curabitur vestibulum nunc. Curabitur lectus metus, gravida quis, accumsan non, hendrerit at, enim. Etiam pellentesque eros eget urna. </p>
</div>
</div>
</body>
</html>

RogerWilco
Nov 14th, 2006, 10:20 PM
Why are you even using tables for this? It can be done without tables.

Thanks for the response. That code won't work precisely, but I think I'm beginning to see the light in using div/css for layouts instead of tables.

I'm going to post another thread on a div/css issue I'm hitting (doesn't belong in this thread)

Thanks!