What rule do you need to enable styling of disabled elements in IE8? I have the code below now. It that works fine under IE7, but not on IE8. IE8 just give me plaint wihte background. Why?
input[disabled], input:disabled, textarea[disabled], textarea[disabled="disabled"], textarea:disabled {
background:#EBEBE4;
}
the :pseudo class in the selector is tripping up IE8!
you have to ungroup these selectors if you absolutely have to use those CSS3 pseudo classes;
If there's a selector in the ruleset that IE8 doesn't understand it's ignoring the whole thing - this is common in IE8 with CSS3 pseudo classes
e.g. If you separate them out and remove the pseudo :disabled parts of the selector completely - you'll see the first example below works for all, whereas the second one still works except for IE7
input[disabled], select[disabled], textarea[disabled] {background-color: #0f0;} /* lime green - works in IE7+ and modern browsers */
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {background-color:#ff0;} /* yellow - IE8+ and modern browsers */
the color (as opposed to background-color) issue pointed at in another answer is not the cause of your issue, but it wouldn't help if you were also trying to change the color ;)
Another option is to add a disabled class and style it:
input.disabled, textarea.disabled{
background:#EBEBE4;
}
Related
I have declared a style
.tableStyle2 tr:nth-child(even) {
background-color: #C5F0FC;
}
in my style sheet. but it is not reflecting on IE, works on FF and chrome. when I try to check in my debug in IE it is also not present but present for chrome and FF.
Any suggestion for this.
Older versions of IE don't allow for CSS3's nth-child selector. A work around would be to use jQuery to define a class on the nth-child and then style that class accordingly.
jQuery
$('#element li:nth-child(2n)').addClass('even');
CSS
#element li.even {
...
}
You can use selectivizr. It's a very nice JS plugin which makes IE support css3 selector
http://selectivizr.com/
I have a fixed footer on my website and in order to create space between it and the main contents I gave the latter a bottom margin. This works fine in Chrome and Firefox.
The rule I used for this is
div#wrap>div:last-child{
margin-bottom:45px;
}
However, IE8 does not seem to respect this (very basic!) CSS rule as shown below.
Insofar as IE8 provides any errors/warnings whatsoever, it doesn't mention anything about this rule being problematic. Increasing the margin-bottom has no effect so the rule seems to be completely ignored. Does anybody understand why? And what is a sound workaround for this?
:last-child is a css3 selector and will not be applied in ie8 if used.
First alternate solution(not recommended)
:first-child+(all the tags until the end) //:first-child+div+div+td+....
{
margin-bottom:45px;
}
Option 2(Recommended)
Give a class to the last child and add your css styling
I was playing around with this CSS in my IE9 browser:
className{border: red solid 1px; *border: black solid 1px;}
In IE 8,9 the border is shown red.
When I turn on IE 7 compatibility mode, I see the
black border.
It looks liks the *border syntax is a fallback only for IE.
Does anyone know about this star (*) CSS rule & what does it do?
How well does it work for which browsers?
It is incorrect CSS so not parsed in most (good) browsers. Older IE however parses it as valid CSS and applies the rule. Using an underscore works in the same way.
See here for further information, or here
This is different to the use of the asterisk as a universal selector in CSS
*+html SELECTOR {}
targets only IE7 and keeps the CSS valid. This should be prefered.
The only time I ever use the star is for the inline block fix for ie7, the star just allows you to target ie6 (from i remember) as well as ie7. You can also use an exclamation mark to target ie7 if you're feeling lazy (!border:1px solid #000)
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.
I know how to target IE, but that's only in HTML (which means I need to create another CSS file for IE bugs). Is their anyway, how I can implement the fixes in the same CSS file. This mean I target IE with CSS code?
You can do with these hacks
For example:
selector {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
There is no equivalent to conditional comments/code in CSS. The only thing you could do there are the old CSS hacks -- that people struggled with before conditional comments became known.
You can make CSS hacks work, for a bit, but it's not a smart or robust approach.
Recommended approach:
Always start with a CSS reset. Here's a good one: http://meyerweb.com/eric/tools/css/reset/reset.css
If at all possible, get your boss or client to realize that IE6 support is not cost-effective.
Design HTML and CSS with an eye for IE bugs, as much as possible. EG, float-problems, height and margin problems, etc.
For those few things that still need different CSS in IE, putting them in a conditionally-included, separate CSS file really is the simplest, most robust approach. The bonus is it doesn't penalize decent browsers one bit.
In your CSS code, precede your selectors with something that only IE will recognize. Examples of selecting <div> elements in IE6 and IE7:
IE6 only: * html div
IE7 only *:first-child+html div
A comprehensive list can be found here: http://paulirish.com/2009/browser-specific-css-hacks/