I know that IE7 doesn't support the value inherit for any CSS properties except direction and visibility. When a browser doesn't support a value, it should simply not apply the given declaration (that particular line). 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?
To be clear: in most browsers the first link is red and the second link is blue. In IE7 the first link is red, but so is the second, even though I have at least one declaration it should understand in the ul a rule.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Inherit Test</title>
<style type="text/css">
body {
color: #369;
}
a {
color: #f00;
}
ul a {
color: #369;
color: inherit; /* this should be ignored by IE7, right? */
}
</style>
</head>
<body>
<p>This is testing a red link in a paragraph.</p>
<ul>
<li>here is a link that should not be red</li>
</ul>
</body>
</html>
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.
Related
i want to change color of all my link on the page but it won't work on chrome, works fine on opera. i don't get what's going on can you help me make it work on every browser ??
a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
some textOirase
some textthe mountainssome more text
</p>
</body>
Styling anchor links can be a bit tricky. There are several pseudo classes along with the basic a tag selector that can be used for styling that affect links based on their state.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div>This link starts out blue.</div>
<div>This link *might* be violetred in your browser.</div>
<div>So might this.</div>
<div class="special">Hovering will turn the links aquamarine.</div>
<p>This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</p>
If you ever visited one of the links in your code snippet on your Chrome browser (but not Opera) it will have a different color.
Most likely one or two of the links in the code snippet I provided will already have a different color for you because you visited one of those sites in the past.
To achieve a consistent result, explicitely set both :link and :visited and be mindful of selector specificity.
You can use :any-link to achieve consistent results, which is effectively the same as :link,:visited but keep in mind that not all browser support this newer pseudo-class yet and it has the same base specificity, so it needs to be declared last (This is the reason why the rule in the code snippet is only applied to the last link).
In my browser, without any author or user styles, the h1 font-size is 32px. I have been trying to figure out how the h1 font-size results in an actual value of 24px, with the following HTML and CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<link rel="stylesheet" type="text/css" href="three.css">
</head>
<body>
<p>My paragraph</p>
<h1>My H1</h1>
</body>
</html>
CSS:
html {
font-size: 12px;
}
It looks like the user-agent font-size of 2em overrides the 12px specified in the CSS. Even though it is shown as struck-through in Chrome Dev Tools (see below), it seems the 12px value is also used, because the h1 not the default 32px. How can the 12px be overridden and still be used?
This is called specifity. The selector h1 is more specific than the html selector for the title tag. It has more priority that's why it's overriding your specified style.
Why having 24px ?
font-size:2em means twice the font size specified in the parent element (and here it's 12px) so you will have 2*12px = 24px. This is why the 12px you specified is also used.
To be more generic in the explanation we can say that Xem means X times the size of the current font. The current font depend of course on all the styles you applied (here you only have the one specified in the html tag).
You can read more here
If you want to override the style you can simply specify :
h1 {
font-size:12px;
}
or use !important selector like this :
html {
font-size:12px!important;
}
I did just want to answer a question and I fall on something I dont understand!
Why the result is not the same if I use inline CSS or CSS in a file like the color in this case!
The code is the same but the 1st paragraph is green and the 2nd red!
I really dont understand why?
Thank you
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>
<p>This a paragraph.</p>
</body>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
<body>
<p>This a paragraph.</p>
</body>
If you copy your first snippet into a file and open it in a browser the paragraph is indeed red as in the second example.
But for some strange reason* if you run the first snippet in stackoverflow the style element is moved into the body element before the p element (just introspect with firebug). Now p is not the first child and therefore the red-color rule does not apply.
*EDIT: or not that strange (see comment by Turnip) since the body tag is stripped from the script.
p:first-child will only render on the first child if it is a p tag. For whatever reason, the StackOverflow snippet is rendering the code as:
<head>
<style>
</style>
<style type="text/css"></style></head>
<body>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
<p>This a paragraph.</p>
</body>
</html>
The first child is the <style> tag, which got moved into the body. Because of this, there is no p:first-child and so the color red never renders, this leaves green as the only style applied to the <p> tag.
While there is an exception for the :not() pseudoclass in the CSS Specificity Rules that determine when specific CSS styles are applied to certain elements, the real issue here is a matter of invalid markup.
The first example that you provided is actually invalid as <style> blocks must be declared within the <head> element according to the spec, and you'll notice when this is corrected the results should be the same:
Doh! Or it's just a matter of Stack Overflow's editor stripping out the <body> tags within the code examples per the comment from Turnip.
I came across this issue when testing a stylesheet across different browsers, including IE6 (yes, I know..)
<head>
<style>
a:link, a:visited, a:hover, a:active { font-weight: bold; color: #000; text-decoration: underline }
.myclass a { color: red; text-decoration: none; }
</style>
</head>
<body>
<p>This is a test</p>
<div class="myclass">
<p>This is a test</p>
</div>
</body>
Results:
In IE6, the .myclass a rule only applies to the unvisited link state
In other browsers (FF, Chrome), the .myclass a rule applies to all link states
I believe that IE6 is wrong and that .myclass a, with no pseudo-classes specified, should apply to all link states. However I came across this SO question where it says that a is equivalent to a:link. This would match the behaviour in IE6. However I cannot find any official reference confirming this.
Which one is right?
Update:
As noted in the comments, the accepted answer to the question referenced above has since been updated.
The other browsers are right; IE6 is wrong.
The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.
Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.
By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:
<div class="myclass">
<p>This is a test</p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>
IE6 is right. Not specifying a pseudo-class on a is the same as :link. Therefore you must specify styles for :link and :visited if you want something specific - :hover and :active are optional.
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?