Can't use 100% height of LI element in IE.

liunx

Guest
Hi!

Here is a simple html, depicting my problem.
There is an UL List with LI items. Each LI item has a green color and each LI contains a TABLE element with red color. Tables have no borders. So each TABLE must occupy 100% height of LI element. And this is so in Netscape & Mozilla, but not in IE! In IE, i see green stripes between items. I tried to apply numerous styles to LI element, but didn't manage to get off that green stripes in IE. Can anyone help me (to get that green stripes between tables in IE away)?



<HTML>
<style>
UL {background: #000000; color: #000000;}
LI {background: #00FF00; color: #00FF00;}
TABLE {background: #FF0000; border:none}
</style>

<UL>
<LI><TABLE><TD>123</TD></TABLE>
<LI><TABLE><TD>456</TD></TABLE>
<LI><TABLE><TD>789</TD></TABLE>
<LI><TABLE><TD>012</TD></TABLE>
<LI><TABLE><TD>345</TD></TABLE>
<LI><TABLE><TD>678</TD></TABLE>
<LI><TABLE><TD>901</TD></TABLE>

</UL>
</HTML>UL {background: #000000; color: #000000;}
LI {background: #00FF00; color: #00FF00;width:100%;vertical-align:bottom;}
TABLE {background: #FF0000; border:none}

Why the (invalid) table in the li?Yeah, Guy thank You! I thought it was impossible.

Why the (invalid) table in the li?
Sorry, didn't get you. if you mean why i put tables in LI elements, inspite of concatenating them together with <BR> - thats because this structure is hadled some more faster in browsers in my casethe table is invalid because it has no TR tag.
 
Back
Top