CSS: Mozilla scrollbar pushes my elements (jsfiddle included)

Question

Please look at my jsfiddle in both chrome & in mozilla. It looks fine in chrome, but in mozilla the scrollbar pushes my li elements.

What can I do to get this working the same in both chrome & mozilla?

Here's the jsfiddle: http://jsfiddle.net/NR9TS/2/

css:

ul {
    width:164px;
    float:left;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:100px;
    list-style:none;
    margin:0px;
}
li {
    width:80px;
    height:80px;
    background-color:red;
    border:1px solid blue;
    margin:0px;
    float:left;
}

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Thank you in advance.

In chrome: chrome

In Mozilla: mozilla

I'm not sure I understand what the problem is, they both look the same to me — Lochemage, Jul 29 '13 at 22:48
Please look at my question again. I've included pictures @Lochemage — goo, Jul 29 '13 at 22:53
I am actually not getting your Chrome result, my Chrome looks just like FireFox in this case. — Lochemage, Jul 30 '13 at 16:56

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

Since different systems will render the scrollbars differently (say in the example that the user has a custom theme) you can not assume the width of the scrollbars. I would suggest looking at the answer to Getting scroll bar width using JavaScript (there's a fiddle for it too) and adding the result to your ul width.

Edit or if you want to use pure css, you could add a wrapping element to handle the scrollbar/overflow. Then set the overflow of the ul to hidden. BUT This will very slightly crop the image in the scrollbar side:

<!-- CSS -->
.outerWrap {
    overflow: hidden;
    overflow-y: scroll;
    width: 400px;
    height:50px; 
}
.outerWrap .innerWrap {
    width: 400px;
}
.outerWrap .innerWrap li {
    width: 198px;/* 2px less (one for each left and right border)*/
    background-color: red;
    border: solid 1px blue;
    list-style: none;
    float: left;
    height: 45px;
}

<!-- html -->
    <div class="outerWrap">
        <ul class="innerWrap">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

Thanks for the response.. Any way to work this out with pure css? I'm looking at pinterest's widget & somehow the scrollbar just goes over the boxes & not "squish" them — goo, Jul 30 '13 at 03:18

CSS: Mozilla scrollbar pushes my elements (jsfiddle included)

1 Answers1