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 >
Related
I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
I'm doing some changes to a wordpress theme, but Safari (both on Mac and iOS) seems to be ignoring some of the CSS, whereas other browsers work fine.
An example - this is how it looks in Chrome and Safari:
https://s3-eu-west-1.amazonaws.com/cystennin/chrome-safari.png
This is the CSS I've used, specifically for the images.
.homeleftside1 img {
width: 70px;
height: auto;
margin-right: 15px;
float: left;
border-radius: 100%;
}
I've got a test site here so you can see what I mean: link removed
Any ideas where I am going wrong? Thanks
Is it possible that Safari doesn't support border-radius?
Try to add -khtml-border-radius: 50%;, that should work...
Similar question: Rounded cornes (border radius) Safari issue
Just took a look in Safari and Chrome, but Safari isn't even listing the styles you set in your stylesheet in the list of matched styles for that particular image you're targeting. However, Safari is reporting a couple of errors in your stylesheet: a couple of mismatched curly braces etc. Maybe they are throwing off WebKit? (Would have posted as a comment, but don't have enough rep yet.)
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)
I'm working on a jQuery theme which includes styling for as many form elements as possible.
Initially it was developed for Webkit (Chrome). Now I want to make it work with Firefox as well.
Problem is; Firefox has problems with some Webkit-specific syntax.
For example:
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}
The problem is the input[type="range"]::-webkit-slider-thumb, bit. Remove it and Firefox works fine. It also does this for other syntax like ::-webkit-file-upload-button, ::selection and all other things using the ::-webkit-... labels. It recognizes it's own ::-moz-... labels, like ::-moz-selection just fine though.
Webkit seems to just ignore the ::-moz- labels.
Is there any convenient way to make Firefox ignore the ::-webkit-... labels or otherwise deal with this problem without having to maintain multiple copies of every CSS block?
Using freshly updated versions of Chrome and Firefox.
Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:
The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.
In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.
I had to read a little bit to answer this question, here are some good resources,
Gecko Style Engine Further Reading on the Engine Implementation, Still i did not see any pointers as why it would drop it, but i can give you my best guess, I think the engine is dropping the whole selector, suppose that mozilla implements -moz-slider-thumb pseudo selector and try to use it with -webkit- and it will be dropped as well.
I have seen this behavior before in all browsers, and i think its being used as a hack to target some browsers sometimes.
This will work
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
This wont
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
or this
input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
I think you will have to rewrite the properties-values on two or more different selectors, this will only affect the size of the stylesheet as the engines will keep dropping the selectors they dont own.
I really hope this helped a little bit at least.
EDIT:
As noted by user #BoltClock in the comments my guess was correct here is a link to the spec w3.org/TR/css3-syntax/#rule-sets
FYI, I ended up going for a different solution.
Since my end product is a stylesheet, I decided to use a CSS compiler to generate the .CSS file based on a source file. So far it's working fine.
I've used LessPHP because the .less format is reasonably popular and I'm familiar with PHP, but any of the other ones will do.
Note that I'm using LessPHP only for compiling a static .CSS file, so it won't be a requirement for end-users of this project unless they want to change the .less source files themselves.
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+)