The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
css inheritance problem
Discuss css inheritance problem in the CSS Help forum on Dev Shed. css inheritance problem Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

April 16th, 2003, 11:19 AM
|
|
Registered User
|
|
Join Date: Apr 2003
Posts: 26
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
css inheritance problem
I have a div that is given a bottom border through the ID tag.. I want to override the border with a class.
I think the problem is something to do with how I am naming the nobdr class in my css.
Thanks for any help!
Reid
HTML HERE:
PHP Code:
<div id="primary" class="nobdr">
<a href="#">Checking</a>
<a href="#">Savings & Certificates</a>
<a href="#">Credit Cards</a>
<a href="#" class="navA">Personal Loans</a>
</div>
CSS HERE:
#primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}
#primary .nobdr{ border-bottom: none;}
|

April 16th, 2003, 04:20 PM
|
|
Junior Member
|
|
Join Date: Apr 2003
Posts: 6
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
You need to remove the space between "#primary .nobdr". It should be...
#primary.nobdr{ border-bottom: none;}
Having a space between them means the rule only applies to elements with the classname "nobdr" that are children of an element with the id "primary".
|

April 16th, 2003, 05:02 PM
|
|
Registered User
|
|
Join Date: Apr 2003
Posts: 26
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
thanks
Got it... thanks.
|

April 16th, 2003, 06:52 PM
|
 |
|<.+#f@#+.&.|
|
|
Join Date: Mar 2002
Location: norway
|
|
|
may i ask why you want to overide the id?
as id is supossed to be unique to one element,
there wouldn't be much sense to overide it with a class,
simply just have
#primary{ border-bottom:none; width:197px; padding: 0px 0px 20px 15px;}
|

April 16th, 2003, 07:07 PM
|
|
Junior Member
|
|
Join Date: Apr 2003
Posts: 6
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
excellent point.
|

April 16th, 2003, 08:36 PM
|
|
Contributing User
|
|
Join Date: Feb 2001
Location: USA
Posts: 830
Time spent in forums: 3 h 17 m 56 sec
Reputation Power: 13
|
|
|
There are situations where that could be useful. He may have only showed excerpts from his style sheets.
P.S. What he originally had was a descendent selector, not a child selector. It might seem like a minor distinction, but I can't tell you how often I curse IE 5 Win for not supporting child selectors.
|

April 17th, 2003, 09:00 AM
|
|
Registered User
|
|
Join Date: Apr 2003
Posts: 26
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
explained
The reason is that I wanted the id to still inherit all of the properties of primary. Also, primary has child attributes that I still wanted the div to inherit.
More of my css below:
#primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}
#primary A{color: #fff; text-decoration: none; font-weight: bold; display:block; width:150px; margin: 15px 0px 0px 0px;}
#primary A:hover{color: #ff6;text-decoration: underline; font-weight: bold;}
/*tertiary nav*/
#primary a.navA {color: #ff6;}
#tNav {padding: 0px; margin: 0px 0px 0px 15px;}
#tNav A{font-size: 10px; margin:0px;}
#primary.nobdr{ border-bottom: none;}
|

April 17th, 2003, 10:56 AM
|
 |
|<.+#f@#+.&.|
|
|
Join Date: Mar 2002
Location: norway
|
|
but this doesn't chang anything
there isn't a point with that class,
to overrule the id, when you just can have it in the id,
the id can just be used once in a document, like on one div tag,
http://www.w3.org/TR/html401/struct/global.html#adef-id
if it had been the other way around i could have understood,
if you had a class .primary which you assign to several elements,
then used a id #nobr to get rid of the border to one of the elements ,
|

April 17th, 2003, 01:54 PM
|
|
Registered User
|
|
Join Date: Apr 2003
Posts: 26
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
bigger picture
Here is some more information:
I have a css file that is being used across many templates within a site. On each of the templates I am using a div with the id="primary". On some pages I want to override one of the properties the id is inheriting (the bottom border), but I want all the other properties for primary and it's child selectors to apply.
If I just removed the bottom border from the id, all of the other pages that are using the id would also be affected. My choice then is to either override(as i chose to do with the class) or create another unique ID and then duplicate all of the child stuff.
--
Reid
|

April 17th, 2003, 05:31 PM
|
|
Contributing User
|
|
Join Date: Feb 2001
Location: USA
Posts: 830
Time spent in forums: 3 h 17 m 56 sec
Reputation Power: 13
|
|
Actally, reid, on the pages where you want to override that particular property setting, you can just use an internal style sheet and set that property on your ID, e.g.
Code:
/* in internal style sheet */
#primary {
border-bottom: none;
}
|

April 17th, 2003, 09:34 PM
|
|
Registered User
|
|
Join Date: Apr 2003
Posts: 26
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
understood
Hmm...
My solution...
adds this HTML
class="nobdr"
and this CSS
#primary.nobdr{ border-bottom: none;}
Yours would add this:
<style type="text/css">
#primary { border-bottom: none;}
</style>
Am I missing something? I'm curious why should I use the internal style sheet over my solution. Don't they both accomplish the same thing with around the same amount of overhead?
Reid
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|