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.

Attachments ie7screenshot.JPG 73.03 KB IE8Screenshot.JPG 93.52 KB
7 Years
Discussion Span
Last Post by drewpark88

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.