I added a 3 column lists to my site using the techniques shown on
http://www.communitymx.com/content/a...ge=1&cid=27F87
I first tried their code by itself and it worked fine. When I merged it into my own, it worked fine with Firefox and Safari but not on IE 7.
IE7 displayed the 3rd column but the first two columns were not shown. I was able to reproduce with the original small test by adding a background-color statement to #lists. When this statement is omitted it works in all 3 browsers.
======================================
My HTML:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Horizontal Navigation Bar Tests</title>
<link rel="stylesheet" type="text/css" href="list4C1.css" />
</head>
<body>
<div id="lists">
<ol>
<li class="col1">Antelope</li>
<li class="col1">Baboon</li>
<li class="col1">Bison</li>
<li class="col1">Camel</li>
<li class="col1">Chimpanzee</li>
<li class="col2 coltopper">Deer</li>
<li class="col2">Eland</li>
<li class="col2">Elk</li>
<li class="col2">Gazelle</li>
<li class="col2">Gibbon</li>
<li class="col3 coltopper">Kangaroo</li>
<li class="col3">Meerkat</li>
<li class="col3">Sheep</li>
<li class="col3">Warthog</li>
<li class="col3">Zebra</li>
</ol>
<ul>
<li class="col1">Antelope</li>
<li class="col1">Baboon</li>
<li class="col1">Bison</li>
<li class="col1">Camel</li>
<li class="col1">Chimpanzee</li>
<li class="col2 coltopper">Deer</li>
<li class="col2">Eland</li>
<li class="col2">Elk</li>
<li class="col2">Gazelle</li>
<li class="col2">Gibbon</li>
<li class="col3 coltopper">Kangaroo</li>
<li class="col3">Meerkat</li>
<li class="col3">Sheep</li>
<li class="col3">Warthog</li>
<li class="col3">Zebra</li>
</ul>
</div>
<p> http://www.communitymx.com/content/article.cfm?cid=27f87 </p>
</body>
</html>
[/HTML]
================================================== =
My CSS:
- body{
-
background-color: yellow;
-
}
-
-
#lists{
-
margin: 0;
-
/* when background-color is removed from this section, the lists will be displayed correctly in IE ;*/
-
background-color: white;
-
}
-
-
li {
-
margin: 0;
-
padding: 0;
-
line-height: 1.3em;
-
}
-
-
.col1 {margin-left: 3em;}
-
-
.col2 {margin-left: 13em;}
-
-
.col3 {margin-left: 23em;}
-
-
.coltopper {margin-top: -6.5em;}
Multiple column problem with IE7 when using background-color 
