header font formatting question

[eminwf]

I have inherited a school website. I am currently removing all the tables embedded in tables embedded in tables used for formatting and going more toward CSS based code.

I am having a problem getting the header with the school name to display the way I want it.

I would like to have the font to be 24px vertically centered in an area with a height of 30.

If I just set the font to be 24px I get a huge amount of white space around my text. If I set the height in my CSS file the text is not centered vertically.

Is there any way to do what I want or will I be stuck using an img file to display my text?

CSS code:

.CssHeader

{ color: black
font-family: Arial;
font-size: 24px;
font-weight: bold;
padding-left: 5px;
height: 30;
}

HTML code:

<div class="CssHeader">
<p>My School Name</p>
</div> <!-- #header -->

[Ryan Fait]

Yeah, here's the shorthand method and the longhand method...

Longhand:

Code: Select all

.header {
    height: 30px;
    padding-left: 5px;
    color: #000;
    font-family: arial,sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
}

Shorthand:

Code: Select all

.header {
    height: 30px;
    padding: 0 0 0 5px;
    color: #000;
    font: bold 24px/30px arial,sans-serif;
}

There's a sticky in this forum with a link to an article I wrote about shorthand if you're intersted in learning more. It makes things much easier to edit

[Ryan Fait]

I forgot to mention it in my last post. When setting a font, always use the font family after it. E.g. sans-serif (like arial), serif (like times), cursive (like zapf chancery) or monospace (like courier) or fantasy (like papyrus).