5 replies [Last post]
Jolle
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2003-12-29
Posts: 4
Points: 0

Hey everybody, first post here! Smile

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?!?

Jolle
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2003-12-29
Posts: 4
Points: 0

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?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Tiny DIV height: works in Mozilla, not in IE6

try adding border: none;

Regards
Day

The only way to learn is to do it yourself

Jolle
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2003-12-29
Posts: 4
Points: 0

Tiny DIV height: works in Mozilla, not in IE6

Thanks, Day, but that's not doing the trick either Sad Also tried border: 0px; but same thing there...

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 48 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Tiny DIV height: works in Mozilla, not in IE6

hmmm try
overflow:hidden;

Regards
Day

The only way to learn is to do it yourself

Jolle
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2003-12-29
Posts: 4
Points: 0

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!