CSS IE6 with divs and floats bug

[methodmano]

I'm having some issues with my images showing up properly in IE6. They look fine in Safari & Firefox. Basically there is a container div and then individual divs that display an album cover along with a
description. In IE6, the images aren't in the divs, but are at the top. Anyone know what the fix is?


#container {
padding: 0px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background: #333;
border: 0px;
text-align:center;
width: 635px;
}

#center {
padding: 10px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background: #666;
border: 2px solid #000000;
text-align:left;
width: 610px;
}

#container p.album-cover {
float:left;
padding:0;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
}

#container .album-info {
... just font properties;
}

<?php loop through albums to display each one; ?> 
<div id="center"> 
   <p class="album-cover"> 
      <?php <a href="..."><img src="..." ></a> ?> 
   </p>        
        
   <p class="album-info"> 
      <?php ..description... ?> 
   </p> 
</div> 
?>

 

[Fukui]

Try using IE7.
Its a Javascript plug for IE that adds missing support.
Its also possible that IE is tripping over your CSS.
I remember somewhere that if the declarations are not in
a certain order, things don't show up correctly because the
later declarations are ignored...

You might do a google for IE CSS bugs for more help.

 

[methodmano]

IE7 did some weird things. It kind of fixed the IE6 view, but then broke the Safari/Firefox view. I'm going to stay away from that - too much in there for me to figure out how to control.

 

[Fukui]

IE7 did some weird things. It kind of fixed the IE6 view, but then broke the Safari/Firefox view. I'm going to stay away from that - too much in there for me to figure out how to control.

What you can do is do an IE only include in the </head> tag.

<!-- compliance patch for microsoft browsers --> <!--[if lt IE 7]>
<script src="J-Script/ie7-core.js" type="text/javascript"></script>
<link href="CSS/IE6.css" rel="stylesheet" type="text/css" /> 
<![endif]-->

Its basically hiding inside a comment, and only IE will notice it.
If you don't like IE7.js but you find the CSS thats at fault, you can
just include a fixed CSS file inside it here. That may be a better approach.

 

[rendezvouscp]

Alright, I don't know if any of these things will make a difference, but it's a shot:

A) Try this condensed CSS. It's the same as yours, only it makes use of some of the shortcuts in CSS.

#container {background: #333;
border: 0;
margin: 10px auto;
padding: 0;
text-align:center;
width: 635px} 

#center {background: #666;
border: 2px solid #000;
margin: 10px auto 0;
padding: 10px;
text-align: left; 
width: 610px} 

#container p.album-cover {float: left;
margin: 0 10px 0 0;
padding: 0} 

#container .album-info { 
... just font properties;
}

B) Try applying the p.classes to #center instead of #container.

C) Why do you have a ?> at the end of the code provided?

D) Make sure that container is an id instead of a class.

That's all I can think of, I hope it helps something. It'd be nice if we could see a test page, if it's possible.
-Chase

 

[methodmano]

I managed to fix this with a bit of re-ordering (as suggested). Thanks!!