Previous Message
Next Message

Firefox & IE: Different results

Sent by Jukka K. Korpela on 24 May 2007 11:11

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:


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:
(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

        &amp; 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,

css-discuss [EMAIL-REMOVED]]
IE7 information --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: