IE7 and the float issue

Report · Apr 28, 2012

Greetings!

I have been over several websites and read much into the IE7 float issue, and fixing this issue has elded me...

If you have IE7, and maybe the web developer toolbar, head over to http://girlythingsonline.com/_2012pgs/accpage.html

Safari and Firefox do fine with this page, but IE7 displays the three dresses below and to the right of the brown menu image. The image is floated left. I've tried a zoom:1, min-widths in various places, floating the image right, changing the paddings... The two divs are assigned widths already, a bit shorter than the width of the mast container, but IE7 - arrgh!...

Any ideas?

Thanks!

Report · Apr 29, 2012

Hello WmChrisHoward,

Looks like the sidemenu and contentbox do equal the amount of the containing div: 880px. But the contentbox also has a padding left of 8px, making the final width on the contentbox 688px - so your 8px over the containing div, this should be where IE7 is having issues.

I was able to float the image in IE7 with developer tools by removing the margin-left on the contentbox and floating it left. You would also need to give the #bodyexpand div an overflow: hidden - or use a clearfix : http://css-tricks.com/snippets/css/clear-fix/.

But it looks like you'll need to make the dress image a little smaller and change the width of the #contentbox.

Let me know if this helps, or when you've changed your code and I'll take a look again.

Hope this helps,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

Report · Apr 29, 2012

Hi Chad,

Clearix actually does not work in IE 7 in pretty much all cases. You need to still use normal clearing. Some of the CSS for clearfix, IE7 does not undersand

Overflow hidden and clearing with the following element fixes IE7 floats that are not sorted after if there any issues like this.

Report · Apr 29, 2012

Thanks ,I'll give it a whirl...