[Solved] IE problem with floats? Maybe

[miker1961]

OK, I’m sure this is an easy fix but for the life of me I can’t seem to get what it is. This page is working fine on everything but IE browsers.

http://www.vitalmhealth.com/mobile-101/

If you view it in an IE browser, the content in the left hand column is being thrown down below the right hand image. I have tried clearing the float, but it still seems to throw everything below. Can someone take a look and let me know what I am doing wrong. I hate IE :-(

Thanks
Mike

[Quintin_S]

Unfortunately, I can’t have a look, since I don’t have a machine with IE on it with me at the moment. However, this post on NetTuts+ is always my first stop for problems: http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

[zackw]

ive tried in every version of ie down to 6 and cant seem to replicate the issue – either u fixed it or it doesn’t exist – if u still are having the problem please provide a screenshot

[Barspin]

Give the # wrapper a overflow:hidden;

[miker1961]

I tried the overflow:hidden on my #wrapper id, but no luck. Here is a screen shot of IE 7 and how it is rendering for me in this browser.

Thanks
Mike

[Bob]

I’m sure you can find you can find your answer here: https://css-tricks.com/all-about-floats/

[miker1961]

I just read this and I’m still not certain that the float is my problem. I will continue to research this but if anyone has any other ideas I would appreciate it.

Thanks
Mike

[Barspin]

I found a solution, give the wrapper the height of 876px.

And the presentation-img right: 0px; position: absolute;

[miker1961]

You are the man! Thanks a bunch that worked. How did you come to that conclusion? I would have never thought about going after the fix that way.

Mike

[Barspin]

Np m8, the wrapper and presentation-img gave the document in ie7 a width of 1380px so the only thing to do was to remove the presentation-img from the layout and make it independent

[miker1961]

That makes sense. I really wish IE made everyone’s life easier. Again, thx for the help.

[Author]

Posts