CODEWITHSUNDEEP
htmlcssinternet-explorer
meo
meo

Reputation: 31249

div Height: 0 problem in IE

to clear: both my content i use this:

CSS:

.clr {
  clear: both;
  height: 0; /* i have tried 0.001em to */
  line-height: .001em;
  overflow: hidden;
}

HTML:

<div class="clr">&nbsp;</div>

it works perfectly in every navigator. But in IE 7 & 8 the div still have a height of a few pixels. How can i avoid this?

Upvotes: 5

Views: 4453

Answers (4)

Brandt Solovij
Brandt Solovij

Reputation: 2134

Just coming across this and the answer Ben gave makes sense but it was incomplete in dec of 2011 on IE 7 (legacy support necessitates this.

font-size:0; is a good start but didn't initially do it for me.

Along this line of thought, you need to be mindful of line-height. If you set line-height higher up in the DOM, likely due to the nature of these things, it get inherited ( as was happening to me )

If you have set line-height on a parent, be sure to set it explicitly on the child you are trying to use to force the clear: 

font-size:0;
line-height:0;

-Brandt

Upvotes: 4

Ben
Ben

Reputation: 21249

It's a IE font problem.

Add

font-size: 0;

to your css declaration

Upvotes: 8

kim3er
kim3er

Reputation: 6476

Using empty DIVs to aid presentation is generally bad practice. You might consider changing the CSS of the elements you to clear. A lot of the time clearing can be replaced by the use off inline-block. See http://google.co.uk/notebook/public/06909424369135510368/BDROpQwoQ4-fhwfsj#SDRZLQgoQtfHkwfsj.

Rich

Upvotes: 0

RoToRa
RoToRa

Reputation: 38410

Have you tried using "easy clearing" (or "clearfix") for markup-less clearing. It's usually much simpler:

http://oncemade.com/renaming-and-extending-easy-clearing-aka-clearfix/

Upvotes: 0

Related Questions