This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
I have a wordpress page set up here. It does use tables, which I know is dumb, but it was the best way to set up the visual layout in the backend as well, so the client could see what they're doing when they edit.
ANYHOO, I have a separator image that displays after each table row, using "tr::after" css. This looks fine in any browser EXCEPT for Internet Explorer, where instead of showing up below the table row, the separator seems to scrunch the second column and squeeze beside it (image)
I can't seem to figure out what's going on here.
IE 8+ supports the :after pseudo-element - note the single colon (:)
according to the above link no IE version (though IE 10 is not in this list) supports the two-colon pseudo element
edit:
IE 9+ supports the two-colon pseudo-element (as #BoltClock mentions Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?)
You're only using the CSS3 syntax which was created to distinguish pseudo-elements from pseudo-classes like :hover and :focus. While the later target states of an element, ::after targets pseudo-elements following the target.
Internet Explorer 8, like other browsers, supports the CSS2 version. Support for the CSS3 syntax wasn't added until Internet Explorer 9. If you want full compatibility, you can provide both, or provide the former CSS2 syntax within an IE8 comment.
The MSDN Documentation states the following:
In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :after.
Related
I'm looking for a method to inspect elements styled using pseudo-classes (such as :hover) from IE.
I am able to do this with Firefox using the Firebug HTML style drop-down that allows the browser to apply a pseudo-class to a selected element:
I am also able to do this in Chrome by toggling the element state:
However, I have not been able to find a similar option with IE developer tools. I've tried using Firebug Lite, but the same option that is present in Firefox does not seem to be in the Lite version.
Is there a way to apply pseudo-classes to elements in IE (similar to Firefox and Chrome) so that I may see how it's being styled, or otherwise observe pseudo-class styling in IE?
I've never found this in the native developer tools included with IE.
It looks like IE 11 has this feature now, although it seems like it's only for Hover (and Visited for anchor tags).
On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after, but when I try it seems it does... see JSBin
Am I doing something wrong? I thought ::before and ::after would be nice tools to hide stuff from IE9, when in fact, they don't.
The CSS2 pseudo-elements :before and :after, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.
The double-colon notation, on the other hand, is new to CSS3. IE9 does support this new notation for ::before and ::after, and likewise for the CSS1 pseudo-elements ::first-line and ::first-letter. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.
I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.
IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested e.g. as follows:
<style>
p::after {
content: "***AFTER***";
}
</style>
<p>Hello world
Here the CSS rule is ignored, because IE 9 goes to quirks mode. But if you add the following line at the very start, IE 9 goes to standards mode and the CSS rule takes effect:
<!doctype html>
It is common in IE 9 that in quirks mode, new CSS features (most features that are neither in CSS 2.1 or in the IE legacy) are not supported. In quirks mode, IE 9 does not support the old one-colon notations :after and :before either. It supports them (but not the two-colon versions) in “IE 8 mode”, which you can select in developer tools (F12) manually, in the “document mode” menu, or at document level using the tag <meta http-equiv="X-UA-Compatible" content="IE=8">.
As quoted from http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
CSS3 pseudo-element double colon syntax
Please note that the new CSS3
way of writing pseudo-elements is to use a double colon, eg a::after {
... }, to set them apart from pseudo-classes. You may see this
sometimes in CSS. CSS3 however also still allows for single colon
pseudo-elements, for the sake of backwards compatibility, and we would
advise that you stick with this syntax for the time being.
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 3 years ago.
I know what an asterisk does in a selector for CSS (What does an Asterisk do?), but what does it do in a property name? Here is an example of CSS used by YUI. I don't know what the *display does.
.yui-button .first-child
{
display:block;
*display:inline-block;
}
It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed.
Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.
In general, it should be avoided in favour of conditional comments.
It's an IE hack. The second declaration will be applied by IE7 and older (thus overriding the first declaration), while other browsers will ignore it and continue applying the first declaration instead.
Also, this is invalid CSS syntax.
its like the underscore for ie6. but for ie7
if you put the asterisk the property will only be used in ie7 and older browsers.
its an hack...
It's one of the IE hacks. Internet Explorer parses CSS in a slightly different way, allowing for certain hacks that will be ignored in other browsers. Google for it. You can target different versions of IE with different hacks.
Does anyone know why this CSS selector works in Firefox but not in IE7 or IE8?
css=div[style~='visible;'] div[class~='x-combo-list-item']:contains('Test Job')
I'm using this in a Selenium test to find an element on the page.
Edit: The :contains selector is not the problem. I'm using it elsewhere in my tests and it works in IE6, 7, and 8.
I know that Selenium attempts to support all of CSS3 for all browsers in it's selector engine. It may be that it does not support multiple levels of the attribute selectors in IE.
You might be stuck with an XPath "locator" this one
Alternatively, you could try:
div[style~='visible'] .x-combo-list-item:contains('Test Job')
Probably because the :contains pseduo-class is a CSS3 addition and whatever version of IE you're using (you didn't specify) probably doesn't support :contains.
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
I have been looking at a hack to solve a CSS problem I have. I have used one to create a custom rule for Internet Explorer.
margin-top:45px;
*margin-top:0px;
Does this hack apply to all IE browsers? Does this hack appear in any versions of Firefox or Safari?
This applies to IE7 and below. But be aware that this is not valid CSS, and it could break at any time. See here for a more comprehensive list of the various CSS hacks and which browsers they affect.
Although Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve.
I'd strongly recommend reconsidering whether you really need this hack, and if there isn't a better way to do what you want.