Question posted by: Stevo
(Guest)
on
June 27th, 2008 07:19 PM
SirCodesALot wrote:
Quote:
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:95px;"></div><div style="height:20px;">5</div><div
style="background-color:red;height:5px;"></div></td><td
height="120px"><div style="height:0px"></div><div style="height:
20px;">100</div><div style="background-color:green;height:100px;"></
div></td><td height="120px"><div style="height:20px;"></div><div
style="height:20px;">80</div><div style="background-color:blue;height:
80px;"></div></td></tr></table>
>
thanks in advance,
-Scott
|
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:95px;"></div>
<div style="height:20px;">5</div>
<div style="background-color:red;height:5px;overflow:hidden;"></div>
</td>
<td>
<!-- div style="height:0px"></div -->
<div style="height:20px;">100</div>
<div style="background-color:green;height:100px;"></div>
</td>
<td>
<div style="height:20px;"></div>
<div style="height:20px;">80</div>
<div style="background-color:blue;height:80px;"></div>
</td>
</tr>
</table>
Not the answer you were looking for? Post your question . . .
189,170 Experts ready to help you find a solution.
Sign up for a free account, or
Login (if you're already a member).
