Forum Moderators: not2easy
I have an annoying problem which occurs only in Opera (v9). I have no problem in IE6, IE7 or Firefox version.
I reduced my problem to the minimal HTML below that shows the problem.
What I want is that the height of the div in the first cell must be 100%. However the table in the second cell seems to influence the height of the div. But only if the height of that table is set to 100%. If for example the height of the inner table is set to 100px, then the div does grow to 100%.
Is this a bug in Opera? And if so, is there a workaround? Or are Internet Explorer and Firefox wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<body>
<table cellspacing="0"
style="height: 500px; width: 500px; border: 1px solid gray;">
<tr>
<td style="height: 100%; padding: 0; border: 1px solid red;">
<div style="height: 100%; border: 1px solid blue;">1</div>
</td>
<td>
<table style="height: 100%">
<tr>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
height: 100%;Opera is displaying oddly by giving the element in question not its proper height, but feigned a height of 0 (you can see the border doubling up) except placing the content beneath it (which it shouldn't be doing.)
So far I don't know how to fix it... it looks like you're using tables to determine layout of a page though - the reason why we learn so much about CSS-Presentation is so that we don't have to. You could probably avoid the problem altogether if you re-wrote the page without using tables :)
I know I am using tables for layout in this case. I myself am an advocate for DIVs and CSS, but unfortunately browsers, in particular IE, don't always want to play that game.
In particular when you need vertical-align. The "hacks" to achieve vertical-align in IE in many posts in this forum help, but they do not work in all cases.
So sometimes I have to go back to tables and CSS for layout.
