I've styled some list items (li) using CSS. The style's applied to the a selector within the li. It works great in Chrome, IE and Safari but not Firefox:
<ul class="organisations">
<li class="community-care"><a href="http://adviceglos.org.uk/organisation-type/community-care/" title="View all posts in Community Care" >Community Care</a></li>
</ul>
Here's the CSS:
ul.organisations li.community-care a {
background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#5CBCC4),color-stop(100%,#38939B));
background-image: -webkit-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -moz-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -o-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -ms-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: linear-gradient(#5CBCC4 0,#38939B 100%);
background-color: #5CBCC4;
border: 1px solid #318188;
border-bottom-color: #245E63;
}
You have a syntax error in your stylesheet. In particular, line 529 is:
background-image: -o-linear-gradient((#eeeeee 0,#ccc 100%) !important;
Note that you have one more open paren than close paren. In a spec-compliant CSS parser (which excludes WebKit), this causes the UA to treat everything up to the matching close paren as part of the background-image value. In this case, that's all the rest of the stylesheet, so all the rules after this point are ignored.
Further note that Firefox did report this problem in its error console, which is how I found it...
Apply -moz for firefox like this:
background: -moz-linear-gradient(#BF698C 0px, #93506D 100%) repeat scroll 0 0 transparent;
Related
I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:
(I guess that's IE 11, not IE 10. Thanks for the correction!)
I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at https://jsfiddle.net/tgbuxkee/
It's also generated below too.
div {
width: 200px;
height: 200px;
border: 6px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
Does anybody have any idea why this could be happening? I know there is a bug with some image borders in Safari but I don't think that is the case here (maybe it is).
And guidance is helpful.
Thank you.
I have run into this issue in the past and remember reading somewhere on the web that avoiding the border-color: transparent setting would solve the problem. I don't remember where I read about it.
It seems like Safari 10 on Mac gives preference to the transparent border color over the border image and so displays nothing. Just setting the border-width and border-style alone would solve it. This solution works on other supported browsers also.
Tested on Chrome v56 (dev), Safari 10 (Mac), Safari 5 (Windows), Safari (iOS), IE11, Edge, Firefox 47.0.1, Opera 41.
Note: You've quoted IE10 in the question but as far as I know border-image doesn't work in it and so the given solution also doesn't.
div {
width: 200px;
height: 200px;
border-width: 6px;
border-style: solid;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}
<div>
</div>
The following may be helpful supplemental information. The accepted answer is still true for Safari 11 (as of posting), but for the record, I have also found that with, border-image:url, Safari(v11) will accept the shorthand border, with transparent, if you list the -webkit- vendor prefix last, like this:
div {
border:1px solid transparent;
border-image:url([some-border-image]) 1 0 1 repeat;
-webkit-border-image:url([some-border-image]) 1 0 1 repeat;
}
Since it is non-standard to list the vendor prefix last, I prefer the accepted answer as most web standards friendly.
i have a div with a background image <div id='mcts1'></div>
now when i view it in chrome, the image does not show, and when press F12 [inspect element], this is what i see:
<div id="mcts1" style="background-image: none;">......
</div>
now i'm wondering how did it happened that the background-image property was set to none when i actually declared it in the css.
here is the css file together with the code snippet where i echoed the <div id="mcts1">fiddler file here:
link
Try changing your CSS starting on line 311 to this:
.navigator{
background: #efefef url(../images/nav.png);
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%) url(../images/nav.png);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%) url(../images/nav.png);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%) url(../images/nav.png);
}
I think this might be coming somewhere from js or jquery..
For this project, I am using Tomcat 7 and have configured it to serve htc with content type of text/x-component
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
...
<mime-mapping>
<extension>htc</extension>
<mime-type>text/x-component</mime-type>
</mime-mapping>
</web-app>
For some reason, it works in IE9 (gradients, drop shadows, rounded corners) but not in IE8, dont see any CSS3 in effect at all. In the developer console under styles/tracxe styles, I see behavior but I don't see anything like -pie-background for example. Is that a problem?
What might be the cause, it seems wierd that it works in IE9 but not IE8. I don't suppose I need different setup or anything like that? CSS of 1 element:
#masthead {
background: #0E0E0E;
background: #0e0e0e;
background: -moz-linear-gradient(center top, #7d7d7d 0%, #0e0e0e 100%);
background: -webkit-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: -o-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
-pie-background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
behavior: url(/owmw/web/css/PIE.htc);
height: 35px;
border: 1px solid #000000;
color: #FFFFFF;
position: relative;
text-align: center;
margin: 0px auto;
}
I am using IE10 in IE8 compatibility mode, does it matter?
I too faced the same issue and following was the reason for my problem:
I used a wrong positioning for my DIV element.
I was targeting the wrong path in behavior.
From your code, the problem seems to be in targeting the wrong path.
behavior: url(/owmw/web/css/PIE.htc);
FIX:
Instead try to refer the PIE.htc file in css folder and make it look like behavior: url(PIE.htc);
or
use behavior: url(owmw/web/css/PIE.htc);
Check out behavior property.
I might be wrong, but this solved my issue.
Even I tried using behavior: url(../owmw/web/css/PIE.htc); but not worked.
From your comments, it seems you're using X-UA-Compatible as a fix and it works only through IE10 compatibility mode.
!-- Force IE to use the latest version of its rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
By telling IE to use the latest version of its rendering engine in your page.
Incase if your user opens in IE8 browser? This will certainly fails.
You can check this in MSDN Library.
Hope you understand.
My tables are causing problems in IE8. I cannot get the dividing borders in the table header to appear above the gradient (except for in one spot, which you can see in the image below). The borders appear fine in every other browser and even in IE8 Compatibility Mode. Any ideas on how to fix this? Here is a test site for everyone to see the applied code.
Here is the table header's CSS, but you can view the entire CSS file here:
.gridview th {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTM4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhmZDlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: -webkit-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -moz-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -o-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -ms-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: linear-gradient(90deg, #005383 0%, #90d9ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383)";
background-color: #005383;
line-height: 18px;
vertical-align: top;
padding: 4px;
font-weight: bold;
text-align: center;
border-left: 1px solid #005580;
color: #fff;
}
I tried solving your problem but but could not. I see that this occurs in both IE8 and IE9 doc and browser mode. Not in IE 7 however. But when using only
background-image: url(data:image/.......);
the borders work in IE9...that only leaves IE 8 to solve. You can use IE7 and IE9 specific conditional commentsa to use above code(for IE9) and the
filter: progid:DXImageTransform.Microsoft
for IE7.
With regard to the problem in IE8, here is a similar post:
Table cell loses border when css gradient filter is applied in IE8
I found a fix, but I'm not very happy with it since it isn't valid HTML anymore...but this seems to fix the problem in older versions of IE:
<!--[if !IE]> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <![endif]-->
I showed this to my boss, he did not approve, so I am still looking for a solution!!!
Adding this to my css was a solution for me:
table {
border-collapse: separate;
}
None of the solutions I've searched on worked. For IE8, the background color only worked for the body table rows. Whenever I used a background color for the header row or header column, the borders would disappear.
What worked for me was defining a background color for the table itself. No background color for header. Each body table row would need to have a background color defined to overwrite the color defined on the table (if needed).
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}