471,319 Members | 1,779 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,319 software developers and data experts.

Multiple column problem with IE7 when using background-color

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

Expand|Select|Wrap|Line Numbers
  1. body{
  2.   background-color:  yellow;
  3. }
  4.  
  5. #lists{
  6.   margin: 0;
  7.   /* when background-color is removed from this section, the lists will be displayed correctly in IE ;*/
  8.   background-color:  white;  
  9. }
  10.  
  11. li {
  12.   margin: 0;
  13.   padding: 0;
  14.   line-height: 1.3em;
  15. }
  16.  
  17. .col1 {margin-left: 3em;}
  18.  
  19. .col2 {margin-left: 13em;}
  20.  
  21. .col3 {margin-left: 23em;}
  22.  
  23. .coltopper {margin-top: -6.5em;}
Aug 30 '08 #1
2 1846
David Laakso
397 Expert 256MB
I think it's an "on having layout" [1] issue for IE/6 and IE/7.
The hasLayout trigger to bring it up in the IEs is to:
Expand|Select|Wrap|Line Numbers
  1. #lists{
  2. margin: 0;
  3. /* when background-color is removed from this section, the lists will be displayed correctly in IE ;*/
  4. background-color: white;
  5. zoom:1;<-------------------------- :: add this.
  6. }
  7.  
[1] on having layout
Aug 30 '08 #2
bsrcss
2
Thank you very much! The zoom took care of it.
Aug 30 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Rubble | last post: by
9 posts views Thread by Graham | last post: by
7 posts views Thread by =?Utf-8?B?TG9zdEluTUQ=?= | last post: by
2 posts views Thread by alex.williams56 | last post: by
6 posts views Thread by Johan | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.