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

47 Comments

  1. 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. Awesome… thanks so much for the help! Always nice when a friend provides a solution. :)

  3. 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. 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. 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. 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. 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. I wasn’t aware of that bug, so thank you, this saved the day.

  9. 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. Well done! Thanks for sharing. And great job on your wordpress theme design.

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

  12. 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. Thank you. I was trying to resolve that for hours

  14. 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. 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. 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. 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. Thank you for this! I spent a lot of time trying to figure this out until I read your post.

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

  20. Eliminating the size residence did not help factors though. I wonder if I am suffering from the same bug after all. tree swings

  21. In my situation, for another aspect of the website suffering from the same issue, I required the factor to have enough size to demonstrate a qualifications picture. s4 wallpaper

  22. 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. Agen Togel

  23. 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. na dobry sen

  24. No content is comparable and admirable then this mentioned for the explanations, a must one to read for everyone and get assisted a lot. it support london

  25. This can get tedious if you have to upload a bunch of images. This plugin remembers your settings for the next time you upload. purchase anabolic steroids

  26. The first image shows a screenshot of the problem: the title of the post is drooping into the post. Usually when you see. cheapest flights

  27. Thanks for sharing your views. Great blog here.. It’s hard to find quality writing like yours these days. I really appreciate people like you. I would like to thank for the efforts you have put in writing this blog. eFormula Evolution

  28. We needed a plumber after our shower stopped working. credit card fraud lawyer

  29. I wonder if I am experiencing the same bug after all. Adding a clear property to either did not help either. Agen Judi

  30. The website joins you via released published written text, pick-up choices not iI just came upon your blog website site and preferred to say that I have really. shemale cams

  31. Below are some of the most striking names chosen in England and Wales in the most recent year on record. Certain styles, like “The Exalted,” look a lot like the American lists. seoveinte

  32. Good way of explaining, and good piece of writing to take information regarding
    my presentation focus, which i am going to present in school.

  33. Currently it appears like WordPress is the preferred blogging platform available
    right now. (from what I’ve read) Is that what you are using on your blog?

  34. After I initially left a comment I appear to have clicked the -Notify me
    when new comments are added- checkbox and now each time a comment is added
    I receive four emails with the exact same comment. Is there a means you can remove me from
    that service? Appreciate it!

  35. For most recent news you have to pay a quick visit internet and on world-wide-web I found this site as a best site for most up-to-date updates.

  36. Excellent items from you, man. I have be mindful your stuff previous to and
    you are simply too fantastic. I actually like what you’ve obtained here, really like what
    you’re stating and the way in which you assert it.
    You make it entertaining and you still care for to stay it sensible.
    I can’t wait to learn far more from you. That is really a wonderful
    website.

  37. I read this article completely concerning the difference of most recent and previous technologies, it’s awesome article.

  38. Hello, after reading this amazing post i am as well glad to share my experience here with colleagues.

  39. Hello there! This blog post couldn’t be written much better!
    Going through this post reminds me of my previous roommate!
    He always kept talking about this. I will forward this information to him.
    Fairly certain he’ll have a good read. Thank you for sharing!

  40. I actually like what you’ve obtained here, really like what
    you’re stating and the way in which you assert it.
    You make it entertaining and you still care for to stay it sensible.
    I can’t wait to learn far more from you.free turbo tax

  41. What’s up, I read your new stuff daily. Your writing style is awesome,
    keep doing what you’re doing!

  42. Hello There. I found your blog using msn. This is an extremely
    well written article. I’ll make sure to bookmark it and return to read more of your useful information.
    Thanks for the post. I’ll definitely return.

  43. 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. venus factor scams

  44. 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. Saran Wrap Weight Loss

  45. We didn’t used to have all these noisy events and intoxicated individuals strolling back and forth at all time of the evening screaming and stuttering.” Quick Move

  46. Oh my goodness! Awesome article dude! Thanks, However I am experiencing problems with your RSS.
    I don’t know the reason why I cannot subscribe to
    it. Is there anybody else having the same RSS issues? Anybody who knows the answer can you kindly respond?
    Thanks!!

  47. Informative article, totally what I was looking for.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

23 Trackbacks