Need some help with IE9 my main home slider is all messed up

HTML & CSS
1

Hello. My site is almost done and looks pretty good in everything except IE9 because the main slider on the homepage is for some reason shooting off to the right of the viewport…any ideas on how I can get this to work fine in IE9?

http://futsal.firsttracksmarketing.com/

Please help!

Thanks.

2

Try adding clear:both to the slider as it looks like its snagging on the logo.


#loopedSlider .container {
    clear: both;

}
3

Nope. That didn’t do it. Added it like you listed it and thought maybe you meant to post that as this

#loopedSlider .content {
clear:both;
}

because there is no container that matches what you suggested…but I think you are onto something with the logo…I have that set with a Z-index on the #header of 1 and then the slider container shifted up with a negative margin of -35px. Any other ideas with this additional info? IE is the only thing it doesn’t seem to work with…SURPRISE! :slight_smile:

Thanks.

4

quick update…when I removed the negative margin on the main slider it looked fine in IE9 but I really want to create that overlay look I have in the other browsers…any way to make it work for both?

5

Hi,

Sorry the code I gave you was a cut and paste from firebug but I must have copied the wrong section.

This is the code you need.


.business #loopedSlider  {
    clear: both;
}

It’s from custom css line 408.

The issue is exactly as I described and the element snags on the logo in some browsers due to the negative margin so you must clear the logo. (Its broken in Firefox also.)

If you want the slider to slide under the logo then add a negative bottom margin to #logo.

#logo{margin-bottom:-40px}

You can’t have a top margin on a cleared element that follows a float because the margin slides under the float so you need to do it the other way around and use a bottom margin on the floated element instead.:slight_smile:

6

That did the trick! Thanks so much! :slight_smile: