• Client-side
    • Add Me!Close Menu Navigation
    Add Me!Open Categories Menu
  • Client-side

    • Prevent broken floats in IE7 and lower

    Ever experienced a float dropping to the next line ine IE7, without any good reason? Read on to discover how to prevent this behavior.

    In my specific case I needed to float an image of a close button to the right top end of a <div>.

    I had to add the image through some JavaScript, and I used the jQuery append() function to pull it off. But whatever I tried, the image always ended up one line lower in IE7 compared to the other browsers. Apparently IE7 doesn’t handle floats properly in terms of positioning, when they are not the first child of the parent item. So updating the JavaScript to use the jQuery prepend() function did the magic.

    So remember that the following will give you issues in IE7 … 

    <div id="parentItem">
  <span>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.</span>
  <img style="float:right;" src="close.png" />
</div>

    … while the following will do a splendid job in all browsers:

    <div id="parentItem">
  <img style="float:right;" src="close.png" />
  <span>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.</span>
</div>

    Hope this will salvage some of the hair on your head. And no, I’m not the religious type of guy, but I love the Samuel L Ipsum generator.

    Posted By Shahways Romani

    Developer working on both the front & back-end side of the web. Consulting attitude, with an eye for marketing. Loves fresh coffee, and a good game of poker.

    Leave a Reply