I want to use the same scroll bar as I have implemented in safari and chrome but I am unable to see it on Firefox Browser.
How can I do this? I have referred this question of Firefox bug
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
but was unable to trace what is wrong with my CSS, Please suggest me a way to do it.
What I have done for safari and Chrome is as follows :
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
Thanks a lot for your helps.
You are only using the webkit rendering engine (Chrome and Safari)
Sadly though currently there is no -webkit-scrollbar for the -moz rendering engine.
Hope this helps
Difference between rendering engines
Custom CSS Scrollbar
Cheers,
Demetry
Related
Im having some issues with how the content on a website im designing is appearing.
The content was originally designed and working normally in chrome but when I open the site in firefox or chrome on android i get the following issue.
Screenshot in Chrome
Screenshot in Firefox
The site is being rendered exactly the same through the inputs have a black background and the main div appears to have a shadow over it.
If anyone has had a similar issue that they have been able to solve Id greatly appreciate it.
Looks like Firefox adds automatically a red border for :required fields.
If you want to override this behavior you can do:
input:required {
box-shadow: inherit;
}
I ended up doing
input:required {
box-shadow: inherit;
}
input:focus {
box-shadow: 0px 0px 2px 2px #7AA6ff;
}
to have a normalized behavior cross-browser.
I'm finding that Firefox (44.0.2) is rendering the box-shadow CSS very faint / light.
If you compare the difference between Chrome and Firefox it looks a lot lighter in Firefox.
https://jsfiddle.net/8db8zr6q/
I was wondering if anyone has come across this problem before and if there is anything that can be done to fix the issue?
Current code:
.shadow {
height: 400px;
-webkit-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
-moz-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
}
Image of issue:
I had this issue and after long research i found no straight answer so the work around hack is used was to target the -moz-box-shadow prefix by playing around with the values till i got the shade I wanted ,when developing websites i found firefox renders certain things way differently than what you intend
I am looking at a fix for a website - I have applied a box-shadow to a div. This renders perfectly in:
Safari, Firefox, Chrome.
The SAME CSS renders perfectly in IE when displayed via ASP.NET razor views.
The CSS that works in the above .NET, doesn't render via Umbraco.
I am using a separate stylesheet for IE (8.0+) and using:
box-shadow: 5px 5px 0px #000
in the main stylesheet (for all other browsers) I am using:
box-shadow: 0px 40px 100px 2px #000;
neither work for IE and I am stumped now.
IE makes me want to drink bleach - anybody have any ideas where I am going wrong?
Thank you in advance!
This does indeed have to do with IE compatibility. Remove this line from your html:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The line above forces newer versions of Internet Explorer to render the page as IE8 would, by default. See MSDN's Specifying legacy document modes for more details.
I'm guessing the link to your css is relative or something, it's got absolutely nothing to do with umbraco - you have full control over the html. Perhaps paste a link to your website or your html code.
also for cross browser drop shadows you need something like this
-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
I have a custom scroll bar accomplished by the code as shown here:
::selection {
background: #333;
color: #FFF;
}
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
}
It works fine on Chrome, Firefox... but Internet Explorer it does not work
What should I add?
The CSS specified will only apply a custom scrollbar on a webkit browser such as Chrome and Safari. Internet Explorer only supports a limited amount of scrollbar customisation. See the MSDN reference and this IE scrollbar CSS generator.
Also, Firefox doesn't support custom scrollbars (bug report), so I'm not sure how your CSS is working in Firefox - it isn't for me.
If you want, you can use JavaScript-based jScrollPane to implement custom scrollbars in all browsers, but be warned, many people hate the user experience on JavaScript scrollbars, myself included.
css shadows are fine with firefox and chrome but not showing on Internet Explorer
I used following code
-moz-box-shadow: 0 0 20px #000;
Can someone suggest me a solution for this
Thank You!
-moz-box-shadow: 0 0 20px #000; is only for FireFox.
You can use box-shadow: 0 0 20px #000;
IE < 9 needs some help. You need something like this
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20)";
zoom: 1;
You'll have to play with the values.
All together it could be
.something{
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20)"; zoom: 1;
}
If you're talking about IE versions < 9, then you'll need to use a poly-fill like CSS3PIE.
Otherwise, be sure to use the non-vendor prefixed rule (no -moz or -webkit in front of the rule) after you've included the vendor -prefixed versions.
-moz-box-shadow only works in FF and Chrome. In Internet Explorer you have to use box-shadow.
They can be used together:
-moz-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20x #000;
You can use --ms-box-shadow,
or try just using just plain box-shadow.
Also, it will only work in IE v9
Thats CSS3, which is not supported in any IE browser under 9, because IE is traditionally a substandard browser. So unless you are in IE9, or 10 (somehow), you are out of luck