Is there an easy way to over-ride a bunch of (apparently) inherited styles?
I am adding an <h2> in my Member Profile - which is way to complicated to post here - and it is picking up a whole bunch of styles like rounded corners, gray background, white font, etc that I do not want.
I’m looking in FireBug now, and am not sure where they are coming from, but regardless I don’t want any of them?! (I just want a simply H2…)
Generally speaking, is there a way to maybe add an ID or something to “hide” my <h2> from all of these styles, and then that way I don’t have to have a gigantic new style UNDOING everything that I don’t want?!
If all those styles apply to an h2 in a particular situation (such as in a particular box with a class of its own, then change all those h2 styles to apply to h2s just in that situation. E.g. instead of h2 {styles} change to .specialbox h2 {styles}. Then your regular h2s won’t be affected.
/* NEW */
<div id="boxUserDetails">
<div id='recentPosts'>
<h2>Recent Posts by $user</h2>
I thought what I had above would create two unique H2 styles?
Can you please relate what you are saying to what I have above?
As it stands now second, inner H2 has a grey background, white text and others things I don’t want.
And as I mentioned before, it would be a pain to have to negate the large first style I listed above just to get things to a more default looking H2?! :-/
Well then, I’s suggest you reorganize things. Wrap a div just around the section that includes the first h2 with a class and apply the styles to that h2 only.
Otherwise, try changing
#boxMemberProfile h2{
to
#boxMemberProfile > h2{
I’d also suggest you stop using so many ids. I only use classes now, as ids are like using a sledgehammer to knock in a nail. They are best left fo JS hooks and on page links.
But that is exactly what I am doing (as seen above).
And I don’t understand why my inner H2 would pick up the outer H2’s styles when each H2 is behind an ID?
Otherwise, try changing
#boxMemberProfile h2{
to
#boxMemberProfile > h2{
What will that do?
And is it safe (i.e. supported by all browsers)?
I’d also suggest you stop using so many ids. I only use classes now, as ids are like using a sledgehammer to knock in a nail. They are best left fo JS hooks and on page links.
Why do you say that?
Each of my ID’s is unique so what else would you want to use?
Classes are supposed to be used when you have styles that are used in several places (e.g. .importantConcept).
No, you are wrapping both h2s inside the same div.
And I don’t understand why my inner H2 would pick up the outer H2’s styles when each H2 is behind an ID?
You’ve forgotten what CSS means, then. Cascading styles … That’s what inheritance is all about. Your style apply to any h2 inside the boxMemberProfile div.
What will that do?
And is it safe (i.e. supported by all browsers)?
It will just apply the styles to an h2 that’s a direct child of boxMemberProfile.
Each of my ID’s is unique so what else would you want to use?
ids are much harder to override than classes.
Classes are supposed to be used when you have styles that are used in several places (e.g. .importantConcept).
Yes, it’s fine to use as that bug is very specific and you are unlikely to trip it in normal use and only affects IE7 anyway (the child selector is not supported in IE6 though at all) .
Absolutely, and most people now are doing that and/or ignoring IE6. (Me, I even ignore IE7 now.) MS has also decided to make IE auto update to the latest version. Not sure how it works in practice, of if it’s actually happening, but it should help bury IE7 and 7.
Ralph’s suggestion above did solve the problem when I had things like you correctly guessed above. (I just wasn’t sure about the IE6 support issue, since I don’t want my code to blow up under any situations!!)
Just an observation, but it looks like you have more divs and ids than you need. E.g. if “profileMenu” is your only ul in that div, you can style it with