[Solved] Float Not Working Properly in IE7

[rph105]

Hey I’m new here on the forums but have been following Chris Coyier for sometime now, hope I can get some help :)

I’ve got a problem with a WordPress Blog I’m building at the moment, everything has been working fine for the most part in all browsers including Internet Explorer up until today. I added a Twitter plugin on my page, put it in my header and floated it to the left, which works fine in Safari, Firefox, Chrome, and Opera. It’s only until I open the page up into internet explorer that I get these HUGE gaps above and below my navigation. Very weird, pics below.

[img]http://img246.imageshack.us/img246/7594/firefoxfloatleft.jpg[/img]

Quote:

This is exactly how I want it to look – #tweet { float: left; } – Firefox 3.5 – #tweet { float: left; }

[img]http://img84.imageshack.us/img84/7854/ie7floatleft.jpg[/img]

Quote:

The exact same page as above in IE7, see the huge gap above my navigation? – IE7 – #tweet { float: left; }

Now if I take away the float left in the CSS it looks fine in Internet Explorer 7, but not so fine in the other browsers. Pics below.

[img]http://img16.imageshack.us/img16/603/ie7floatno.jpg[/img]

Quote:

Looks fine in Internet Explorer with no float… weird, no gaps between my navigation either – IE7 – NO FLOAT LEFT

[img]http://img524.imageshack.us/img524/3954/firefozfloatno.jpg[/img]

Quote:

But now it doesn’t look fine in Firefox and the other browsers, because no float is applied the Twitter status is now hiding behind the logo – Firefox 3.5 – NO FLOAT LEFT

I hope I haven’t made it too difficult for you to understand me, the page I’m having problems with can be viewed here http://ressoosnowdon.com/icestar/.

Any help would be much appreciated.

Thanks in advance!

[Sumeet Chawla]

have you tried clearing the float the way Chris taught in one of his tutorials?

try something like this. add this div just before your header ends i.e. </div> of the header div

Code:

where the class clear is defined as
.clear{
clear:both;
}

Sometimes not clearing the float creates loads of weird problems :P

[rph105]

"Sumeet Chawla" wrote:

Sometimes not clearing the float creates loads of weird problems :P

Hey Sumeet,

I’ve got the float cleared already, see below

Code:

/”>

For some reason it just doesn’t want to work in internet explorer, i’ve been trying to solve this problem for a decent three hours now :(

[Sumeet Chawla]

hmmm can you post the CSS used on those tags also?

[rph105]

"Sumeet Chawla" wrote:

hmmm can you post the CSS used on those tags also?

Sure!

Code:

h1#logo {
background: url(/icestar/images/logo.png) no-repeat;
text-indent: -9999px;
margin: 0 10px 26px 39px;
float: left;
width: 199px;
height: 78px;
}

#tweet {
width: 250px;
height: 62px;
float: left;
background: url(/icestar/images/tweet-bubble.png) no-repeat;
padding: 13px 20px 13px 39px;
margin-top: 5px;
}

.clear {
clear: both;
}

[rph105]

I think I just sorted it, I gave the header (#top-bar) a defined height and it seemed to fix the problem on IE.

Thanks a lot for all your help Sumeet, I’ve added you on Twitter too!

[Sumeet Chawla]

Ah great ! :) Sorry couldn’t reply last night.. I went off to sleep lol but anyway your problem solved now 8-) Admin sir please change the topic header to [SOLVED] :P

[Author]

Posts