Forum Moderators: not2easy
I have encountered some problems when splitting a table cell in several horizontal div's.
I noticed that when I split a cell with 2 div's that are 50% each it works fine. However if the proportions are 99% : 1% somehow the entire cell becomes bigger than was declared in IE6. In Firefox it looks fine.
Here is the HTML & CSS to demonstrate this problem.
The problem even stays the same when the size is changed from % to px!
is there any way to force the yellow div to go smaller in IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
table {
border-collapse: collapse; width: 300px;
}
td {
border-style: solid;
border-width: 1px;
border-color: gray;
}
td.colours {
padding: 0px;
height: 100px;
}
div.red {
height:99%;
background-color: red;
}
div.yellow {
height: 1%;
background-color: yellow;
}
</style>
</head>
<body>
<div style="border: 1px solid blue; height: 100px; width: 100px; float: left ">100x100</div>
<table>
<tr>
<td class="colours">
<div class="red"></div>
<div class="yellow"></div>
</td>
</tr>
</table>
</body>
</html>
<table>
<tr>
<td class="red"></td>
</tr>
<tr>
<td class="yellow"></td>
</tr>
</table>
As far as the div not showing as the right height, that's probably because there's nothing inside it.
However I have a basic problem with IE6 when I use 2 or more div's as I explained I the initial post.
Does that clarify the situation for you?
Inserting or something else has no effect on the height.
