i am developing a website in simple html. I want to change the scroll bar design that shows default. Does any css for scroll bar to change color and other properties.
try out this
div
{
width:150px;
height:150px;
overflow:scroll;
}
Only webkit-based browsers (Google Chrome, Apple Safari, Opera) support scrollbar CSS customization. Firefox & IE do not support changing scrollbar design. To change scrollbar via CSS in all modern browsers, try to use custom scrollbar plugins, for example jQuery Scrollbar.
Related
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.
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 am trying to use a menu on my site. So I have prepared it, it works fine on Firefox, Chrome, Safari but not on IE. Here is the link to that little html, its a menu with li items. Any idea how to make it work on IE as well? Also afaik css gradient backgrounds should work on IE, but it does not :
I'm designing a navigation bar that HAS to run in IE Quirks mode (i.e. it can't have a DOCTYPE tag at the top). It also needs to work in Firefox and Safari (quirks mode for safari as well). My sample right now works in Safari and Firefox. (View source to see everything, css is in-lined).
My problem is that the border-right doesn't show up in IE! Any ideas?
Here is the working sample
Thanks!
I'm not suggesting this is the correct solution but if you remove the background color of rgb(255,255,255) of the #top-nav a style the bar becomes visible in IE - which I guess suggests the hyperlink (in IE's eyes) is overlapping the div border you have defined?
For nav use ul tag.
http://jsfiddle.net/bdVZ6/2/
We're having a problem with our website at www.tonerize.com, in regards to the blue menu at the top center of the page. In IE / Firefox / Most browsers, the menu displays correctly and has a background image.
However, in Webkit based browsers (Chrome, Safari, etc), the menu doesn't have a background and it seems like the padding is not being used. Is there any reason for this?
We figured this out. Webkit wasn't liking on of the tags in the CSS, which other browsers apparently ignored.