PDA

View Full Version : CSS - H1 tag and paragraph spacing problem


Richard
03-13-2004, 12:46 AM
This is my CSS:

H1 {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; margin-bottom: 0px
}
P {
PADDING-top: 0px; margin-top: 0px
}

The margin and padding parts are supposed to close the gap between a H1 title and the following paragraph.

The small space has closed. But there is still a big space in between, the same size that a '<br><br>' would create.

This is the html on my actual page:

<h1>The title</h1><br>
<p align="justify"><span class="xzy">Blah blah blah</span></p>

Which on the page shows this:

The title

Blah blah blah

I want it to look like this, so there is no space at all:

The title
Blah blah blah

How?

Nightfire
03-13-2004, 01:59 AM
Well for starters you don't need a <br> after a heading tag.

Your css should also be in lowercase
I guess you're just showing an example but if you're not, then there's no need for the span tags, just put the class into that paragraph tag

Apart from that, I see no reason why it shouldn't work

mindlessLemming
03-13-2004, 02:09 AM
After you've removed the <br />, set the <h1>'s margin to zero, then declare your bottom margin:
h1 {margin:0; margin-bottom:.5em;}

This will remove the browser's default margin first.

DougBTX
03-13-2004, 01:14 PM
h1, p {
margin: 0; padding: 0;
line-height: 1em; font-size: 1em;
}

<h1>Header</h1>
<p>Para</p>

Will remove all the space.

Douglas

Richard
03-13-2004, 02:58 PM
Ok, thanks.

It works in IE 6.

But, I have just viewed the page in Netscape 7, and the styling for the h1 tag hasn't worked at all. It's just the default, black, bold, huge text. The huge spaces are there too. How can I get it to work in NS ?

Tails
03-14-2004, 06:19 PM
Your example, minus the <br> tag works fine in IE6 and Mozilla 1.7a. The only thing I can think of is that it's a bug in Netscape that the Mozilla Project fixed.

pepsi_max2k
03-14-2004, 06:29 PM
H1 {font-family:verdana; font-size:12px; text-align:left; font-weight:normal; margin:0; padding:0;}

you can change the font, size and alignment to whatever you like, but the rest'll give you exactly the same text you'd get if you had normal size 12 verdana text, no extra paragraphs or breaks anywhere. ie:

text<BR>
text
<h1>header</h1>
text<BR>
text

would give you...

text
text
header
text
text

cept in netscape 7.1 where it looks like

text
text

header
text
text

that's a paragraph above the h1 tag, but i can live with that.