...

View Full Version : Resolved CSS margin problem only in IE7



mike182uk
02-14-2009, 06:08 PM
hi there i have been playing around with some css and for some reason i can get it to render exactly how i want in all browsers but IE7.

the problem is: in IE7 the margin-bottom of the divs with the class .item-container does not render at 5px like all the other browsers (firefox,opera,safari).

heres my code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

#wrapper {
background-color: #CCCCCC;
max-width: 520px;
padding: 5px;
float: left;


}
.item-container {
background: #E0E0E0;
float: left;
text-align: center;
margin: 5px;


}
.item-container div {
padding: 10px;

}
.item-container p {
margin: 0px;
padding: 0px;
font-weight: bold;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.item-container img {
height: 100px;
width: 100px;
margin-bottom: 5px;
display: block;
background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div class="item-container">
<div id="item1"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item2"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item3"> <img name="" src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item4"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item5"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item6"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item7"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item8"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item9"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item10"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item11"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item12"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
</div>
</body>
</html>


any ideas?

PitbullMean
02-14-2009, 06:33 PM
I can fix this im working on it right now.

PitbullMean
02-14-2009, 06:53 PM
Alright heres the fix bud:

Put this in the head of your HTML;


<link href="test.css" rel="stylesheet" type="text/css">

<!--[if IE]>
<style type="text/css">
#wrapper {
padding-bottom: 10px;
}

</style>
<![endif]-->

Then make a CSS file and put this in it.


#wrapper {
background-color: #CCCCCC;
max-width: 520px;
padding: 5px;
float: left;


}
.item-container {
background: #E0E0E0;
float: left;
text-align: center;
margin: 5px;


}
.item-container div {
padding: 10px;

}
.item-container p {
margin: 0px;
padding: 0px;
font-weight: bold;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.item-container img {
height: 100px;
width: 100px;
margin-bottom: 5px;
display: block;
background-color: #CCCCCC;
}



I named it test for an example like in the first set of code states but, you can name it anything you want. just be sure to re edit the name in the html file.

Excavator
02-14-2009, 07:27 PM
Hello mike182uk,
I'm not seeing the 5px problem here. Looks the same in IE8, IE7 and FF3 except for your floated #wrapper moving around a bit.
Got rid of that float, zero'd out default margins, cleared your floats, validated... That's about it: http://nopeople.com/test/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #FC6;
font: bold 12px Arial, Helvetica, sans-serif;
}
* { /*zeros default margin/padding*/
margin: 0;
padding: 0;
border: none;
}
#wrapper {
background-color: #CCCCCC;
max-width: 520px;
padding: 5px;
overflow: auto; /*clears the floats*/
}
.item-container {
background: #E0E0E0;
float: left;
text-align: center;
margin: 5px;
}
.item-container div {
padding: 10px;
}
.item-container img {
height: 100px;
width: 100px;
margin-bottom: 5px;
display: block;
background: #CCCCCC;
}
#item1{
background: #fff; /*just for testing*/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="item-container">
<div id="item1"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item2"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item3"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item4"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item5"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item6"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item7"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item8"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item9"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item10"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item11"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
<div class="item-container">
<div id="item12"> <img src="" alt="" />
<p>item description</p>
</div>
</div>
</div>
</body>
</html>

I don't have IE6 available right now... that code may have (probably has?) the IE6 double-margin bug (http://www.positioniseverything.net/explorer/floatIndent.html).

Read about clearing floats like that here (http://www.quirksmode.org/css/clearing.html).


I have a similar example of thumbnails with a caption. This snippet will center the thumbs in any sized div, line-breaking when there are enough to fill the width and centering the next line after the break. Have a look at the demo at http://nopeople.com/CSS/thumbnail%20presentation/index.html

PitbullMean
02-14-2009, 07:46 PM
I tried your fix Excavator and the problem is still there in IE7. Mike try my fix that should get u going.

Excavator
02-14-2009, 08:01 PM
Nope. Not seeing it here.

note - IE6 is going to botch that min-width horribly.

Fisher
02-14-2009, 08:25 PM
The OP's original code looks identical to me with F3 and IE6 if you include 2 changes:

#wrapper {
background-color: #CCCCCC;
width: expression(document.body.clientWidth < 518? "520px" : document.body.clientWidth > 522? "520px" : "auto");
min-width: 520px;
max-width: 520px;
padding: 5px;
float: left;
}


.item-container {
background: #E0E0E0;
float: left;
text-align: center;
margin: 5px;
display:inline;
}

The first fixes the max-width for IE6. The second prevents the double float added in IE6.

mike182uk
02-14-2009, 08:50 PM
hey pitbullMean thanks for the workaround, that does exactly what i want, but i dont like the idea of specifically filtering one browser. even though i may have too, i was trying to look for a pure css workaround that is cross browser compatible.

excavator, there is definately a problem in IE7, ive tested in every browser and this is the only browser causing the problem. im using the latest version of opera,safari,chrome and firefox.

the wrapper provides 5px of padding around the whole div. then the margins of the item-container divs provide another 5px. so there should be 10px space around the item-container divs. on the bottom item-containers the margin-bottom is not being applied. if you remove the padding from the wrapper you'll see what i mean (there will be 5px of space between the item-containers and the wrapper except for the bottom).

ive noticed that no matter how much margin-bottom i add to the bottom item-containers the wrapper never resizes to accomodate for the extra space, although when i add extra margin-top to the item-containers the wrapper will resize to accomodate the extra space.

im using dreamweaver and when i do a browser compatibility test it does come up saying i have a doubled float margin bug that affects IE6.

Excavator
02-15-2009, 12:13 AM
Yes, I see it now.
Seems like it's a known problem - http://www.google.com/search?hl=en&q=ie7+bottom+margin


Maybe you could just not float your image containers, like this: http://nopeople.com/test/

mike182uk
02-15-2009, 01:42 PM
hey everyone thanks for the replys.

well after playing around with this, i can only find 2 fixes. both i dont really like, and these are without recoding my css or changing my markup (which i dont really want to do).

first one is what pitbullMean suggested:



<!--[if IE]>
<style type="text/css">
#wrapper {
padding-bottom: 10px;
}

</style>
<![endif]-->


and the second one is:




css:
#clearLeft {
clear: left;
}


html:
<div id="clearLeft"></div>


if i add an extra empty div (or any element i guess) after the last item container and in css tell it to clear left, it does the job nicely without messing it up in other browsers.

i dont like the 1st fix because i dont want to have to code for specific browsers.

i dont like the second fix because it goes againest the concept of semantic markup as im just chucking in elements to fix browser faults.

which would you use? or would you suggest i just recode it like excavators: http://nopeople.com/test/

Excavator
02-15-2009, 08:35 PM
i dont like the second fix because it goes againest the concept of semantic markup as im just chucking in elements to fix browser faults.

We used to see clearing divs all the time. It does seem an old method, not as bad as tables but close?
Actually, it addresses your IE7 issue without affecting your code or other browsers.

...not bad :thumbsup:

mike182uk
02-15-2009, 11:30 PM
thanx for all your help on this :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum