IE7 Jquery Position: Relative

Question

I'm using a plugin that needs position:relative to animate the li items within a UL.

Here's a demo: http://jsfiddle.net/bleachie/aJPRp/

In IE7 overflow:hidden doesn't work but works if position:relative is removed from the UL; the plugin doesn't work then.

How would I fix this issue in IE7?.

Thanks.

CSS

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jSlots-wrapper {
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

.slot {
    float: left;
}

HTML

<ul class="slot">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<input type="button" id="playNormal" value="play">

Javascript

 $('.slot').jSlots({
     spinner : '#playNormal',
     winnerNumber : 7
 });

Don't use links to personal sites. When you update your page later the link will become useless to people who view this question in the future. Please post the code or put it into a jsfiddle. — Ryan Lynch, May 28 '12 at 15:29
@RyanLynch: Better advice would be: always post the code and post to JSFiddle if possible. — Andrew Whitaker, May 28 '12 at 15:37

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

A quick search turned up this question and answer. Basically, for overflow hidden to work with relatively positioned children in IE6/IE7, you need to position the container relatively as well. So in this case:

.jSlots-wrapper {
    position: relative;
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

edited May 23 '17 at 12:27

Community

1
1

answered May 28 '12 at 15:55

Ryan Lynch

7,676
1
24
33

Can't believe I didn't try this before!. Thank you. – user1381806 May 28 '12 at 16:15

IE7 Jquery Position: Relative

1 Answers1