IE7 CSS inheritance does not work
No, IE has never supported inherit
for any property - sorry. This has been fixed in >= IE8.
Whilst you could use a JavaScript fix to copy the properties from h2
to a
, it's probably easiest just to apply the same styling rule to both elements:
h2, h2 a {
font: something;
color: black;
text-decoration: none;
}
You don't need to set inherit
on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...
IE7 and inherit: ignoring entire rule?
color
isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color
and display
are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important
ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.
Why is CSS inheritance not working for me in IE8?
You're right, this is pretty odd, although I find that adding a valid doctype solves the problem. http://jsbin.com/etuti/2
IE 7 not using the most specific CSS rule
IE7 does not recognize the inherit
keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
IE does not understand CSS inheritance
Your page is probably in quirks mode, so you need to add a doctype declaration to your page for it to render in standards mode.
Quirks mode in IE has a bug that causes it to read only the last class in a chain of class selectors, so it's treating your rules like this:
.container-header .left { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }
.container-header .middle { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }
.container-header .right { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }
This also affects IE6 in standards mode, for which the only workaround is to assign unique classes to your HTML elements. Also see this answer for an illustration.
As a side note, this isn't an inheritance error, but a cascading error (or rather, a selector parsing error resulting in bad cascading).
multiple-class CSS inheritance problem in IE
If your page doesn't have a proper doctype declaration, IE9 will go into quirks mode and treat chained class selectors exactly like IE5/IE6 does: it'll only read the last class and apply rules accordingly.
As a result, the selector .spr.radiobutton.on
is really being interpreted as just .on
(rather than .spr.on
), overriding the earlier rule that it thinks also has just the .on
selector.
Simply give your document a doctype declaration and IE9 will behave as expected.
background-color: inherit doesn't work on input element on IE 8/9/10
I was able to get the effect that you wanted by using the following CSS:
div.container {
margin: 50px;
padding: 10px;
background-color: #aaa;
}
div.container input {
background-color: transparent;
border-width: 0;
}
div.container:hover {
background-color: yellow;
}
div.container input:focus {
background-color: white;
}
For some reason, inheritance with the background color property in IE10 seems to be implemented differently than other browsers.
Setting the background color to transparent
instead of inherit
seems to work.
You can see the result at the demo: http://jsfiddle.net/audetwebdesign/kTM2f/
I wish I had a better explanation, but at least we have a work around.
Bug with IE8
I just read the following related question:
Input boxes with transparent background are not clickable in IE8
Setting background-color: transparent
on an input field seems to disable the input field in IE8.
In that case, the CSS would have to be the more explicit version:
div.container {
margin: 50px;
padding: 10px;
background-color: #aaa;
}
div.container input {
background-color: #aaa;
border-width: 0;
}
div.container:hover {
background-color: yellow;
}
div.container:hover input {
background-color: yellow;
}
div.container input:focus {
background-color: white;
}
CSS - Grandchild inheriting class from a different parent in IE only
the reason your second ul
within .roundside
is picking up the css from the #stripes ul
is because of the following css
#stripes ul a:link,a:visited
you need to change it to
#stripes ul a:link, #stripes ul a:visited
otherwise it will apply the styles declared after it to every a:visited
on the site and not just in the #stripes ul
This is also the case with #stripes ul a:hover,a:active
it needs to be changed to #stripes ul a:hover, #stripes ul a:hover a:active
otherwise you will come across the same problems.
Hopefully this solves your problem.
EDIT: MrSlayer made a good point in the comments below which I missed.
You would also be better off changing
.roundside ul a:link,a:visited,a:hover,a:active {color:#990000; font-weight:bold}
to
.roundside ul a:link, .roundside ul a:visited, .roundside ul a:hover, .roundside ul a:active {color:#990000; font-weight:bold}
to avoid any nasty a
related surprises in the future. In CSS you need to be as specific as possible when setting your styles
Related Topics
Google Webfont Conflict with Local Font
Prevent a Pseudo Element from Triggering Hover
Style an Ordered List with Cyrillic Letters
How to Link a CSS File from HTML File
Removing the Ie10 Select Element Arrow
ASP.NET MVC - Style List Item Based on Controller
How to Use the Nth-Child Value as a Parameter in a Property? (And How)
Bottom of Custom Font Cut Off in Opera and Webkit
Tw Bootstrap: How to Overflow Columns
Safari and Ie Can't Read Ttf and Eot Fonts
Why Does a Grid-Area Name Absent in Grid-Template-Areas Create Additional Tracks
Is There Any Equivalent to Ie Conditional Comment for Chrome and Safari
How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen
Slide Up/Down Effect with Ng-Show and Ng-Animate