SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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...

    Code:
    #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;
    }
    Code:
    /* NEW */
    #recentPosts h2{
    	padding: 1.5em 0 0 0;
    	font-size: 1.3em;
    }

    HTML Code:
    	<div id="boxMemberProfile">
    		<h2>My Profile</h2>
    HTML Code:
    /* 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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Is "boxUserDetails" inside "boxMemberProfile"?

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is "boxUserDetails" inside "boxMemberProfile"?
    Yes.


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Yes.
    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

    Code:
    #boxMemberProfile h2{
    to

    Code:
    #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.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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

    Code:
    #boxMemberProfile h2{
    to

    Code:
    #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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    But that is exactly what I am doing (as seen above).
    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.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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!!)


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,829
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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?
    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) .

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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"?!

    Thanks,


    Debbie

  12. #12
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,150
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    I want to double check something. Debbie, based on your #3 and #5 posts, is it correct that this is your HTML structure?

    HTML Code:
    <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.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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"?!
    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.


    Quote Originally Posted by Jeff Mott View Post
    I think the real answer is that the "Recent Posts" heading shouldn't be an H2 at all. It should be an H3.
    Good point.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    I want to double check something. Debbie, based on your #3 and #5 posts, is it correct that this is your HTML structure?

    HTML Code:
    <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.
    Since last night, I have changed things around.

    I created a new "Recent Posts" tab and put the Recent Posts underneath like this...
    HTML Code:
    <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

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    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.
    Yes, what I had last night was a little hokey, but it should be fixed now.

    Thanks,


    Debbie

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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

    Code:
    #boxUserDetails ul { ... }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •