CSS "Display:none" Adds Height In IE6?!?!

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hi there

I have quite a bit of experience with CSS but I am stumped by the

(uses http://www.electricphase.com/example/test1.css )

(uses http://www.electricphase.com/example/test2.css )

As you can see, I am using a list (<ul><li>) for my menu, and styling it
to have graphic rollovers, etc.  To prevent the actual list items from
appearing overtop my graphic, I have put them in a <span> and given that
a style with display=none.  This apparantly causes layout problems in

Firefox views those two URLS as identical; IE6 displays the first one
incorrectly (the menu box extends too far).  The only difference between
the two pages is one line of CSS; the first page has

.noDisplay { display: none; }

while the second is totally empty: .noDisplay { }

I have tried adding padding 0px/margin 0px/height 0px/etc etc to the
first CSS page's .noDisplay class, but the bottom line is that "display:
none" is throwing the layout out of whack!!!  How/Why would "display:
none" actually INCREASE the height of the <li>?? You can actually SEE
the <li> grow by flipping between those pages quickly...

It's crazy!!! Does anyone have a solution or explanation?

Re: CSS "Display:none" Adds Height In IE6?!?!

Good Man wrote:

Quoted text here. Click to load it

Explanation: no, it's weird indeed.
Solution: Use visibility:hidden; instead of display:none;

Els                           http://locusmeus.com /
accessible web design:     http://locusoptimus.com /

Now playing: Squeeze - Discipline

Re: CSS "Display:none" Adds Height In IE6?!?!

Quoted text here. Click to load it

Excellent, thanks very much.

Site Timeline