I use this in my CSS:
text-shadow: 1px 1px 1px black;
Text on IE:
Text on Firefox:
and here Fiddle
How can I let it work on IE too? thanks.
USE MS-Filter..
p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
filter: glow(color=#0000ff,strength=3); /* IE */
//alternative
//filter: dropshadow(color=#ffff00,offX=5,offY=5);
}
Related
Here is my fiddle : SCROLLBAR
Run the fiddle in both Chrome and Firefox browsers, hit the "Toggle" button to see custom CSS not being applied for scroll bar in Firefox browser.
Is there a way I can display the custom scroll bar in all browsers?
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #c1bdbe;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #555D69;
}
Any help would be much appreciated.
Thank you.
Firefox doesn't support custom scrollbars yet so there's no way to do this in css.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
You have to use JavaScript to have global style on all browsers.
I tried to find with FireBug the proper CSS class responsible for the DataTable scrollbar appearance, but I couldn't find any reasonable css class. The table scrollbar is browser dependent - looks different in every browser. So how can I implement one scrollbar appearance for every browser?
You can achieve this by CSS, using WebKit. Actually PrimeFaces has some modifications done to the normal scrollbar in there CSS.
The scrollbar webkit are:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Some of these are implemented by PrimeFaces, so sometimes !important is needed.
Here's a quick example based on an article.
/* !important is needed sometimes */
::-webkit-scrollbar {
width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: rgba(255,0,0,0.8) !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4) !important;
}
Here's the outcome:
A small working example can be found on github and an online Demo.
Hope this helps.
This just work for IE
html {
scrollbar-base-color:#8C8CC6;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}
Hi in my code box shadow is not working properly for i-e 8
here is my css
.lt-ie9 .imageonHover:hover {
box-shadow:1px 1px 5px 5px #E7E0E7;
border-radius:3px;
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
}
.imageonHover:hover {
width:100%;
height:100%;
position: relative;
border-radius:3px;
box-shadow:1px 1px 5px 5px #E7E0E7;
-webkit-box-shadow:1px 1px 5px 5px #E7E0E7;
-moz-box-shadow:1px 1px 5px 5px #E7E0E7;
}
When i hover on div , the text is also showing shadow.On other browsers it is working fine but on ie 8 it is not working
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox:
I tried to find what was causing the dark border in Firefox without success.
Here is a jsfiddle and a running snippet demonstrating the problem:
.tooltip {
position:relative;z-index:1;
display:inline-block;padding-right:10px;
}
.tooltip .info {
position:absolute;left:100%;top:-7px;
display:block;padding:7px;border:1px solid #cccccc;
background:#fff;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
content: '';
position:absolute;top:0;left:100%;
display:block;
width:0;
height:0;
margin-left:-13px;
border:0 solid transparent;
border-right-color:#cccccc;
color:#ccc;
}
.tooltip .info:after {
content: '';
position:absolute;top:7px;left:-12px;z-index:10;
display:block;
width:0;
height:0;
border:transparent solid 6px;
border-right-color:#fff;
color:#ccc;
}
<a class="tooltip">Test for tooltip<span class="info">My tootip information</span></a>
This second demo demonstrates that background transparent is the root cause as replacing transparent by a color results in the same render in Chrome and Firefox.
2015's EDIT
Now it works by using both RGBa and transparent; appearently, the Bug has been resolved (maybe incidentally, because it is still in state NEW , instead that on FIXED).
If it still happens to you, you're probably running an old FireFox version (the current one is 38.0.5), and you can use the workaround in the answer to overcome the problem.
It is the
Bug 646053 - dark diagonals at corner joins adjacent to transparent borders
The workaround is to use RGBa instead of transparent:
/* old */
border: transparent solid 6px;
border-right-color: #fff;
/* new */
border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;
On my new site border-radius doesnt seem to be working.
I can see the border curving, but the background doesn't.
border-radius should work.
following works in IE 9
http://jsfiddle.net/Ec86p/3/
if supporting border-radius in IE7/IE8 is not a requirement then you should not include CSS3PIE as IE9 inclues support of border-radius css property.
edit:
i have updated your fiddle
http://jsfiddle.net/Zr8vE/3/
and changed following:
#main-menu li.first{
border-left:1px solid #feb800;
border-top-left-radius: 5px 5px;
-moz-border-top-left-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-moz-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
padding-left:10px;
}
edit : # 2
as soon as i removed following from ( #main-menu li )
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 );
it started working. ( I tried it in IE 9, orange background seems to be curving similar to border )
http://jsfiddle.net/Zr8vE/15/
in fact, it is not only the IE9, but also IE9 -.
you can either follow #Bert answer, or you can try CSS3PIE
the usage is just the same, but CSS3PIE provide more CSS3 features for IEs.
i think this is the solution you needed.
in your css apply this to the element that needs the rounded corner
#element{
behavior: url(border-radius.htc);
}
download and search it in google border-radius.htc and save it in your image folder or anywhere you like it is an image with curve and it is use to fix IE problem.
I will post my css for my main menu that works for me with rounded border.
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
Please try this.
here is the link http://jsfiddle.net/vZaJX/
Hope it helped.
Here is now the answer.
try to just edit the spacing of the words.
http://jsfiddle.net/ApYw4/
for IE 9 solution as i have told you
download this border-radius.htc and add to your css like this
#main-menu{
behavior: url(border-radius.htc);
//all css
}
Dont hesitate to correct me if anything wrong.