IE7/CSS vs. Yet Another CSS Newbie. L'il Help?

September 6, 2007 8:35 AM

CSS filter: IE7 slides my slideshow ~150 pixels to the right, what gives?

I've got a slideshow installed on this page that I built from the tools available at Script.aculo.us, but the slideshow displays ~150 pixels too far to the right. Ideally it would all be contained in the light blue box.

Naturally, all is well with FireFox and Safari.

I'm still learning CSS, and I could use a little help.

The CSS file for this page is available here.

posted by Wild_Eep to computers & internet (11 comments total)

You need to run a serious of tests where you remove things until it works the same across browsers, e.g. maybe see what happens without the margins on the slideshow div, or remove the rest of the page and drop things back in gradually, etc. Unless it's a really obscure problem you'll soon track down what's bothering IE and find a slightly different way of doing things that'll work.
posted by malevolent at 9:48 AM on September 6, 2007

I wouldn't remove anything yet -- there's a number of major structural errors with that page: there are list items without a parent list, and the validator complains that it is unable to read the DTD. Fix validation errors first, then if it still doesn't render in IE7, you can start looking into IE-specific bugs. IE is often more sensitive to malformed HTML than FF and Safari are.

Validator here

I strongly recommend downloading and installing the Web Developer's toolbar and Firebug for firefox if you don't already have them. These two tools are indispensable.

Hmm. Yeah, I just loaded this in IE6, and I see the problem you are talking about. My first instinct is that there is bad markup on the 'two-column' picture sets. Are you hand-coding the markup that is delivered at that point?

Regardless, you should fix the errors that the validator has found. HTML errors often cascade down the page and cause other items to fail.
posted by ragaskar at 9:52 AM on September 6, 2007

Okay, I'm working through the validator. I'm nearly done, and I'll post back when I'm finished.
posted by Wild_Eep at 10:30 AM on September 6, 2007

Okay, I'm through the validator, both the html and the css are now valid.

I've been using the WebDev toolbar on FF/Mac, and I really like it. I just found out about Firebug last week. (I don't suppose there are similar tools for IE?)

Animation is still borked.

The markup that produces the slideshow is produced by a javascript that works fine on its own, but when inserted into the "middle" box, still acts like it is centered further to the right.
posted by Wild_Eep at 11:08 AM on September 6, 2007

In IE 6 at least, it's only the groups of three photos which are shifted over: when it's just one big photo it's displayed in the center where it belongs.

I'm not sure what that means.
posted by Tuwa at 11:10 AM on September 6, 2007

Yes, but even the 'grow' effect for the one-big-photo should start in the middle of the blue box, but appears to be starting from off to the right.

hmmmm.
posted by Wild_Eep at 12:12 PM on September 6, 2007

is there a reason you're using absolute positioning on the #left_box?
posted by ragaskar at 1:12 PM on September 6, 2007

nevermind. It looks like it's there to do layout for the right_box . Hmm. I suspect this might be part of your problem. Get rid of the js for now, and just show the left_box and right_box in that containing div (it'll be easier to troubleshoot without all that animation). After you get that right in IE, it should display fine once you add the animation back in.
posted by ragaskar at 1:16 PM on September 6, 2007

Okay, I've taken the animation out... and for clarity, I've added a background color to each box.
posted by Wild_Eep at 2:04 PM on September 6, 2007

looks like you got it, dude -- it's fine for me in IE6! congrats. what was it?
posted by ragaskar at 2:54 PM on September 6, 2007

The "middle" box was too wide... but all is not perfect.

The upper right and lower right image are jumping to the left when the 'left side' image rolls back up. Annoying. Probably something to do with the relative positioning.
posted by Wild_Eep at 8:50 PM on September 6, 2007