div Height: 0 problem in IE

Question

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?

Answer 1

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/

Answer 2

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

Answer 3

It's a IE font problem.

Add

font-size: 0;

to your css declaration