On Wed, 23 May 2007, Rachel Vidrine wrote:
> I am creating a CSS menu for a client, and it looks fine in Firefox, but
> in Explorer, there is a space between the first and second links and the
> third and fourth links. It looks strange.
It surely does.
> Can someone explain to me why this is
> happening and what I can do to remedy it?
To start from a practical solution, remove all whitespace (including line
breaks) between <li> elements, i.e. between </li> and <li> tags. This
fixes the issue both on IE 6 and on IE 7.
For IE 7, it is sufficient to add the following at the very start of
the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
This puts IE 7 into "standards mode", where it correctly ignores
whitespace between elements. Actually, it was new to me that on IE 7,
there's this difference between the modes, so I added a note on it into my
page on the effects of Quirks Mode:
http://www.cs.tut.fi/~jkorpela/quirks-mode.html#ws
(If anyone has suggestions on improving the wording of the description,
please reply privately.)
> Here is the menu:
As a rule, it's better to post a URL than a copy of the code. It's easier
to others to check the situation. Besides, the URL often leads to
essential information not included in a code snippet, such as the presence
or absense of a DOCTYPE declaration.
I was puzzled by the phenomenon that there was no gap between the second
and third link. It seems that there is oddity in oddity:
<li><a href="drug.html">Drug Possession
& Manufacturing </a></li>
The space before the </a> tag (for the second item) seems to make the
"white space bug" go away. If I remove the space, there's a gap
between the second and third link, too. Rather maddening, is it not? A
space that should be insignificant implies that IE does not treat other
whitespace incorrectly as significant.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
