CSS Help for IE 7/8

Question

I develop on Mac. I'm having trouble with my #slider div in IE 7/8.

Can you help me with the CSS? The #slider div (from what I can see on browsershots.org) fans out, rather than hiding the overflow...

http://ftp.crashboxcreative.com/ftp/EastsideBaptist/devSite/

Any help is appreciated.

(If this is a bad question, please don't downvote. Just vote to close!)

Answer 1

It looks fine for me on IE8

Answer 2

This is a known IE7 bug that kept be busy quite some time a while back.

This starts happening when you introduce position: relative to one of the elements inside of the container. This is fixed by adding position: relative; to the container itself, in your case

#slider {
  ..
  position: relative;
  ..
}

I started developing on a mac as well a year ago, It's a real pain when confronted with IE bugs. It helps if you setup a Remote Desktop Connection to a test PC if you have one and install IE Tester on it (mind though that IE Tester is not 100% the same thing so you should always do a final check on the real thing).

On a side note, Adobe has a really sexy browser screenshot test app at http://labs.adobe.com/technologies/browserlab/