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.
Related
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 am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)
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;
}
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/
I have a ul/li based side menu, styled with two CSS rules, the following of them is ignored by IE8 Quirks mode, and I assume IE6:
ul { padding-left: 15px; }
I can reproduce the problem in FF by removing this rule completely. I have also tried using jQuery to apply the rule, with no change in IE8:
$("ul.menu-class").find("ul").css("padding-left", 15);
Is this a box model issue, and, how can I reduce the UL 'padding' in IE Quirks Mode?
Try margin-left for IE - browsers have a unique look on that matter.