IE7 CSS Inheritance Does Not Work

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



Leave a reply



Submit