468,140 Members | 1,463 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,140 developers. It's quick & easy.

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

Hi there

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

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

http://www.electricphase.com/example/example2.php
(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 <spanand given that
a style with display=none. This apparantly causes layout problems in
IE6.

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 <ligrow by flipping between those pages quickly...

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

Jul 20 '06 #1
2 9293
Els
Good Man wrote:
Hi there

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

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

http://www.electricphase.com/example/example2.php
(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 <spanand given that
a style with display=none. This apparantly causes layout problems in
IE6.

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 <ligrow by flipping between those pages quickly...

It's crazy!!! Does anyone have a solution or explanation?
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
Jul 20 '06 #2
Els <el*********@tiscali.nlwrote in
news:2i******************************@40tude.net:
>It's crazy!!! Does anyone have a solution or explanation?

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

Jul 20 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Sue | last post: by
1 post views Thread by --== Alain ==-- | last post: by
chunk1978
6 posts views Thread by chunk1978 | last post: by
2 posts views Thread by Steve Richter | last post: by
27 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.