empty <div> still takes up space in IE5/6

[indiechild]

I'm using an empty container <div class="spacer"></div> with this CSS rule:

div.spacer { 
 clear: both; 
} 

however, when I put in <div class="spacer"></div> in my code, MSIE displays a nasty invisible top/bottom margin that I can't get rid of -- it's important because this particular layout needs to be pixel-perfect. I've tried setting margin: 0px; and padding: 0px; but it's no use.

help! Does anyone know how I can get the empty <div> to take up no space on-screen?

[CSS_Guy]

Hi

You've tried margin: 0 and padding: 0 right? You might need to give the element beneath the <div> a look. Maybe a margin-top: 0 would do the trick?

[indiechild]

CSS_Guy: yep I've tried that too, but still no luck :(

THe problem only happens in MSIE5/6, no issues in Mozilla/Netscape or Opera.

[seindal]

A div is supposed to cause a break. Have you tried using a span instead?

[CSS_Guy]

Just had a thought, have you tried this?

div.spacer {
clear: both;
display: inline;
}

Might work?

[seindal]

Wouldn't it be the same as using a <span>

[edit_g]

I've had this same problem in IE- have you tried setting a negative margin?

[indiechild]

CSS_Guy: tried your suggestion, it worked for MSIE (i.e. no more vertical gap)... but it then breaks in Mozilla and Opera 7 :(

AFAIK, clear: both only works in block-level elements such as <div>, but MSIE is an exception to this. Which explains why the <span> thing doesn't work, since it's an in-line element.

P.S. the reason I'm not sticking clear:both in one of the adjacent preceding or following containers is because of a nasty bug in IE5/Mac, which causes all child containers to inherit clear: both even if you explicitly counter that :(

[SuzyUK]

I just tried a test and didn't get a "margin"? in IE, NN or Opera

The only thing I can think is that the container div which you're putting these clear divs into has padding or margin applied to it...

if so remove it and apply you padding to your (floated?) divs instead..that way the clear div shouldn't take up any space at least it didn't in the code I tested!

I'm presuming you need to use them to "create" content for a div which contains floated divs, so if not I'm on the wrong issue

post a sample code if you like

Suzy

[indiechild]

SuzyUK: thanks, that was a good call :) yes indeed the parent container (html body) that the "spacer" <div> was inside had a padding: 10px applied to it.

I set the body to have padding: 0px; and now the problem has disappeared (strange!). I'm gonna adjust the padding on the other containers to compenstate for this, hopefully everything will now work :)