WordPress.org

Ready to get started?Download WordPress

Forums

Getting rid of top margin on h2 tag with class in twenty ten child (18 posts)

  1. wotnow
    Member
    Posted 2 years ago #

    Hi I am having difficulty in getting rid of the top margin on a h2 tag I have targeted with a class. I am trying to use the firefox developers toolkit but I never seem to have much luck with it, when I hover over the h2 tag with the inspect element, it just says its the h2 tag.

    This is the html for the h2 tag on my site:
    http://www.broomeandthekimberley.com.au/2012/01/gig-guide/
    <h2><span class="red">Thursday 31st May</span></h2>

    The css in my twenty ten child theme is
    .red {
    color:#ff0000;
    font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding:14px 0 0 0;
    font-weight: 300;
    margin: 0 0 5px 0;}

    I tried putting #content h2 before it to make it more specific, but it made no difference.

    Appreciate any suggestions. Thanks

    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The CSS that is mostly causing that space is the padding in the following CSS (line 55 in style.css)

    #content h2 {
        color: #FF0000;
        font: 300 22px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
        margin: 0 0 5px;
        padding: 30px 0 0;
        text-transform: uppercase;
    }
  4. wotnow
    Member
    Posted 2 years ago #

    Thank you for your responses, I am using firebug and did see that it was #content h2 but as I am using a child theme and have written a specific class for the h2 .. following the rules of css should not my
    padding:14px 0 0 0 ... override it?

  5. esmi
    Forum Moderator
    Posted 2 years ago #

    Are you using #content h2?

  6. wotnow
    Member
    Posted 2 years ago #

    I do not want to alter the padding for h2 for the whole site only this particular area where I have applied the class

  7. wotnow
    Member
    Posted 2 years ago #

    no I am using a class and applying it to the h2

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    That probably won't work. Ids trump classes in CSS. Try using #content h2.myclass instead.

  9. wotnow
    Member
    Posted 2 years ago #

    sorry yes .. I am using content h2

  10. wotnow
    Member
    Posted 2 years ago #

    Yes I tried that

  11. wotnow
    Member
    Posted 2 years ago #

    I even tried moving the h2 with the class above the h2 in the style sheet thinking it might be a cascading issue. In firebug if I hover directly over the h2 it comes up with the h2 class but if I move it up to where all the padding is it goes to the style sheet (not child theme) h2???

  12. wotnow
    Member
    Posted 2 years ago #

    I just tried adding !important to the padding line but still no difference .. this is making me crazy.

  13. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    You have two errors in that CSS declaration:
    There should not be a space between h2 and .red
    There is a semi-colon before !important in the margin line that should not be there -- but you need it after important.

    #content h2 .red {
    	color:#ff0000;
    	font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	padding:0 0 0 0 !important;
    	font-weight: 300;
    	margin: 0 0 5px 0;!important}

    See if that solves the problem.

  14. wotnow
    Member
    Posted 2 years ago #

    Hi thanks for picking up the colon but believe me I have tried the space and the no space. If I have the no space .. my font goes bigger. If I have a space .. the font goes smaller but in both scenarios the top padding remains the same.

  15. wotnow
    Member
    Posted 2 years ago #

    Hi guys have you forgotten me?

  16. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    I actually thought about this a lot -- and it IS perplexing. But I'm wondering if the problem is that the class="red" is in span tags and not directly in the h2 tags.

    You might also be able to use negative margins -- which in effect moves that element up -- which is what you want.

    I'll look at it again and see if I see anything else. (I hate not being able to figure out things like this -- LOL -- I'm sure you do too!)

  17. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Yep, that fixes it -- I copied the html and the css pages into a local text editor -- moved the class="red" to the h2 tag and voila! I guess you can manually change those in the html editor? Hope that works.

  18. wotnow
    Member
    Posted 2 years ago #

    Oh wow you are awesome! Now that I see it I can't believe I didnt.
    Thank you soooooo much. You have made my day! Its the little things that count x

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.