I'm breaking my head with this simple? problem. I know its not a bug nor a cross browser issue, tested on firefox and internet explorer. Simply I don't understand why its resolving this way.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.red_class { color: red; }
.blue_class {color: blue;}
</style>
</head>
<body>
<div class="red_class">
<a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>
In my humble opinion both rules have the same specificity so I expected the link to show in BLUE because the blue_class rule is closer, but the link is shown in RED. I actually changed the order so that the ".blue_class" rule was written first, but it didn't change the result
I have found some ways to make the code work, like making 2nd rule more specific, for example:
.red_class a.blue_class {color: blue;}
But I would really like to understand why this is not working as I expected, that is, if the link has a class blue_class it should be shown in blue.
Really appreciate the help. Thanks in advance.
Actually I don't see how you're getting a red colored link...
Anchor elements with defined href doesn't inherits attributes like color or text-decoration, so the result you're getting it's a little odd.
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.
So, this results in a default styled anchor:
.red_class{color:red;}
<div class="red_class">
Something
</div>
In this case the anchor inherits the red color:
.red_class{color:red;}
<div class="red_class">
<a>Something</a>
</div>
I really don't get the problem, but at least this is an explanation of how anchor styling works.
#Luxfer This is just a simple thing that I do. Download Firebug Addon for your Firefox. Inspect the element to which you want to give style. On the right side of Firebug, there is a box where you can see the CSS used. Simply Right Click on the CSS pane, there you will find an option as Add Rule. As you Click on that, it will take the selectors that will target the required element perfectly.
Are you certain it's not working? Blue is not a good color to test with because most browser default to a blue for hrefs.
<div class="red_class">
<a class="green_class" href="http://somesite.com">Somesite</a>
<p>More Text</p>
</div>
with
.red_class { color: red; }
.green_class {color: green;}
Seems to work fine in Chrome here.
----Demo-----
Related
I am excited to complete this project, i'm getting close but need help.
I want the width on the download now button equal the width of the book?
http://www.orcaaccounting.com/freeStuff.html |
Then make the image size be mobile friendly. Right now the page isn't mobile friendly.
Any other pointers are greatly appreciated.
Here is a url to my source code.
I couldn't figure out how to insert the code here.
If these are fixed images (i.e. they will not change), then all you need to do is manually set the width of the download button to be the same as the width of the book's image:
<img src="downloadnowOrange.png" style="width:182px">
Note that the above is considered bad code, but it works perfectly and since the rest of your site uses that same style, we'll leave it like that.
How did I discover the correct width for the button? If you are using Google Chrome browser, you can right-click on the book image and choose "Inspect Element". This opens Chrome's "DevTools" window and shows you the underlying HTML. If you hover over the img src, Chrome will display the image and the width/height sizes.
A few points:
You are using inline styling. This means that you have style attributes on each div/etc that style the element. For many reasons, this is not optimal. It is pretty easy to fix this. Give each DIV a unique className, and create a style tag in the document's head with the styles, like this:
Inline-styling (Bad):
<div style="width:50px;height:80px;background:red;">
<img src="healthyCooking.png" style="border:1px solid green;"/>
</div>
Using a style tag:
<head>
<style>
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
</style>
</head>
<body>
<div class="redDiv">
<img src="cookingBooking.png" class="cookImg" />
</div>
That's what people mean by inline styling. Try not to do it. Use the 2nd method, or, better yet, use an external style sheet. To turn the style tag example into an external style sheet, you just move the lines between the <style> and </style> tags - exactly as they are into an external text file (for e.g. mystyle.css), then the head becomes:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" >
</head>
The file mystyle.css looks like this:
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
In my page I have put some links under which I don't want any line, so, how can I remove that using HTML?
Inline version:
yoursite
However remember that you should generally separate the content of your website (which is HTML), from the presentation (which is CSS). Therefore you should generally avoid inline styles.
See John's answer to see equivalent answer using CSS.
This will remove all underlines from all links:
a {text-decoration: none; }
If you have specific links that you want to apply this to, give them a class name, like nounderline and do this:
a.nounderline {text-decoration: none; }
That will apply only to those links and leave all others unaffected.
This code belongs in the <head> of your document or in a stylesheet:
<head>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
And in the body:
Link
I suggest to use :hover to avoid underline if mouse pointer is over an anchor
a:hover {
text-decoration:none;
}
Add this to your external style sheet (preferred):
a {text-decoration:none;}
Or add this to the <head> of your HTML document:
<style type="text/css">
a {text-decoration:none;}
</style>
Or add it to the a element itself (not recommended):
<!-- Add [ style="text-decoration:none;"] -->
Text
The other answers all mention text-decoration. Sometimes you use a Wordpress theme or someone else's CSS where links are underlined by other methods, so that text-decoration: none won't turn off the underlining.
Border and box-shadow are two other methods I'm aware of for underlining links. To turn these off:
border: none;
and
box-shadow: none;
All the above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I'd placed the style after the href. When I placed the style before the href it was working as expected.
<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
The following is not a best practice, but can sometimes prove useful
It is better to use the solution provided by John Conde, but sometimes, using external CSS is impossible. So you can add the following to your HTML tag:
<a style="text-decoration:none;">My Link</a>
<style="text-decoration: none">
The above code will be enough.Just paste this into the link you want to remove underline from.
<!DOCTYPE html> has been set, and html5shim.js has been included in the <head> of each page.
I have the CSS:
.height_fix_container > * { margin:0; background:#fff url(../images/bg.jpg) top left no-repeat; min-height: 400px; }
.height_fix_container > *:first-child { background:#fff; } /*Good eye! But the problem still exists*/
...being applied to this code in the middle of the page:
...
<div class="height_fix_container">
<div>Content box 1</div>
<div>Content box 2</div>
</div>
...
In every browser other than IE7 and 8, the CSS selectors work great. However, in IE Content box 1 recognizes the selector but Content box 2 completely ignores it. I'm checking this with the built in Developer Tools in IE.
Why might this be happening?
In IE you need to have a DOCTYPE declared in order for it to recognize the first-child selector.
<!DOCTYPE .......>
You're also missing a # infront of the 'fff' in the second class definition. It doesn't affect the code at all, just a syntactical edit.
http://www.w3schools.com/cssref/sel_firstchild.asp
IE7 is very particular with :first-child and might be choking on the * before it.
Perhaps you can add another style to the sheet:
.height_fix_container > div:first-child { background:#fff; }
Untested
Your page is being displayed in Quirks Mode. Your description and CSS is making me quite certain.
The most likely cause is that you don't have a valid doctype as the very first line. Add this:
<!DOCTYPE html>
If you do already have a doctype, there are other things can cause Quirks Mode.
Once you fix this, background:fff will no longer work. You need background:#fff. The # is important.
http://jsfiddle.net/a256R/ - similar selectors - work in IE7 and IE8 (first div is green, second is red). Problem is somewhere else (background image url, other rules etc.).
I am developing a website and everywhere i have this annoying problem... I wonder how other sites dont have this problem... any suggestion?
stackoverflow has this problem as i see...
http://inath.gr/ this site for example at the top menu although it has <a> tags there is no rectangle arround it when selected somehow..
CSS outline property:
You can turn it off with:
<style type = "text/css">
a {outline:0;} /*this is that dotted line you get when you select an image, I believe you're talking about the outline*/
a img {border:0;} /*Images in links default to having a blue border, so this could be the source of another annoying rectangle*/
</style>
The following is considered better because it allows users to still navigate by keyboard.
Here is a link explaining why:
http://people.opera.com/patrickl/experiments/keyboard/test
a:hover, a:active { outline: none; }
I have several pages and one stylesheet.
The page bodies get two classes: Their name, and the language.
For example:
<body class="contact english">
Now, in the stylesheet, I have an special rule for the german version of the "expertise" page:
body.expertise.deutsch .container
{
width: 590px;
}
In IEs 6, 7, and 8, this style gets consistently applied not only to
<body class="expertise deutsch">
but to every body element on every page.
When I remove the "body":
.expertise.deutsch .container
{
width: 590px;
}
it works as intended and applies only to "expertise deutsch".
Am I daft? Blind? Overlooking the obvious?
Is this intended behaviour, a known bug, or neither?
I can't find anything except that from IE 8, IE is supposed to handle multiple selectors.
Because it has been misunderstood: "Every body element" of course refers to separate body elements on separate pages that all include the same style sheet.
As I understand it, IE6 doesn't understand the difference between body.expertise.deutsch and body.deutsch. It only picks up the last class in the chain. Ryan Brill has more on it here.
I'm not sure if IE7 or 8 fixed it, but if they did you'll probably need to be in standards mode for it to work (easiest way is to include a strict or HTML5 doctype at the top of the document).
You may want to post your entire stylesheet and markup somewhere. My guess is you have some invalid statements elsewhere as well, and some are getting applied weirdly. You may want to validate your css and markup as well: http://jigsaw.w3.org/css-validator/.
Check this link out too. Seems like some IE gotcha in there: http://www.ryanbrill.com/archives/multiple-classes-in-ie/
I tested your example in ie7 but cannot reproduce your findings:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.container{
height: 200px;
background-color: red;
}
body.expertise.deutsch .container {
background-color: blue;
}
</style>
</head>
<body class="expertise english">
<div class="container">
</div>
</body>
</html>
Shows a red div, like it should. And when you change the second body class from english to deutsch, the div is blue.
The only browser that should have problems with this code is ie6 as it doesn't understand multiple classes in css and only applies the last.(which would colour the page blue if only the class deutsch was applied)
Not sure…
every body element on every page.
So you have multiple body elements on the page? That's not normal. It's hard to say without seeing the HTML, but one thing to keep in mind is, body.expertise.deutsch .container is not an immediate child selector. So imagine some HTML like this (I guess):
<body class="expertise esperanto">
<div class="container">I'm 590px wide</div>
<body>
<div class="container">I'm also 590px wide</div>
</body>
</body>
Because container has some parent (however remote) with class of "expertise esperanto" it picks up the style. My advice is, don't use multiple body tags in the same page. Also, if you have two .container elements and only one should pick up the style, perhaps give them different classes.
Actually the body tag has two seperate classes applied to it in your code, they are not joined as one but rather reside at the same depth.
body.expertise
body.deutsch
So your code...
body.expertise.deutsch .container
{
width: 590px;
}
Would only work if the class was:
<body class="expertise.deutsch">
I'm a bit unsure of a good work around at this time for your problem...
You may want to check if their are any other unique class identifiers you can rely on to narrow down the css.
Ultimately its more headaches then it is worth to use multiple classes per element if you can avoid it. I generally setup my pages like <body><div id="body"> </div></body> so I have a second outer container to play with for css for reasons like this.