I have some rules for my div "Border" It works in all other browsers but not in IE 10.
Anybody have any idea why this could be happening?
Thank you.
.border {
background: white;
border: 8px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%);
border-image-slice: 1;
}
.border {
background-color: white;
display: block;
height: 50px;
width: 150px;
text-align: center;
transform: skewX(-15deg);
}
<div class="border">
<div>
You said that you have the meta tag set to emulate IE10.
Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/.)
So if you set IE11 to emulate IE10, it will stop supporting border images.
To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Simply swap out your existing meta tag for this one, and the border image problem will be solved.
However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.
Related
Recently I have been coding a clicker game, and have found the need to use a meter to display progress. I wanted the meter to have a gradient that goes from light pink to cyan, and it works perfectly on chrome. However, when I used my home computer and booted up firefox; the gradient was no longer displayed; and the meter was a dull shade of green.
.pastrymeter::-webkit-meter-optimum-value {
background : linear-gradient(90deg, lightpink, cyan);
}
This is the styling for the meter; and nothing that I have changed fixes it. I tried adding the moz prefix to the background tag; which did nothing. I also tried changing background to background-image to see if it was an element thing; but that also did nothing.
What can I do to fix this?
Looks like you are targeting a non-standard feauture -webkit-meter-optimum-value, that isn't supported in Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value
Try this, it is cross-browser compatible.
background: -moz-linear-gradient(90deg, lightpink, cyan);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
Change the values as you may require
Can you try this second method ?
<div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
width: 200px; height: 100px; text-align: center;">
</div>
Is there similar property to -webkit-box-reflect for the mozilla and other browsers? I could not find on google which other browsers have support for this. So if someone can tell me or give me link, that would be really nice.
This is possible with not only webkit (latest chrome or safari) but also in latest firefox.
Here is the example: http://codepen.io/jonathan/pen/pgioE
HTML:
<div id="someid">
<img src="image url" />
<div/>
CSS (webkit):
#someid {
/* need some space for the reflection */
margin-bottom: 120px;
/* the gradient makes the reflection fade out */
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}
CSS (Firefox - Gecko):
#someid {
position: relative;
/* need some space for the reflection */
margin-bottom: 120px;
}
#someid:before {
content:""; /* needed or nothing will be shown */
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
-moz-transform: scaleY(-1); /* flip the image vertically */
position:relative;
height:140px;
width: 360px; /* should be > image width + margin + shadow */
top: 247px;
left:0px;
}
Firefox uses -moz-element to do the reflections (https://developer.mozilla.org/en-US/docs/CSS/element), whereas webkit uses a proprietary vendor prefix for reflections.
I hope this helps!
The -webkit-box-reflect property is only supported by webkit browsers, namely Chrome and Safari. As it is a proprietary webkit property, there is no equivalent for other browsers.
The alternative would be to use javascript to create a mirror element with faded opacity.
I want to make a gradient text-shadow (like this)
Is it possible to do that with CSS or/and Javascript?
Thanks for help.
You can try it with a linear gradient, like in the example snippet below. Please note, that this does not work in Internet Explorer and Edge. I tested it successfully in Chrome, Firefox and Opera, and have no option to test it with Safari.
div {
font-size: 128px;
background: linear-gradient(90deg, #ff0000 5%, #00B053 15%, #1BAADA 30%);
-webkit-background-clip: text;
-webkit-text-stroke: 12px transparent;
color: #000;
}
<div>
Text
</div>
I am a novice when it comes to css and am creating a custom audio player using a mixture of css and jquery. The progress bar of this audio player is a ring, which uses circle sectors to display progress. The sector is created using linear-gradient, like so:
background-image:
linear-gradient(-75deg, black 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, white 50%);
In firefox this works perfectly, but in both chrome and ie, a very slim white line is visible on the outside of half of the circle, presumably where part of the linear-gradient is supposed to cover.
I have created a jsfiddle that displays the issue, https://jsfiddle.net/9dagsrzz/
Is there something that I am doing wrong that causes this, or is there a fix I can apply that removes this line?
Thank you for your time.
Edit - it has been over a month and I thought I would update and say that I have still not been able to find a complete solution to this problem. The best way of dealing with the issue is to include a covering border, as suggested by Pustur below.
Samiskeen,
I'm no CSS expert either but I do know that each browser has its required prefixes when dealing with gradients:
-moz- is for Mozilla Firefox
-webkit- is for Apple Safari, Google Chrome, and also for ios and Android
-o- is for Opera
-ms- is for Microsoft IE and presumably Edge
You can have all of these present on their own line and the browser will pick the correct one.
Example:
background-image:
-moz-linear-gradient(-75deg, black 50%, transparent 50%),
-moz-linear-gradient(90deg, transparent 50%, white 50%);
-webkit-linear-gradient(-75deg, black 50%, transparent 50%),
-webkit-linear-gradient(90deg, transparent 50%, white 50%);
-o-linear-gradient(-75deg, black 50%, transparent 50%),
-o-linear-gradient(90deg, transparent 50%, white 50%);
-ms-linear-gradient(-75deg, black 50%, transparent 50%),
-ms-linear-gradient(90deg, transparent 50%, white 50%);
The website http://caniuse.com lists the major CSS rules, attributes and whether browser specific versions are required.(Nixon, p. 439).
Play around with the prefixes, they should help correct your problem.
Good Luck.
Jim
Not sure if this is a definitive solution or the best, but it seems to work fine at least on chrome.
HTML:
<!-- divs instead of spans -->
<div id="container">
<div id="position_indicator"></div>
<div id="inside"></div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
background-color: black;
position: relative;
padding: 20px;
}
#inside {
width: 90px;
height: 90px;
background-color: black;
border-radius: 100%;
position: absolute;
margin-left: 5px;
margin-top: 5px;
}
#position_indicator {
border: 1px solid black; /* Fix the border issue! */
margin-left: -1px; /* Compensate for the new border */
margin-top: -1px; /* Compensate for the new border */
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
background-color: black;
background-image: linear-gradient(-75deg, black 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%);
}
Fiddle
Greetings all,
I'm using a gradient background with -webkit-gradient. It's not working on Chrome 8.0.552.224 on Windows 7, but I could swear it was recently working on Chrome-OS X. It's Monday so perhaps I'm missing something obvious, but if so I can't figure it out. I'd appreciate your taking a look. The sample code here will work on Firefox but doesn't display a gradient in Chrome:
Thanks,
-Northk
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient test </title>
<style>
.main-header
{
padding-top: 50px;
min-height: 50px;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main-header">
THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
</div>
</body>
</html>
Seems I just got the syntax wrong. Here's how it should be:
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
Be aware in Chrome 16.0.912.75m still has a small CSS bug/issue when parsing style:
background:-webkit-linear-gradient (top,gray 0,#A0A0A0 100%);
This will not work, because of spaces between -webkit-linear-gradient and start bracket.
Deleting additional spaces will solve the issue as well as minifying CSSs.
Try this
background: -webkit-linear-gradient(#DDDDDD, #ffffff);