Over-riding a bunch of inherited styles?

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?!

Thanks,

Debbie

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.

Ralph,

Here are snippets of my actual HTML and Styles…


#boxMemberProfile h2{
	/* Next two lines needed or IE6&7 won't show negative margins properly. */
	position: relative;
	zoom: 1.0;
	margin: 0 -15px 0 -15px;
	padding: 0.4em 15px 0.2em 15px;
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}


/* NEW */
#recentPosts h2{
	padding: 1.5em 0 0 0;
	font-size: 1.3em;
}


	<div id="boxMemberProfile">
		<h2>My Profile</h2>


/* 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?! :-/

Thanks,

Debbie

Is “boxUserDetails” inside “boxMemberProfile”?

Yes.

Debbie

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).

Debbie

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).

They are fo any kind of styling, once or more.

Ralph,

I was able to figure out what the > was called, i.e. a “Child Selector”.

According to SitePoint, it seems pretty unreliable for Internet Explorer.

I am not sure that I totally understand what they are saying triggers the IE bug, though.

Are you sure that would be safe to use?

And as far as my CSS. All I can say is that I have tried my best… (I know I have LOTS of “Spring Cleaning” to do!!) :blush:

Debbie

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) .

Are we at a point where we - as Web Developers - should tell IE6 and IE6 users to “catch up with the times or take a hike”?! :blush:

Thanks,

Debbie

I want to double check something. Debbie, based on your #3 and #5 posts, is it correct that this is your HTML structure?

<div id="boxMemberProfile">
		<h2>My Profile</h2>

		<div id="boxUserDetails">
			<div id='recentPosts'>
				<h2>Recent Posts by $user</h2>

Because if that’s the case, I think the real answer is that the “Recent Posts” heading shouldn’t be an H2 at all. It should be an H3.

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.

Good point. :slight_smile:

Since last night, I have changed things around.

I created a new “Recent Posts” tab and put the Recent Posts underneath like this…


<div id="boxMemberProfile">
	<h2>My Profile</h2>
	<div id="boxUserSummary">
	<div id="boxUserDetails">
		<ul id="profileMenu">
		<div id="latestPosts">
			<table cellspacing="1" border="1">

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!!)

Debbie

Yes, what I had last night was a little hokey, but it should be fixed now.

Thanks,

Debbie

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

#boxUserDetails ul { ... }