CODEWITHSUNDEEP
htmlcss
Bojan Rekovic
Bojan Rekovic

Reputation: 76

Center absolutely positioned element with unknown width in Internet Explorer 9

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/

Upvotes: 0

Views: 611

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

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.

Upvotes: 1

Related Questions