[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.


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


    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.


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


    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


    where the class clear is defined as

    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


    /”>< ?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?


    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed