Getting rid of top margin on h2 tag with class in twenty ten child

  • 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:
    https://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.]

Viewing 15 replies - 1 through 15 (of 17 total)

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

    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;
}

    Thread Starter wotnow

    (@wotnow)

    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?

    Are you using #content h2?

    Thread Starter wotnow

    (@wotnow)

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

    Thread Starter wotnow

    (@wotnow)

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

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

    Thread Starter wotnow

    (@wotnow)

    sorry yes .. I am using content h2

    Thread Starter wotnow

    (@wotnow)

    Yes I tried that

    Thread Starter wotnow

    (@wotnow)

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

    Thread Starter wotnow

    (@wotnow)

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

    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.

    Thread Starter wotnow

    (@wotnow)

    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.

    Thread Starter wotnow

    (@wotnow)

    Hi guys have you forgotten me?

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

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Getting rid of top margin on h2 tag with class in twenty ten child’ is closed to new replies.