This is my CSS for the custom style scroll-bar its works fine in chrome but not in Firefox browser.
how to make this CSS compatible in Firefox browser
<style>
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
height: 6px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius:10px;
}
</style>
Firefox scollbar style customization doesn’t work any more.
But you can try plugins that works in all browser.
Jscrollpane
Hesido
http://script-tutorials.com/custom-scrollbars-cross-browser-solution
http://manos.malihu.gr/jquery-custom-content-scroller
And also you can try below plugin only for firefox.
Noiascrollbars
hope this information helps you.
Related
I was trying this code below, it's working in all browsers include the IE browser, but the problem scrollbar was hidden in IPad and iPhone Devices & added CSS also for browser-specific still no luck !!!
Does anyone help how to solve this issue?
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
It is normal for scrollbars to be hidden on mobile devices. But you can force them to appear by overriding the styles of ::-webkit-scrollbar-* properties.
This answer in another Stack Overflow thread provides an example:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
I've achieved the desired design for the scrollbar using the following:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 8px;
background-color: #999;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
As it can be seen above the changes are of course not for Internet Explorer, where I could just do for the moment the following:
body {
-ms-scrollbar-base-color: #999;
-ms-scrollbar-track-color: #999;
-ms-scrollbar-face-color: #666;
-ms-scrollbar-arrow-color: #999;
}
I want to know if is possible to recreate the same design present on Chrome in IE. Below are printscreens with the scrollbar, first from Chrome, second from Internet Explorer.
Unfortunatelly there is no cross browser way to style scrollbar with CSS. But you can try next JavaScript custom scrollbar plugins (mostly jQuery): jQuery Scrollbar, jScrollPane, mCustomScrollbar, perfect-scrollbar, slimScroll, baron or NiceScroll. There are more custom scrollbars available, but they are less functional/well-known.
I have use this : http://jscrollpane.kelvinluck.com/ this work on IE and it is very easy to use :) Enjoy !
I have certain images which are placed in div's in the ul tag. I get scroll bar for more than 3 images. Any chance that i can apply styles to the scroll bar .
You can style scrollbar's of webkit browsers
The css: Applicable for Chrome and safari
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
Styling internet explorer which is a bit different :
body {
scrollbar-face-color: #b46868;
}
Mark that these will not work for non-webkit browsers. ex firefox
so, for non webkit browsers you need to use a jquery plugin.
For more help refer this site
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/
I have a site I'm working on using the Sinatra framework and I've uploaded it to Heroku. On Firefox, I'm able to see the page and all of it's contents but on Chrome the color for all text, borders, etc. is white. Why is it doing this and how do I fix it? Note that I'm also using Zurb foundation for the HTML framework and Sinatra for the backend.
Below is my CSS page.
/* LAYOUT */
/*========*/
.the-page {
-webkit-box-shadow: 4px 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
-moz-box-shadow: 4px 0 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
box-shadow: 4px 0 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
}
/* MISC */
/*======*/
.center {text-align: center;}
.brown {color: #653000;}
.green {color: #003218;}
a{color: #653000;}
a:hover {color: #003218;}
.size20 { font-size: 20px;}
/* Prevent MOZ border outline */
:focus {outline:none;}
::-moz-focus-inner {border:0;}
/* FOOTER */
/* ====== */
html, body {
height: 100%;
color: #653000;
}
.body-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -65px;
}
.footer, .push {
height: 65px;
}
.footer {
color: black;
}
I've tested with Chrome 24 here and looked at the applied CSS rules in the Developer Tools. By removing the row class from the <html> tag, I was able to see your website in Chrome.
The following rule appears to be the source of at least some of your trouble.
.row:before,.row:after{content:" ";display:table}
Chrome doesn't like the display:table rule applied to the <html> tag at all.
My new site is not been displayed how it should be in internet explorer, in some parts of the site internet explorer dose not seem to be reading the css at all!
here is the css that ie is not reading can someone tell me what is wrong with it? or what i need to change to make it work in ie.
#reg_area {
border: 2px solid #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 3px 3px #cccccc;
-webkit-box-shadow: 2px 3px 3px #cccccc;
background-color:#79af11;
background-image: -moz-linear-gradient(#b2d545,#79af11);
background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(0, #b2d545),color-stop(1, #79af11));
text-align:center;
height:35px;
padding:10px;
font-family: Tw_Cen_MT_Condensed;
color: #DAF7A4;
font-size: 25px;
text-shadow: 2px 2px 2px #2c4006;
}
#reg_area a:link {
font-family: Tw_Cen_MT_Condensed;
font-size: 45px;
color:#ffffff;
text-decoration:none;
}
#reg_area a:visited {
color:#ffffff;
}
#reg_area a:hover {
color:#D8F170;
}
Tw_Cen_MT_Condensed is not a web-safe font, hence won't be read.
You have your gradient set up as background-image, not background
Shadows don't work in IE
Your Box Radius and Gradients point to Webkit browsers and Firefox, not IE.
Have you even looked into how to make stuff work in IE? Hint: Try to search for workarounds and what is missing for each issue you have on IE.
Every line with -moz-
like -moz-border-radius: 15px;
will work only for mozilla (firefox)
It's probably the same with webkit.