CODEWITHSUNDEEP
htmlcssfirefox
lemonyguac
lemonyguac

Reputation: 21

Firefox Scrollbar not showing up in DIV

I'm not sure what is messing it up in Firefox. I see the scrollbar in Chrome. But not in Firefox. Since webkit only effects Safari/Chrome, I am not sure what is interfering with the scrollbars not showing within the overflow:auto divs.

Since I know it should scroll if I click within the area, I am able to scroll...

HTML

<div class="memrow">
    <div class="meml">asdf</div>
    <div class="memm">
        <div class="memmc">
            <center>asdf</center>
            <a href="URL">asdf</a>
            asdf
        </div>    
    </div>
    <div class="memr">
        <div class="memrc">
            <a href="/">asdf</a>
        </div>
    </div>
</div>

CSS

.memrow {
    background-color: #3E0056;
    background-image: url('http://transmute.b1.jcink.com/uploads/transmute//statsbg.png');
    background-position: center bottom;
    background-size: 698px;
    border: 1px solid #f2f2f2;
    line-height: 100%;
    margin-bottom: 20px;
    padding: 10px 0px;
}

.meml, .memr, .memm {
    display: inline-block;
    vertical-align: middle;
    padding: 20px 15px;
    position: relative;
    width: 160px;
}

.memm {
    padding: 15px 85px;
    color: #fff;
    width: 125px;
    font-family: 'Montserrat';
    font-size: 8px;
}

.memm a {
    color: #fff;
    text-transform: uppercase;
    display: block;
    text-align: center;
}

.meml {
    font-family: 'Quantico';
    font-size: 20px;
    padding: 22px 15px;
    background-color: #f2f2f2;
}

.meml:after {
    content:"";
    position: absolute;
    right: -55px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 55px 0 0 55px;
    border-color: transparent transparent transparent #f2f2f2;
}

.memr {
    background-color: #f22b55;
    padding: 15px;
    padding-bottom: 16px;
    width: 183px;
    min-height: 25px;
}

.memr a {
    color: #3E0056;
    text-transform: uppercase;
    display: block;
}

.memr a:hover {
    color: #02FF97;
}

.memr:after {
    content: "";
    position: absolute;
    left: -55px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 55px 55px 0;
    border-color: transparent #f22b55 transparent transparent;
}

.memrc, .memmc {
    max-height: 25px;
    overflow: auto;
    line-height: 150%;
    padding-right: 5px;
    z-index: 50;
}

.memmc::-webkit-scrollbar,
.memrc::-webkit-scrollbar {
    width: 5px;
}

.memmc::-webkit-scrollbar-track,
.memrc::-webkit-scrollbar-track {
    background-color: rgba(62,0,86,0.5);
}

.memmc::-webkit-scrollbar-thumb,
.memrc::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 0px solid #F22B55;
}

Here is my JSfiddle: https://jsfiddle.net/885m9uuL/. At first I thought it was the z-index of another div but when I placed it in JSfiddle it seems to have the same issue.

Upvotes: 2

Views: 4434

Answers (2)

Saad Zahoor
Saad Zahoor

Reputation: 146

One possible solution is to remove this below line if you have it in your CSS

div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera 
}

I had an issue, my scroll bar was not showing, however it was scrolling. Turns out I had set the display: none in div::-webkit-scrollbar property.

Upvotes: 0

DileepNimantha
DileepNimantha

Reputation: 224

Setting overflow: scroll; would do the fix. This will show scrollbars even if they are not needed. overflow: auto; will tell the browser to decide to show or hide scrollbars, in your case Firefox doesn't show scrollbars but you can scroll.

Upvotes: 1

Related Questions