Help with header tags.

[Tomness]

I am slowly on my way on my way to converting my entire website into CSS, but once again I have come across another problem that I am not sure I understand.

Header tags.

I never thought that they would have been so much bother. Basicaly, I want H1 to represent bold writing, and H2 to represent bold, italic writing.

My font is Verdana and 8px and I want my headers to be the same, except with weight and style applied.

However rather than appearing like this:

Header:
The quick brown fox jumped over the lazy dog.

Sub-Header:
The quick brown fox jumped over the lazy dog.

They're like this:

Header:

The quick brown fox jumped over the lazy dog.

Sub-Header:

The quick brown fox jumped over the lazy dog.

Why are there such big spaces?

[choster]

Browsers render headings, like paragraphs and lists, with default top and bottom margins. So assuming your HTML code says

<h1>Heading:</h1> 
<p>The quick brown fox jumped over the lazy dog.</p>

<h2>Sub-Heading:</h2> 
<p>The quick brown fox jumped over the lazy dog.</p>

you can use CSS to remove the margin in several different ways, for instance

/* text style rules */ 
h1, h2, p {font: 8px Verdana, sans-serif;} 
h2 {font-style: italic;}

/* spacing rules */ 
h1, h2 {margin-bottom: 0;} 
p {margin-top: 0;}

This removes the gap between the heading and the first paragraph, but retains a line break between paragraphs (caused by the default bottom margin of <p>).

Now, in Firefox and other standards-compliant browsers, you could be much more specific and say

h1+p, h2+p {margin-top: 0;}

i.e. only zero out the top margin of paragraphs which immediately follow an <h1> or <h2>. But Internet Explorer does not recognize this syntax ("adjacent sibling selectors" in the parlance).

[Tomness]

I am not sure I follow that.

Is there any way of having the desired effect without having to edit paragraph settings?

[AltherrWeb]

The correct code is
h2 {
font-family: Verdana;
font-size: 8px;
font-style: italic;
font-weight: bold;
color: #000000;
line-height: 0pt;
}
h1 {
font-family: Verdana;
font-size: 8px;
font-style: normal;
font-weight: bold;
color: #000000;
line-height: 0px;
}

If you run into problems adjust the line-height code until it works, between 0 and 8

[choster]

Tomness, what do you mean by paragraph settings-- do you mean the markup or the CSS? What does your HTML look like?

AltherrWeb, welcome to WebmasterWorld! You can compact your code by using CSS shorthand notation; also, setting line-height to zero will almost certainly yield unintended consequences.

[Tomness]

I mean the <p> tag - I don't want to mess with that as there would be a lot of coding that would come from it.

[Tomness]

I am still having a problem.

h2 {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-style: italic;
font-weight: bold;
line-height: 8pt;
}

h1 {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
line-height: 0pt;
}

I did what you said, however, when I have my page like this.

Header 1
<p>
Header 2
text and lots of it.
<p>
Header 2
Image to compliment

It appears okay, however, the header 2 at the top, appears really close to the bottom of header 1.