I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after). When applying the pseudo-element to a hover state of an element (.element:hover::after) it does not work in IE, but it does in all other major browsers.
http://jsfiddle.net/BramVanroy/9jpeZ/1/
#d1::after { /* Works in IE */
content: "no hover needed";
border: 1px solid blue;
display: block;
}
#d2:hover::after { /* Does not work in IE */
content: "Y U NO WORK IN IE";
border: 1px solid blue;
display: block;
}
Is there a CSS fix available for this? (No JS/jQuery.)
This seems to be a bug in IE10 (even when it emulates other versions).
I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.
I had an instance where this wasn't working in IE as well,
When I switched the order of ":hover" and ":after" in my style sheet from
.myclassname::after:hover
to
.myclassname:hover::after
I was able to get the desired result, all the way back to IE9 (didn't test anything lower)
Related
Scrollbar css works in Google chrome but not in mozilla and Internet Explorer.
My css is
.skin-1 ::-webkit-scrollbar {
width: 5px;
}
.skin-1 ::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
.skin-1 ::-webkit-scrollbar-thumb {
background-color: #0e9aef;
}
.skin-1 ::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.
please read this CSS-Tricks article.
Scrollbar is NOT a css standard, that means some browsers may support it while others don't. In this case you are applying the `-webkit-ยด- prefix which aims just to next browsers:
Android, Chrome, iOS and Safari.
You can check here for more info.
Aa long as I know scroll bar is not supported at all in Firefox (if not changed reciently).
for a full browser compatibility I would recomend You to use some nice (and easy to use) jquery libraries around.
I want make the scrollbar for my site dark and customize it. It works on Chrome with ::-webkit-scrollbar but it doesn't work on Edge -- I couldn't find way changing the scrollbar color on Microsoft Edge.
Does anyone know how to do this? Please help :)
There is currently no way to do this in Microsoft Edge. In IE there were vendor specific, non-standard, CSS properties to achieve this. These were removed in MS Edge as they could be used to target the browser and break compatibility with sites that were expecting old IE behaviour (the properties are very old). Unfortunately there are no good standard properties in CSS to replace these at the moment.
There is a UserVoice suggestion you can vote on to add a method to style scrollbars. We use this as one of the inputs when planning feature priorities in the EdgeHTML engine.
The following worked for me:
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars
Unfortunately, I'm stuck working with legacy code in IE9.
Long story short, I'm cloning an itinerary template (hidden) using jQuery and applying a top border to all clones except the first visible (which is really the second actual because the template is hidden).
What I'm running into is that the border renders in Chrome, FF, and Opera, but not IE9. I think it's because I'm stringing several pseudo-classes together, though in my mind that shouldn't cause a problem.
I'm targeting the itineraries as follows:
#itinerary table.formTable:not(:nth-child(2)):after {
content: "";
border-top: 1px solid #999999;
width: 100%;
position: relative;
margin-top: -130px;
margin-left: 17px;
display: block;
}
Basically, apply the above CSS to all except the second itinerary.
The qusetion is, why is this happening in IE9? According to can I use, the pseudo-class is suported. Is this becuse I've strung so many into this particular rule? I'm at a loss.
Here's how it's supposed to look (Chrome):
Here's what's going on in IE9:
Here's a close-up of the CSS from the IE9 screenshot:
Extended arguments are not supported in IE9 for the pseudo-class :not
here are the docs on that issue
Most likely you can use
#itinerary table.formTable:not(:nth-child(2))
but not
#itinerary table.formTable:not(:nth-child(2)):after
Fortunately IE9 supports conditional commenting so you can write a fallback for IE9 and >
My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.
I have test my code in jsfiddle
May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.
filter works "better" for IE8.
But for IE9 i would raccomend SVG gradients.
Here you can find Microsoft's official SVG gradient background maker
You'll obtain something like this:
/* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);
And you can add it to your rule this way:
a {
padding: 3px 5px;
margin:5px;
display:block;
border:1px solid #000;
background:#FAFAFA; /* fallback for browsers not supporting gradients */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}
Then, with conditional comments you can target IE8 again:
.ie8 a {
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}
Anyway, i suggest you to google for "Visual CSS tool" for a complete cross-browser code.
You're using only -moz-linear-gradient and it works just for older version of Firefox Mozilla.
For IE9 you can also use CSS3: linear-gradient: { ... }
For older versions of Chrome and Safari you should use -webkit-linear-gradient and for Opera -o-linear-gradient and -ms- for IE (but not everything works fine with it).
One solution is to wrap your a in another div and apply your background properties on it instead of on the a;
<div class = "container">Glee is awesome!</div>
CSS:
.container {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
a {
display: block;
}
Here's a little demo: little link.
I want to use to simulate a cursor by adding the following class to it.
.cursor {
border-left: 1px solid red;
margin-right: -1px;
display: inline;
position: relative;
z-index: 1;
}
It works perfectly fine in Firefox. However, nothing is shown in Safari. I've been trying many different values. It seems like border-left is not understood by Safari although w3c claims that it's supported by all major browsers.
Can someone please help me fix this problem?
Thanks,
It seems to work fine for me, using your exact code. I've created a jsFiddle here, which displays a red "caret" in Safari.
Is there a particular Safari version you're having problems with? Does the jsFiddle shown work for you? It uses only the code you've provided.
On further investigation, it seems that the span must have content in order to show the border. I'm not sure exactly why -- perhaps Safari is "optimising out" the empty span, or giving it zero height, or something like that.
This appears to be a WebKit issue, as the same behaviour occurs in Chrome. As a workaround, if you set a height on the span, it seems to work. If I change your CSS to:
.cursor {
border-left: solid 1px red;
margin-right: -1px;
display: block;
position: relative;
z-index: 1;
height: 1em;
}
...that is, adding a height to the span, then your border displays whether or not it has content. Therefore I guess what's going on is that without content, WebKit is giving no height to your span, and therefore no border. Which is perfectly sensible behaviour, really.
Here is your original jsfiddle, with a height added, that works in Safari and Chrome.
border-left style works on safari v1.0+
See my code snipped that I've just tested on Safari 5.0.2 and it worked:
http://jsfiddle.net/DqhfJ/1/
in fact all css tags that you provided - work in Safari 1.0+ , except display tag (it works in Safari 1.3.2+)