Having just converted a menu from a table to an unordered list I find I have extra space between the list items in all versions of IE. I seem to have given margin and padding to all the required items and have validated the document as HTML 4.01 transitional. http://www.southgatecountyschool.co.uk/ - any ideas what I’m missing please? And, yes, I do still have a couple of tables for layout which I’m working on removing…
Thanks G 
Not looking at anything else, just reading your text with the words “extra space” and “IE” I just jumped to conclusions (they say Judge Not Lest Ye Be Judged but I can’t help myself).
So see if Gary’s page has the answer you’re looking for. If not, let us know and we’ll actually see which other IE bug it is (you said “IE” so, what other browsers did you check in? But still likely an actual IE bug).
Me, I tend to always do
li {
display: inline;
}
just for IE and then
#menu a {
float: left;
}
and if it’s vertical menu then I make the anchors 100% wide. Floating triggers Haslayout.
However, is IE8 included when you say “all versions of IE”? Because IE8 does not have Haslayout, and so far as I know does not have the whitespace bug (but possibly some other whitespace bug?).
One quick fix for that issue that I’ve seen is to put all the <li> tags on one line in the HTML.
^ yeah or this:
<ul>
<li><a href=“foo”>FOO</a></li
><li><a href=“bar”>BAR</a></li
></ul>
Lawlz. I do know someone who just does this every time, also so he doesn’t have to worry about W3C browsers counting the newlines as “text nodes” when walking the DOM in JS.
Thanks guys. I’ll give these a try. It’s fine in Firefox 3, Chrome, Opera, Arora and Safari on Windows and Firefox and Chrome on Linux. I’ve used IETester and get the extra white space in 5.5, 6, 7 and 8.
Well, as a temporary measure I have put the list items on a single line - and it fixes IE 5.5, 6, 7 and 8. However, I have looked at another site where I have a vertical menu and I have no frigs for IE and it works in all versions using IETester. I don’t know if the difference is that the other site is XHTML 1 rather than HTML 4 but I need to give my brain a rest at this point…
I don’t know if the difference is that the other site is XHTML 1 rather than HTML 4 but I need to give my brain a rest at this point…
Shouldn’t be, but also IE8 shouldn’t be affected either way (that I know of), so time to actually take a look at the page : )
*edit AHA!
You don’t have a complete doctype on the page you linked:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/main.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Southgate County School</title>
While browsers don’t actually USE the referrer, IE will check if it’s there, and if not, it considers going into Quirks mode anyway.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
You need that line anyway… .may not fix yer bugs but you still want to add that.
(or, since you’re restructuring the page anyway… consider moving to Strict? It will let the validator tell you ALL the little mistakes and deprecated elements you’re using : )
Screenshots for others (will disappear everntually as I go through server cleaning):
IE7
FF3
Hi,
The easiest way to cure the whitespace bug in lists (without harming the formatting of the html) is simply to float the list item and the anchor within - although that means setting widths for both unless they are content width.
This completely cures the whitespace bug every time.
Formattimg the html to close the whitespace is a fragile solution because code is often reformatted after the event and then you get your whitespace back.
Ah! Thanks - that’s done the trick for IE7 & 8. I wonder the W3C validator didn’t pick it up…
Thanks Paul
Putting the list items as a single line was only a temporary measure.
Cheers G
INstead of doing it all in one line you could have also connected the <li> via comments :).