This question is only about Firefox on Windows.
Here is the spec : The scrollbar should be hidden but scroll should be enabled.
On MacOS, the scrollbars will auto-hide and it is less jarring experience. However on Windows, the scroll bars just stay there and don't auto-hide. On Windows 10, the scrollbars are just too ugly and square.
Here are invalid answers or additional limitations:
Do not add margin/padding to the right/bottom as there is no good prediction of this value.
Do not use {overflow:hidden} as it would disable scrolling.
Here is as a CSS class that can be applied on all div/element that will have this behavior. These rules don't work as of now and the ugly scrollbar remains.
How would you fix this CSS class ??
.disable-scrollbars {
scrollbar-width: none; /* Newer Firefox and not confirmed */
overflow: -moz-scrollbars-none; /* Older Firefox*/
}
The experience should be similar to Chrome/Safari with -webkit-scrollbar:none; which works on both MacOS and Windows.
This cannot be solved only using CSS. The issue open against Firefox is under discussion for more than 6 years.
Here are the details : https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188
There is no solution to this problem until Firefox Devs allow scrollbar customization through what is termed as "CSS Scrollbar Modules".
Until then, Firefox on Windows will have ugly-thick-visible-grey scrollbars.
Related
I am facing one issue regarding horizontal scrollbar in IE.I want to decrease height of horizontal scrollbar. I have already customized it in Chrome but that style is not getting applied in IE.
CSS:
.scrollbar-style::-webkit-scrollbar {
height: 5px !important;
}
Can anybody please advise if they have worked on customizing scrollbar in IE?
It only work for webkit browsers.
In the documentation, It is mentioned that it is non standard.
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
It is not supported by Internet Explorer, So it is not working on it.
Reference:
scrollbar
::-webkit-scrollbar
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.
I have a stylesheet and use overflow:scroll; in my css to blend in scrollbars. It works in Firefox but not on my iPad in the safari browser. There, no scrollbars are shown but it is possible to scroll with two fingers.
Now, is that normal that iPad doesn't show scrollbars? That would be stupid somehow.
You might want to turn it on with: -webkit-overflow-scrolling: touch;
Yes, I believe that is normal behaviour from iOS3 and upwards.
You might want to check it on android, as android does not support overflow:scroll at all, from what I am aware (no two fingers, no scroll bar, no way to view content beyond the fold)
More information on iphone/ipad scrolling
The site is here. I've spent 3 days making it compatible with IE so I guess its time to ask for help.
Here are the three important major discrepancies between IE and other browsers such as Chrome, Firefox and Opera:
IE8 navigation buttons on the right most does not have a shadow (FIXED)
IE8, IE9 :active styles are not working; I'm informed that it will not work in IE7.
IE9 drop shadow for triangle not showing up (FIXED)
Please let me know any changes in css code that will help address these issues. I don't have plans to support IE 6.
#UrBestFriend: Changing position: relative to position: absolute for .nav_shadow {} fixes the issue for me in IE8.
To fix vertical-align: middle not working on .box_abilities p {} for me in IE7, I just added margin-top: 55px; to make it position more or less in the centre of the container.
I was having a small problem with center aligning a DIV in IE7 and 8. There are some minor height issues also, but ill cross that bridge when I get to it...
I have always used
middleAlign {
width:someAbsWidth;
margin-right:auto;
margin-left:auto;
position:relative;
}
to center my DIVS in all browsers, and it has worked fine. But now, I am having problems with this method in IE7 and 8. They do not center the div; rather it acts as if the margin-left is 0. Could it be other CSS rules affecting the margin display in IE?
I have uploaded the page to my server; the page is viewable here: http://drafts.thatcompdude.com/NewSite/
The page renders just fine in FF 3.6; Chrome 8.0.
Thank you;
--Dylan
Your page is in quirks mode because of the comment at the top. Remove it and it'll be standards mode and it'll start working.