0

Okay, so I've been banging my head for hours and can't make this work in IE9 (I don't care about previous versions). I should mention I'm coding in HTML5 with HTLM5Shiv fallback for IE.

I'm making a Sequence.js responsive slider. The slider is full width because of the background image, but it has a content wrapper div with max-width of 940px and it's centered on the page.

            <div id="slider">
                <ul class="sequence-canvas">
                    <li>
                        <div class="slider-bg-img slide-1"></div> <!-- every slide has a different background image that has full 100% width -->
                        <div class="slider-wrapper">
                            CONTENTS GO HERE
                        </div
                    </li>
                    ...
                </ul>
            </div>

The #slider div has a width of 100% as well as all the #slider ul li elements. The li elements also have text-align property set to center.

#slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 500px;
}
#slider > .sequence-canvas {
    height: 100%;
    width: 100%;
}
#slider > .sequence-canvas > li {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
#slider > .sequence-canvas li > * {
    position: absolute;
}

Now the problem is with the div.slider-wrapper, I want it to have a maximum width of 940px - it doesn't have a defined width because it should be responsive on smaller devices and I don't want a thousand media queries. I also want it to be centered on the page. But Sequence.js slider (as you can see above) requires all first child elements of the li element to be absolutely positioned. I have managed to center this div in all browsers, but it just doesn't work in IE9 (even though I set 'text-align: center' on the parent div).

.slider-wrapper {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

Is there a solution for this in IE9? Here it is on JSFiddle: http://jsfiddle.net/Q5YYb/

2

1 Answer 1

1

What does work in IE9 is this fiddle.

It changes the styles of the div as follows:

.slider-wrapper {
    max-width: 300px;
    margin-left: -150px;
    left: 50%;
    right: 0;
    background: #999999;
}

Can you work with that? It does change the behaviour when the window is narrower than 300 pixels, but I'm not sure what you want to do in that case. Sorry.

1
  • Thank you. Not exactly what I wanted... the div needs to scale with the window, if I used this I would have to insert a lot of media queries to move the div back to center when it becomes smaller than the max-width. But your solution got me thinking, I'll see if I can make just one media query where I remove the alignment and make the width 100% wide when it's below the max-width... Jan 8, 2014 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.