IE7 clear both float issue - Help Please!

howie2009

08-16-2010, 09:11 PM

Hi,
In IE7 the image called below aligns above the text instead of to the left of the text. I tried the .clearfix method but no luck. It aligns perfect in IE8 and FF. Any ideas please?

HTML:
<div class="colHeadWrapper">
<div id="img-mid-cols-1"></div><h2>Office Details</h2>
<div style="clear:both;"></div>
</div>

CSS:
div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
background-repeat:no-repeat; float:left;}

I tried:
<div class="colHeadWrapper">
<div id="img-mid-cols-1" class="clearfix"></div><h2>Office Details</h2>

</div>

with:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;} /* for IE/Mac */



but no joy.

THANKS

howie2009

08-16-2010, 09:33 PM

This is my colHeadWrapper class

div.colHeadWrapper{margin-left: 10px; min-height:46px;}

SB65

08-16-2010, 09:48 PM

The fact that it works in IE8 but not IE7, combined with the fact that .colHeadWrapper does not have hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) set suggests it might be a hasLayout issue. Try:

div.colHeadWrapper{margin-left: 10px; min-height:46px;height:1%}

This will set hasLayout on .colHeadWrapper.

If that doesn't fix the problem then a link to your page would help, or failing that your entire code.

howie2009

08-16-2010, 10:03 PM

Hi SB65,
I tried the below but no joy. Do i need to include clearfix or anything or remove
<div style="clear:both;"></div>? Thanks a million

Code I tried:
CSS
div.colHeadWrapper{margin-left: 10px; min-height:46px; height:1%}

HTML
<div class="colHeadWrapper">
<div id="img-mid-cols-1"></div><h2>Office Details</h2>
<div style="clear:both;"></div>
</div>

In IE7 it positons as:

img
text

but in IE8 and Firefox it aligns:
img text

THANKS

SB65

08-16-2010, 10:07 PM

Can you give a link to your page?

The clearfix class is clearing a float - which isn't your issue here.

howie2009

08-16-2010, 10:18 PM

Hi,
Unfortunately is only accessible via a CMS I'm using thats protected. Its a clients site so I cant post it. Clients! :(

It definitely seems to be an issue with:

div.colHeadWrapper{margin-left: 10px; min-height:46px;}

or

div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
background-repeat:no-repeat; float:left;}

i tried:

div.colHeadWrapper{margin-left: 10px; min-height:46px; height:1%;}

I'm testing using:
HTML
<div class="colHeadWrapper">
<div id="img-mid-cols-1"></div><h2>Office Details</h2>
<div style="clear:both;"></div>
</div>

Sorry I cant provide more.

SB65

08-16-2010, 10:22 PM

Ok, well, if I use this test code I don't see the problem in IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
background-repeat:no-repeat; float:left;}
div.colHeadWrapper{margin-left: 10px; min-height:46px;}
</style>
</head>

<body>
<div class="colHeadWrapper">
<div id="img-mid-cols-1"></div><h2>Office Details</h2>
<div style="clear:both;"></div>
</div>
</body>
</html>

Even without a doctype IE7 seems to behave itself on this one. Can you post your code?

howie2009

08-16-2010, 10:27 PM

I cant post the code as its a clients. I will try ur fix on another pc with ie7 on it. Thanks for ur help :thumbsup: Might be back 2moro!

SB65

08-16-2010, 10:29 PM

No problem - not much of a fix though as I haven't amended your code at all.