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?