SirCodesALot wrote:
1. The 5px high red div needs overflow:hidden in the style.
2. You'll need to remove the 0px high div in the green section. IE seems
to have a problem with 0px high DIVs. Even setting overflow:hidden on
them doesn't seem to work. If you set it to 1px high it'll be fine.
Weird huh, a 0px high div is taller than a 1px high div :-)
Here's a working version:
<table cellspacing="0" cellpadding="1" >
<tr height="120">
<td>
<div style="height:9 5px;"></div>
<div style="height:2 0px;">5</div>
<div style="backgrou nd-color:red;heigh t:5px;overflow: hidden;"></div>
</td>
<td>
<!-- div style="height:0 px"></div -->
<div style="height:2 0px;">100</div>
<div style="backgrou nd-color:green;hei ght:100px;"></div>
</td>
<td>
<div style="height:2 0px;"></div>
<div style="height:2 0px;">80</div>
<div style="backgrou nd-color:blue;heig ht:80px;"></div>
</td>
</tr>
</table>
Hi All, I know this is a javascript group, but this where the great
minds are, so I figured I would ask here.
>
Can anyone explain to me why the blue column in this code is
vertically higher than the rest? In Firefox, all is fine. Just in IE
do i see the extra a space.
>
<table cellspacing="0" cellpadding="1" ><tr><td height="120px"> <div
style="height:9 5px;"></div><div style="height:2 0px;">5</div><div
style="backgrou nd-color:red;heigh t:5px;"></div></td><td
height="120px"> <div style="height:0 px"></div><div style="height:
20px;">100</div><div style="backgrou nd-color:green;hei ght:100px;"></
div></td><td height="120px"> <div style="height:2 0px;"></div><div
style="height:2 0px;">80</div><div style="backgrou nd-color:blue;heig ht:
80px;"></div></td></tr></table>
>
thanks in advance,
-Scott
minds are, so I figured I would ask here.
>
Can anyone explain to me why the blue column in this code is
vertically higher than the rest? In Firefox, all is fine. Just in IE
do i see the extra a space.
>
<table cellspacing="0" cellpadding="1" ><tr><td height="120px"> <div
style="height:9 5px;"></div><div style="height:2 0px;">5</div><div
style="backgrou nd-color:red;heigh t:5px;"></div></td><td
height="120px"> <div style="height:0 px"></div><div style="height:
20px;">100</div><div style="backgrou nd-color:green;hei ght:100px;"></
div></td><td height="120px"> <div style="height:2 0px;"></div><div
style="height:2 0px;">80</div><div style="backgrou nd-color:blue;heig ht:
80px;"></div></td></tr></table>
>
thanks in advance,
-Scott
2. You'll need to remove the 0px high div in the green section. IE seems
to have a problem with 0px high DIVs. Even setting overflow:hidden on
them doesn't seem to work. If you set it to 1px high it'll be fine.
Weird huh, a 0px high div is taller than a 1px high div :-)
Here's a working version:
<table cellspacing="0" cellpadding="1" >
<tr height="120">
<td>
<div style="height:9 5px;"></div>
<div style="height:2 0px;">5</div>
<div style="backgrou nd-color:red;heigh t:5px;overflow: hidden;"></div>
</td>
<td>
<!-- div style="height:0 px"></div -->
<div style="height:2 0px;">100</div>
<div style="backgrou nd-color:green;hei ght:100px;"></div>
</td>
<td>
<div style="height:2 0px;"></div>
<div style="height:2 0px;">80</div>
<div style="backgrou nd-color:blue;heig ht:80px;"></div>
</td>
</tr>
</table>
Comment