Clearing issue(?) in IE 7

Pixelologist · 10-25-2011, 08:39 PM

I know just enough HTML/CSS to be dangerous, as the saying goes - so I'm hoping someone here can help a newbie figure out what seems clearly to be an IE issue.

I've just begun a job working with this site - www.risops.org. I know, I know...it's terribly exciting to look at. Here's the problem:

On the Announcements page and the Events & Education page, the main content is being being pushed down to just under the bottom of the sidebar menu. Only in IE7 and 8. I haven't had an opportunity to check the site in any other versions of IE but it renders just fine in Firefox, Chrome and Safari on Mac and Windows.

I can't figure out why. I thought it might have something to do with what appears to be an empty (except for an anchor link) div at the top of the main content area but taking that out - while keeping the anchor link - did nothing to fix the IE rendering.

Can anyone help me figure out why just those two pages give IE problems? If it helps, the code for the site is pretty extensively commented...

Thanks in advance, folks!

Neal

resdog · 10-25-2011, 08:59 PM

Your problem is the use of margins and padding. Since you are floating the sidebar, you don't need to have the margin-left for the #mainContent. Removing the margin-left will bring it to be to the right of the sidebar. Or, you can shrink the margin-left to 230px, which will also fix it.

Excavator · 10-25-2011, 09:12 PM

Hello Pixelologist,
I've used this same method many times, floating the sidebar and margining the content over.
The actual problem here is what you put in #mainContent. On your Announcments page the table that holds your links is too wide. I did not look at the other page to see what is too wide there.

You could reduce that 25px right margin to accomodate the wider table, it may be fine to set that to 0 even.

See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Pixelologist · 10-26-2011, 06:00 PM

Thanks for the feedback. Not only am I pretty new to coding, in general, but I'm getting tossed onto sites that are to a greater or lesser degree messy enough in their code that even I can see they're insane. I just can't easily figure out how to fix 'em (for many of them it'd be easier just to start from scratch but I'll need to convince folks of this).

So, thanks! I'll try these out this afternoon.

Cheers!