Mon, 2003-12-29 01:49
Hey everybody, first post here! 
I decided to take Zeldman's advice and get rid of tables and go completely forward compatible with CSS, ran into a whole bunch of problems, and one I can't seem to fix...
What I need is a separator row of 3px high. Basically, I wrote the following:
<div style="height:3px; background:#ffcc00"></div>
This works fine in Firebird, but IE6 completely ignores the height and displays the div 19px high. Margins, padding, width etc. don't make any difference, neither does omitting the DOCTYPE (incidentally, xhtml1-strict).
Does anyone know what causes this, and how to fix it?!?
Mon, 2003-12-29 03:33
#1
Tiny DIV height: works in Mozilla, not in IE6
Okay, this turns out to be caused by the fact that the <div> has no content in it, it's an IE thing... Placing a 1x1px transparent image in the <div> does the job, but I do think it's an ugly workaround.
<div style="height:3px; background:#ffcc00"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
Is there a purely CSS trick?
Mon, 2003-12-29 03:44
#2
Tiny DIV height: works in Mozilla, not in IE6
try adding border: none;
Regards
Day
Mon, 2003-12-29 03:59
#3
Tiny DIV height: works in Mozilla, not in IE6
Thanks, Day, but that's not doing the trick either 
Also tried border: 0px; but same thing there...
Mon, 2003-12-29 13:11
#4
Tiny DIV height: works in Mozilla, not in IE6
hmmm try
overflow:hidden;
Regards
Day
Mon, 2003-12-29 14:14
#5
Tiny DIV height: works in Mozilla, not in IE6
That worked perfectly!!! It makes sense, too, but I don't think I would ever have thought of that. Day, thanks SO much, I've got clean code again!