Sub headings not reacting to margins?

Hi,

Firstly there’s no such element as h9 or h10, headings they only go up to h6..

<h1><h2><h3><h4><h5><h6>

So any browser could be screwing up since you created your own element!

Yeah I became aware of this, thanks.

But it’s not the issue, is it?

Out of interest, why does it only go up to 6? Seems sort of odd.

well….how many levels of headings would ya need?

I would think that many individually styled headings would be plenty…. not to mention that within each div, you can individually style h2 as a pseudo selector

So 6 headings per div, per however many divs are in your theme….should be lotsa heading options eh??

??

But it’s not the issue, is it?

I’m not too sure tbh at a quick glance, but i’d change them first just to ensure that it doesn’t interfere.

If the headings are only ever going to be on one-line you could use line-height to vertically center them, e.g line-height:30px;

Out of interest, why does it only go up to 6? Seems sort of odd.

Well because there would never really be a need to go beyond this, if you think of how headings work:

<h1>Master Heading</h1>
    <h2>Sub-Heading 1.1</h2>
    	<h3>Sub-Sub Heading 1.1.1</h3>
            <h4>Sub-Sub-Sub Heading 1.1.1.1</h4>
            <h4>Sub-Sub-Sub Heading 1.1.1.2</h4>
        <h3>Sub-Sub Heading 1.1.2</h3>
        	<h4>Sub-Sub-Sub Heading 1.1.2.1</h4>
        	<h4>Sub-Sub-Sub Heading 1.1.2.2</h4>
    <h2>Sub-Heading 1.2</h2>
        <h3>Sub-Sub Heading 1.2.1</h3>
            <h4>Sub-Sub-Sub Heading 1.2.1.1</h4>
            <h4>Sub-Sub-Sub Heading 1.2.1.2</h4>
        <h3>Sub-Sub Heading 1.2.2</h3>
            <h4>Sub-Sub-Sub Heading 1.2.2.1</h4>
            <h4>Sub-Sub-Sub Heading 1.2.2.2</h4>

As a basic example, the document would have to be very detailed to end up needing a h7 heading.

Thanks… I think.

Can we get off the discussion of heading tags now and on to the margin? I understand enough about the headings now.

Tried changing it to <h4></h4> and still not working with the top margin.

Edit: I tested it out and margin-top and padding-top are both working if you set them to the h4.

h4{ padding-top:10px; margin-top:10px; }

Seems like the h9 was the problem.

Well it wasn’t, because I’m still having trouble.

But thanks for your help anyway.

Well it wasn’t, because I’m still having trouble.

In-fact it was and I know why, because you had created your own element (<h9>), it was treated as an in-line element, and therefore did not respond to any margin-top because inline elements do not. Whereas valid headings like <h4> are block elements by default, and thus respond to margin-top.

Few moments ago I had the same problem. You probably haven’t written ‘px’ in your margin and padding tags. E.G.

You should write:
.style {margin: 10px 0 0 -10px;}

instead of:
.style {margin: 10 0 0 -10;}

Hope that helps ?? (not only for you, but for everyone)