Forum Moderators: not2easy
OK, here is my problem: I have six divs in a container. They are all floated left. 3 fit in a row then the next 3 appear below. In firefox this all works out fine like this:
<html>
<style>
#content {
background-image: url(images/template/content_bg.gif);
margin: 140px 0px 0px;
padding: 0px;
height: 400px;
width: 540px;
background-color: #0000FF;
}
#stuff {
margin: 0px;
padding: 50px 45px 0px 40px;
background-color: #FFFF00;
}
#product {
background-image: url(images/product_bg.gif);
margin: 0px;
padding: 0px;
float: left;
height: 146px;
width: 146px;
text-align: center;
display: inline;
overflow: hidden;
background-color: #FF0000;
}
#product a {
background-image: url(images/product_bg.gif);
display: block;
margin: 0px;
padding: 0px;
height: 146px;
width: 146px;
text-decoration: none;
background-color: #FF0000;
}
#product a:hover {
background-position: 0px 146px;
}
#product img {
border: none;
padding: 0px;
margin-top: 25px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#product h4 {
font-size: 13px;
color: #666666;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#product p {
text-decoration: none;
margin: 0px;
padding: 0px;
}
hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0;
padding:0;
border:none;
visibility: hidden;
}
</style>
<div id="content">
<div id="stuff">
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£100</p></a></div>
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£100</p></a></div>
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£100</p></a></div>
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£1001</p></a></div>
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£1001</p></a></div>
<div id="product"><a href="#"><img src="images/test_product.gif" /><h4>Test Product</h4><p>£1001</p></a></div>
<hr class="cleaner" />
</div>
</div>
</html>
I've added some colours to this to hopefully make it easier to see my problem. So what happens is, in my IE anyway, the 3rd, 4th and 5th divs are lower than they should be - not sure why this is. Before I put the colours in I presumed this was the only problem. But also if you look the stuff div (the yellow one) is lower in IE and the top 3 product divs are outside of it.
So -it looks right in FF, but in IE the product divs go lower (as if there was a margin-top on them) and the stuff div goes lower as well.
Does anyone know what is going on here - hope i'm not being really stupid - but that is sometimes the way with these things.
Basically, instead of using your
<hr class="cleaner" />to clear your floated DIVS you can add the following to your #stuff element to effectively do the same (clear your floats):
#stuff {
....
overflow:hidden;
display:inline-block;/* Force hasLayout in IE */
} display:inline-block;is only reqd by IE to force hasLayout. You can use
width:100%;but that would mess up your current design.
You can also get the same effect by adding an additional clearing element before your floated elements as well as after it! Personally, I tend to favour using an empty DIV tag instead of an (invisible) HR tag, with the following CSS (seems to take up less 'space'):
[fixed].cleaner {
clear:both;
width:100%;
font-size:1px;
}
Hope that helps, but if anyone else can provide a better explanation I'd be very grateful too!
display:inline-block;is only required by IE6 in this case (the hasLayout issue). IE7 is OK without it and FF doesn't even support it. (Works OK in Opera 8 too.)
