View Full Version : IE misenterpreting newlines?

02-03-2004, 06:53 PM

I don't know what's causing it, but my menu menu and "theme list" look dreadful in IE, uless I put the <ul> code all on the same line, in which case it looks pretty much like it would in Mozilla.

Anyone know a way to fix this, without putting it all on one line? I want the source to be legible...

Thanks :)

02-03-2004, 06:57 PM
hmmm well im using mozilla firebird, and all i can say is it looks great :D not thew answer u wanted but hey

02-03-2004, 09:21 PM
There is a *bug* (yes, bug) in the way that all IE versions handle list elements. If they're not all on the same line, then they cause an extra space to appear. This bug is documented in Designing with Web Standards (http://www.zeldman.com/dwws/) by Jerrey Zeldman.

The only way to get around it in IE is to have the entire list on a single line. If you're using PHP or another server-side language, you can have your PHP source code on different lines, but have it generate as all on a single line.

IE6 in standards-mode (triggered by a valid XHTML doctype) isn't as bad about it in general, but IE5 and 5.5 have big problems with it.

02-03-2004, 09:43 PM
Hmm... Was affraid of that. Will just write a theme for IE users that adoesn't use anything bleeding edge like lists...


02-03-2004, 10:01 PM
Actually, I found a disgusting workaround...

I wrapped the contens of my <li> with <div> tags. Tried to tell li to display: block, but didn't work. It wants that tag there...


02-04-2004, 10:29 AM
If I recall correctly, IE only requires the end tag of one li element and the beginning tag of the next to be on the same line; a line break can be placed in the content itself, something like:

<li>bla, bla, bla
</li><li>the next list item
Not exactly pretty coding, but you could give that a try.

02-04-2004, 02:20 PM
I can't see your original problem, because presumably your DIV hack masks it, but I can tell for sure that you don't need to strip all the whitespace, or resort to extra markup, to make styled lists work in IE.

If what you were seeing is anything like this - http://www.brothercake.com/Ref/IE-list.html - the links have space between them instead of being right on top of each other?

02-04-2004, 10:45 PM
Try now (look at the first item in my menu).

There's a linebreak in the render where there shouldn't be. The last item in the list is wrapped with <div> and doesn't have the problem.

<span> is there simply as part of my menu styling (on both items)

02-06-2004, 12:01 PM
For crying out load, if you need that much superfluous coding to get your list the way you want it in a non-conforming, buggy browser, you might as well go back to using tables!!!

I'll give the suggested formatting a try.

Oh, and Brothercake: there are spaces in between them...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Border test</title>
<style type="text/css">

ul {list-style-type: none;
margin: 0;
padding: 0;

li {border: 1px solid black;
display: block;
width: 140px;
margin: 0;
padding: 0.5em;

<li>Blah 1</li>
<li>Blah 2</li>
<li>Blah 3</li>
<li>Blah 4</li>
yields 4 black-bordered boxes jammed right on top of eachother, no spaces. In IE5.5/Win2000, that is.