Grow your CSS skills. Land your dream job.

[Solved] Float Not Working Properly in IE7

  • # September 20, 2009 at 4:54 pm

    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!

    # September 20, 2009 at 5:36 pm

    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

    # September 20, 2009 at 6:09 pm
    "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:

    /”>< ?php bloginfo('name'); ?>

    < ?php twitter_messages("realph"); ?>

    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 :(

    # September 20, 2009 at 6:22 pm

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

    # September 20, 2009 at 6:29 pm
    "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;
    }

    # September 20, 2009 at 6:53 pm

    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!

    # September 21, 2009 at 1:50 am

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".