Home » Computers » Internet Explorer 7 Float Bug
by
filosofo
on Jul 25, 2007

Internet Explorer 7 Float Bug

Today while developing a WordPress theme for a client, I ran into a vexing Internet Explorer 7 bug. Anyone who’s done any website design is familiar with Internet Explorer 6 (or earlier) wreaking havoc with standards-compliant work that looks good in, say, Firefox. But thankfully IE 7 has for the most part been a big improvement over its predecessor. That’s what made this bug so strange: it didn’t affect IE 6, just IE 7.

Internet Explorer 7 Float Bug

The first image shows a screenshot of the problem: the title of the post is drooping into the post. Usually when you see something like this, it means that the containing element has not been cleared. There are a number of ways to clear an element: a popular fix these days uses a pseudo class; the classic approach has been to put a cleared element within the same element as the floating element, but after it. Neither fix works for this bug.

Thankfully, I found a demonstration of a similar problem with IE 7. Apparently if the element containing the floating element has a set height or a maximum height, it confuses IE 7. According to the standard, a browser should obey the CSS height of the element (and IE 7 does—good job!—unlike IE 6). But every cleared element after the floater should be pushed down, not overlapped, by the floater.

The solution is to remove the height assignment from the container element, if you can. In my case, for another part of the site experiencing the same problem, I needed the element to have enough height to show a background image. The solution was to use the min-height property, which doesn’t trigger the bug.

The final image shows what it should look like, as rendered by Firefox.

Firefox does not have IE 7’s float bug
This entry was written by filosofo, posted on July 25, 2007 at 12:49 am, filed under Computers, Firefox, Internet, Web development and tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

20 Comments

  1. liz
    wrote on September 13, 2008 at 2:10 pm

    thank you so much for this! i was doing a website, and i couldn’t figure out why everything was so screwy in IE7 when supposedly everything was supposed to be BETTER in IE7… got rid of the width, and everything lines up perfectly, in BOTH browsers!

  2. Jesse Gardner
    wrote on December 9, 2008 at 11:51 pm

    Awesome… thanks so much for the help! Always nice when a friend provides a solution. :)

  3. Steve wrote on August 21, 2009 at 5:37 am

    Thanks for the information, really helped. I’d not come across this before so could not figure out what was going wrong!
    Good work.

  4. Rebecca
    wrote on April 21, 2010 at 3:36 pm

    Well, I had an issue like this. Two elements, both floated and one floated inside the other. Removing the height property did not help things though.I wonder if I am experiencing the same bug after all. Adding a clear property to either did not help either….

  5. doniking wrote on July 15, 2010 at 8:59 pm

    Thanks for the post! It helped me finding the problem. my last problem with browsers compatibility was with IE7, removing height did the trick.

  6. Marc Watts
    wrote on July 16, 2010 at 7:05 pm

    Yeah I always avoid putting heights on my elements. If you add the clear float fix to all block level elements except for the footer and p element it should automate everything for you. Check out my article I wrote on it clear float

  7. Aaron
    wrote on July 18, 2010 at 5:52 pm

    thanks so much for this, spent ages thinking I needed an updated version of the clearfix hack only to find I’d reused an element with a set height.

  8. Scarf*oo
    wrote on October 6, 2010 at 1:59 am

    I wasn’t aware of that bug, so thank you, this saved the day.

  9. Barbara
    wrote on October 13, 2010 at 6:05 am

    A huge thank you for this. With one change from “height” to “min-height” my WordPress page was converted from a total mess in IE7 to a beautiful thing. This has saved me HOURS of work.

  10. Stephen
    wrote on November 27, 2010 at 11:28 pm

    Well done! Thanks for sharing. And great job on your wordpress theme design.

  11. Internet Explorer 7
    wrote on February 25, 2011 at 3:25 pm

    That’s really more a problem with CSS. No browser in IE7′s time was able to support CSS5.

  12. tim wrote on March 14, 2011 at 12:43 pm

    i need some help how i stop my banner form floating to the right?

    @charset “utf-8″;
    /* CSS Document */

    :focus {
    outline: 0;
    }

    body {
    background: #222;
    margin: 0; padding: 0;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    }
    *{outline: none;}
    img {border: 0;}
    .container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
    display:inline;
    }
    .folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
    display:inline;
    }

    /*–Main Container–*/
    .main_view {
    float: left;
    position:relative;
    display:inline;

    }
    /*–Window/Masking Styles–*/
    .window {
    height:210px;
    width: 722px;
    overflow: hidden; /*–Hides anything outside of the set width/height–*/
    position: relative;

    }
    .image_reel {
    position: absolute;
    top: -1px;
    left: 2px;
    width: 3630px;
    display:inline;
    }
    .image_reel img {
    float:left;
    display:inline-block;
    }

    /*–Paging Styles–*/
    .paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*–Assures the paging stays on the top layer–*/
    text-align: center;
    line-height: 40px;
    background: url(menu-banner/paging_bg2.png) no-repeat;
    display: inline; /*–Hidden by default, will be later shown with jQuery–*/

    }
    .paging a {
    padding: 3px;
    text-decoration: none;
    color: #fff;
    }
    .paging a.active {
    font-weight: bold;
    background: #fa5400;
    border: 1px solid #04355a;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    }

    .floatbox {
    float: left;
    width: 500px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;
    }
    .paging a:hover {font-weight: bold;}

    .item {
    margin: 5px;
    padding: 10px;
    }

  13. Paulo
    wrote on October 22, 2011 at 8:08 am

    Thank you. I was trying to resolve that for hours

  14. Kyle Weaver wrote on November 4, 2011 at 10:19 am

    Fixed my ie7 float problem by adding a min-height property even though I did not have an explicit height set. Good stuff, thanks for the post.

  15. b_dubb wrote on January 25, 2012 at 11:24 pm

    my site works in every browser but IE 7. apparently IE 7 can’t handle my CSS. i’ve tried applying the fix discussed on this page but i’ve had no luck. i hope it’s okay if i post a link to the dev site ….

    http://www.ribitgreen.com/beta/contact.html

    any help would be appreciated

    b

  16. seo reseller
    wrote on April 23, 2012 at 12:42 am

    IE really has a lot of bugs and other browsing problems. Maybe Windows should make a way to minimize or eliminate these type of problems so users will never have to use other browser.

  17. satellite internet service
    wrote on May 14, 2012 at 8:20 am

    I really wana thank you for providing such informative and qualitative material so often and Your articles are very well written and unique.wireless satellite internet

  18. mike wrote on September 7, 2012 at 11:04 am

    Thank you for this! I spent a lot of time trying to figure this out until I read your post.

  19. William Brown
    wrote on December 19, 2012 at 3:55 am

    The solution was to use the min-height property, which doesn’t trigger the bug.

  20. wesley E batton
    wrote on March 15, 2013 at 3:53 am

    hey Filosofo,
    Internet Explorer 7 is not movable type due to decoupling from the windows shell with the IE7 Internet Explorer Upgration can solve the problem.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

23 Trackbacks