IE7 Align Left Issue...

[drewpark88]

Hey Guys,

I am having issues in ie7 and I am not sure why. I have attached two screenshots, one in ie7 (messed up) and one in ie8 (working). My images aren't floating properly next to my text in ie7....I have even created two classes "alignleft" and "alignright" which utilize margins. Check out my screenshots that are attached.

Oh and here is sample css code I am using:

alignleft, img.alignleft {float:left; margin:0 10px 5px 0}

It's weird, it works in all new major browsers.

[scrappedcola]

Is your text floated as well? If you could show your HTML for the image and the text (as well as the css for the text if any) you might get more help on the issue. In any case you might try either placing a div or <br> tag with style="clear:both" after floated elements. This sometimes clears up IE7's confusion with floated elements. Other soluctions include a class such as:

.clearfix {
    zoom: 1;     /* triggers hasLayout */
    } 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

to the containing element of the floated content. The class based solution is the one I find works better and I don't have to add extraneous html. For more info check out this blog http://www.positioniseverything.net/easyclearing.html

[drewpark88]

Nice. Thank you scrappedcola this helped a lot. It is working now : )