Help needed - unwanted line space

[phineus]

I have the following code in my external CSS file:

H2 { font-size: 10pt; color: #000080; font-weight: lighter; font-family: verdana, arial; }
H3 { font-size: 10pt; color: #000000; font-weight: bold; font-family: verdana, arial; }

Then, within a table cell, I have the following HTML:

<H3>Telephone/Fax:</H3>
<H2>[phone]</H2>

This looks fine to me (as a CSS newbie) but the text on screen is seperated by a line space (as if it is double spaced). I want the H2 text to be placed directly beneath the H3. Has anyone any ideas? What am I doing wrong?

Thanks in advance, Phineus

[DrDoc]

Welcome to Webmaster World!

The "space" is actually a margin. You can remove the margin from both headings by adding

margin:0

to your style sheet.

On another note -- your usage of <hn> tags is not quite correct, or what they are intended for. They are meant to be used for headings, nothing else. You would be better off defining the text block as a paragraph or div (or, better yet, address), and then style it using CSS.

[stever]

Hi phineus and welcome to Webmasterworld.

Leaving aside the concept of using h tags to do what are doing here, there are two possible solutions:

Put both lines in the same h tag and then insert a <br /> to split the line. As you are not using the h tags for their semantic sense (and inverted) it shouldn't make a difference which one you choose.

Or for a CSS solution experiment with the line-height property to give the correct gap.

EG:
h2 {
line-height: 24px;
}

[DrDoc]

...or simply just specify

margin:0

;)

text on screen is seperated by a line space (as if it is double spaced). I want the H2 text to be placed directly beneath the H3

[TheDoctor]

You should also add "sans-serif" to your font family. Always end the list of fonts with a generic one. This means that, if the visitor to your site doesn't have any of the fonts you specify, the page will display more or less as you've designed it.

(Oh, and a welcome from me as well :))

[phineus]

Thank you all very much! I was impressed with the speed of your replies, and even more with the solutions. I've now inserted margin: 0; and it works fine. I've also added 'sans-serif' to the font family.

I take your point about Hx being erroneous and I will change this next time. However, I've amended all my pages now, and the script is working so I'll leave well alone.

For those of you interested the website URL is:

<snipped> (I'll upload revision tonight)

(I might regret this - my website might not work in Netscape, or I might be inundated with well meaning folks pointing out all my mistakes)

Thanks once again! Phineus

[edited by: DrDoc at 6:25 pm (utc) on June 8, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]

[TheDoctor]

my website might not work in Netscape

And an additional tip: test in Netscape/Mozilla first. Then, once you've got it working there, try it out in IE, making any adjustments necessary.

The reason for doing it this way around is that Mozilla follows W3C standards and IE doesn't. It's easier to create your style sheet according to standards and then change it, than it is to create a non-standard style sheet and try to amend that.

Creating a style sheet that works in Mozilla and then moving on to IE is like scrambling an egg. Easy once you've been shown how. Creating a style sheet for IE and then amending it so that it works in Mozilla is like unscrambling an egg. That's a lot less easy ;)

[phineus]

Thanks for the tip Doc.

Is there a way to test my website and/or CSS in Netscape and Mozilla without having to install those browsers on my PC?

[DrDoc]

Is there a way to test my website and/or CSS in Netscape and Mozilla without having to install those browsers on my PC?

Even though there are ways, you probably want to install the browsers instead ;)