Troubleshooting: How the Mozilla scrollbar is affecting the positioning of my elements (with jsfiddle

Question

Troubleshooting: How the Mozilla scrollbar is affecting the positioning of my elements (with jsfiddle

I need assistance with my code on both Chrome and Mozilla browsers. The layout looks perfect in Chrome, but in Mozilla, the scrollbar is affecting the positioning of my list elements.

Could someone please help me figure out how to make it consistent across both browsers?

Here is the link to 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.

Chrome View:

Firefox View:

css google-chrome webkit mozilla

Answer 1

Answer №1

Given that various systems may display scrollbars differently (especially if the user has a custom theme), it's not safe to assume the width of the scrollbars. One suggestion is to refer to the solution provided in this stackoverflow post on Getting scroll bar width using JavaScript (there's even a fiddle available) and incorporate the result into the width of your ul element.

Alternatively, if you prefer using pure css, you could create a wrap element to manage the scrollbar/overflow. Then, set the ul's overflow to hidden. However, please note that this method may slightly cut off the image on 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>

Answer 2

Given that various systems may display scrollbars differently (especially if the user has a custom theme), it's not safe to assume the width of the scrollbars. One suggestion is to refer to the solution provided in this stackoverflow post on Getting scroll bar width using JavaScript (there's even a fiddle available) and incorporate the result into the width of your ul element.

Alternatively, if you prefer using pure css, you could create a wrap element to manage the scrollbar/overflow. Then, set the ul's overflow to hidden. However, please note that this method may slightly cut off the image on 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>

Troubleshooting: How the Mozilla scrollbar is affecting the positioning of my elements (with jsfiddle

Answer №1

Similar questions

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

What could be causing my media query to not function properly?

Can a screenshot of a YouTube video be printed exactly as it appears on a website?

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

Is it possible to showcase D3 charts on an .epub file?

Renaming file names for Bootstrap 4.5 demonstrations

Updating the color of text when clicking on a link using javascript

Creating resizable SVG elements using HTML or CSS for dynamic width and height

Ensure the central alignment of the focused item within the horizontal scroll

Make sure a div is displayed on top of any content currently in fullscreen mode

How come the div element is not rendering the CSS styles?

a div sandwiched between two others

The content is overflowing outside the boundaries of the div, yet there is no

The CSS background-image and background-color do not load on IE8

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Scrolling up the page following the addition of a new row

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image