PDA

View Full Version : Override CSS with Class



billatl
Feb 15th, 2010, 06:47 PM
Hello,

I'm trying to understand why my class isn't overriding some of the default values in my CSS. For most images I want a border of 0, but for a specific class - I want a large grey border.

The code below will not show the border so long as it's in the a:link. Why isn't it overriding the default?


<style>
img, a:link img, a:visited img {border:0}
.reviewhero {float: left; margin: 0 10px 10px 10px; border: solid 4px #999999; width:530px; height:286; }
</style>

<body>
<a href="home.html"><img class="reviewhero" src="/images/image1.jpg" /></a>

I've also tried placing it on the a link with "a.reviewhero img {..." but the image is not scaled to size properly.

Excavator
Feb 15th, 2010, 07:17 PM
Hello billatl,
Does it scale better this way?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
img, a:link img, a:visited img {border:0}
.reviewhero {
float: left;
margin: 0 10px 10px 10px;
border: solid 4px #999999;
background: #0f0;
}
</style>
</head>
<body>
<a class="reviewhero" href="home.html"><img src="/images/image1.jpg" alt="description" width="530" height="286" /></a>
</body>
</html>

Or is the scaling problem you're seeing caused by this error: height:286; (px missing)

billatl
Feb 16th, 2010, 12:43 AM
Thanks for catching the missing "px" - I corrected this but it did not fix the issue. Setting the width/height within the img tag as you have it works (it was how I had it originally) - but I would still like to learn why the dimensions aren't working as I have them.

Since all of the images will be the same size, I'd like to put the w/h in the class instead of writing them several times.

In my original code, the <a.. box (as indicated by the border) is correctly scaled to 530x286 - however the image protrudes outside of the borders (it displays at it's original size - 720x480).

By definition, shouldn't the class overrule the default properties?

abduraooft
Feb 16th, 2010, 08:00 AM
It looks like the pseudo takes the same specificity value as that of a class selector. You'd need to use either

img, a img{border:0}
.reviewhero {float: left; margin: 0 10px 10px 10px;
border: solid 4px #999999; width:530px; height:286px; }
Or

img, a:link img, a:visited img {border:0}
a img.reviewhero {float: left; margin: 0 10px 10px 10px;
border: solid 4px #999999; width:530px; height:286px; }

billatl
Feb 16th, 2010, 08:24 AM
Thanks for the reply, it helps but I'm really baffled by what's causing the interference. When I create a new HTML file and try your examples locally - both work fine. I add the code to my full CSS file and it doesn't work.

So it seems something else is interfering here - I'm just lost on what. The doc types (local and server) are the same... Guess I'll keep looking.

_Aerospace_Eng_
Feb 16th, 2010, 01:26 PM
You just need to post more of your code. You've post only snippets and clearly it isn't all of your CSS.

abduraooft
Feb 16th, 2010, 01:45 PM
You just need to post more of your code. You've post only snippets and clearly it isn't all of your CSS.
You may replicate the issue by making a sample page with the code posted by OP (after changing the src to one at your end). I'd the same issue a while ago and crawled through http://htmldog.com/guides/cssadvanced/specificity/ and http://www.w3.org/TR/CSS2/cascade.html#specificity with no luck.



count the number of other attributes and pseudo-classes in the selector (= c)
Umm... I think the value is getting calculated as

a:link img, a:visited img {}/*a=0, b=0,c=1,d=2 */

abduraooft
Feb 16th, 2010, 03:01 PM
Oh.. well, can you predict(honestly ;)) the output of

.green a.red{
color:red;
}
span.green.red{
color:green;
}

<span class="green red"><a class="red" href="#">text</a></span> by reading the rules at w3 ? :)

_Aerospace_Eng_
Feb 16th, 2010, 04:06 PM
Oh.. well, can you predict(honestly ;)) the output of

.green a.red{
color:red;
}
span.green.red{
color:green;
}

<span class="green red"><a class="red" href="#">text</a></span> by reading the rules at w3 ? :)

Is that question geared towards me?

abduraooft
Feb 16th, 2010, 04:19 PM
Is that question geared towards me? Wasn't specifically to you, but I couldn't find how that text inside anchor gets the color red. Could you please tell me the rule(of specificity) applied there?

_Aerospace_Eng_
Feb 16th, 2010, 04:27 PM
Link colors always get precedence of the color of its parent element. In this case you have the class in the anchor element which means you got more specific with what you wanted to style. Using span.green.red will only cover any text but not the links.

This is why you always have to apply CSS directly to the anchor elements or they stay that default blue color.

abduraooft
Feb 16th, 2010, 04:43 PM
Thanks, but the same happens for the following too.

.green span.red{
color:red;
}
span.green.red{
color:green;
}

<span class="green red"><span class="red" >text</span></span>

billatl
Feb 16th, 2010, 06:18 PM
My apologies, turns out abduraooft's code works just fine on my server - the issue was I needed to clear my cache. I don't usually have to clear my cache to see CSS changes - so that's why it didn't occur to me. When I was going to upload my CSS here - I cleared my cache and whola - it worked as it did locally.

Thanks again.

_Aerospace_Eng_
Feb 16th, 2010, 10:45 PM
Thanks, but the same happens for the following too.

.green span.red{
color:red;
}
span.green.red{
color:green;
}

<span class="green red"><span class="red" >text</span></span>

Its still the same concept. You are getting more specific with the how the code is structured. You are going further into the DOM.