Formatting H1 tag

[Si]

I'm formatting my Header tags (<h1>, <h2>) and have come across a problem with the linespacing. I don't want to use the double carriage return in the header tags, just a single carriage return.

Does anyone know how to do this?

My current H1 modifications are as follows:

h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 21px;
color: #CCCCCC;
}

Thanks for any help...

[Paul O'B]

Hi,
Try adding margin: 0px; in your stylesheet.

Paul

[Si]

Nice one matey - works a treat!

Thanks...

[redux]

i would add

margin-bottom: -1em;

to your style...this should work regardless of what size the rest of the text is

[redux]

Hi,
Try adding margin: 0px; in your stylesheet.

Paul

hmm...strangely enough that doesn't work for me...i had to resort to what i wrote in my previous reply to get the margin to change.

[Si]

Both work fine for me - possibly cos I'm using IE6????

[Si]

Sorry, I lied!!

The version using the "em" factor managed to make the proceeding text completely overlap the header. Mental!!!

Back to "margin: 0px;"....

[redux]

is the text that follows your header in a paragraph, simply text not enclosed in any structural tag ? i tested the em solution with

<h1>header</h1>
<p>and some copy</p>

Edit:

ah yes, i tested it without the paragraph, and indeed they overlap. semantically, the text following your header should be in some kind of "container" (usually a p tag)

[DougBTX]

I try to play safe with this sort of thing. The -1em solution works if the paragraph <p> has a margin-top: 1em. I think it's the default in most browsers though, which is why it works most of the time.

If you specify the margin-top of the paragraph, it takes out one potential browser compatability bug.

You want no space, so try this:

h1 { margin-bottom: 0; }
p { margin-top: 0; margin-bottom: 1em; }

hth,
Douglas