Adjusting font of H1

#1 July 20th, 2005, 11:37 PM

Hello,

I am trying to use a heading tag in my pages but want to control the
look via a style sheet. I am new at CSS but here's what I have so far:

<HTML><HEAD>
<STYLE TYPE="text/css">
H1 {font-family: Arial; font-size: 12pt; color: white; text-align:
center}
</STYLE>
</HEAD>
<BODY>
<TABLE borderColor=black cellSpacing=0 cellPadding=1 width="95%"
align=center border=2>
<TR><TD bgColor=#000f99><H1>Topic Title</H1></TD></TR>
<TR><TD>Content goes here...</TD></TR>
</TABLE>
</BODY>
</HTML>

Now my problem is the height of the first row in the table... See what
happens... the cell looks like it takes the height of a standard h1
tag. Any way that anyone sees to shrink the height of the first row to
the font specified in the CSS?

I feel like I'm missing something easy here...
Thanks,
Chris

#2 July 20th, 2005, 11:37 PM

On 17 May 2004 23:14:34 -0700, Chris McGarry <mcgarry@paccorp.com> wrote:
[color=blue]
> Hello,
>
> I am trying to use a heading tag in my pages but want to control the
> look via a style sheet. I am new at CSS but here's what I have so far:[/color]
....[color=blue]
> Now my problem is the height of the first row in the table... See what
> happens... the cell looks like it takes the height of a standard h1
> tag. Any way that anyone sees to shrink the height of the first row to
> the font specified in the CSS?
>
> I feel like I'm missing something easy here...[/color]

Only happens in IE. Add this to h1 style:

margin-bottom: 0;

#3 July 20th, 2005, 11:37 PM

Neal wrote:
[color=blue]
> On 17 May 2004 23:14:34 -0700, Chris McGarry <mcgarry@paccorp.com> wrote:
>
>[color=green]
>>Hello,
>>
>>I am trying to use a heading tag in my pages but want to control the
>>look via a style sheet. I am new at CSS but here's what I have so far:[/color]
>
> ....
>[color=green]
>>Now my problem is the height of the first row in the table... See what
>>happens... the cell looks like it takes the height of a standard h1
>>tag. Any way that anyone sees to shrink the height of the first row to
>>the font specified in the CSS?
>>
>>I feel like I'm missing something easy here...[/color]
>
>
> Only happens in IE. Add this to h1 style:
>
> margin-bottom: 0;[/color]

And use em or percent for the font-size, for readability. Some IE
users may think the 12pt is to small and pt is for print.

--
/Arne

#4 July 20th, 2005, 11:37 PM

Arne <arne.luras@telia.com> wrote in message news:<Fkkqc.92785$dP1.293407@newsc.telia.net>...[color=blue]
> Neal wrote:
>[color=green]
> > On 17 May 2004 23:14:34 -0700, Chris McGarry <mcgarry@paccorp.com> wrote:
> >
> >[color=darkred]
> >>Hello,
> >>
> >>I am trying to use a heading tag in my pages but want to control the
> >>look via a style sheet. I am new at CSS but here's what I have so far:[/color]
> >
> > ....
> >[color=darkred]
> >>Now my problem is the height of the first row in the table... See what
> >>happens... the cell looks like it takes the height of a standard h1
> >>tag. Any way that anyone sees to shrink the height of the first row to
> >>the font specified in the CSS?
> >>
> >>I feel like I'm missing something easy here...[/color]
> >
> >
> > Only happens in IE. Add this to h1 style:
> >
> > margin-bottom: 0;[/color]
>
> And use em or percent for the font-size, for readability. Some IE
> users may think the 12pt is to small and pt is for print.[/color]

Nice! Thanks Neal and Arne that did the trick. One additional
question: Netscape 4 still behaves that way. I'm assuming
margin-bottom is not compatible with NS4. Is that the case? This is
not a deal killer because I think NS4 is dying but it would be nice to
have it look uniform.

Thanks,
Chris

#5 July 20th, 2005, 11:37 PM

Chris McGarry <mcgarry@paccorp.com> wrote:[color=blue]
> Nice! Thanks Neal and Arne that did the trick. One additional
> question: Netscape 4 still behaves that way. I'm assuming
> margin-bottom is not compatible with NS4. Is that the case?[/color]

When it first came out, NN 4's CSS support wasn't too bad. It was certainly
a huge improvement over MSIE 3's CSS support. But that was 7 years ago.

Just hide all your CSS from NN 4, and let it view your site as a
CSS-unaware browser would. See
http://w3development.de/css/hide_css_from_browsers/
--
Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

"Men build too many walls and not enough bridges." - Sir Isaac Newton

#6 July 20th, 2005, 11:38 PM

Darin McGrew <mcgrew@stanfordalumni.org> wrote in message news:<c8dggo$6ni$2@blue.rahul.net>...[color=blue]
> Chris McGarry <mcgarry@paccorp.com> wrote:[color=green]
> > Nice! Thanks Neal and Arne that did the trick. One additional
> > question: Netscape 4 still behaves that way. I'm assuming
> > margin-bottom is not compatible with NS4. Is that the case?[/color]
>
> When it first came out, NN 4's CSS support wasn't too bad. It was certainly
> a huge improvement over MSIE 3's CSS support. But that was 7 years ago.
>
> Just hide all your CSS from NN 4, and let it view your site as a
> CSS-unaware browser would. See
> http://w3development.de/css/hide_css_from_browsers/[/color]

Hi Darin,

Yeah I probably will just hide it like you say. Good idea and thanks!

Chris

#7 July 20th, 2005, 11:38 PM

mcgarry@paccorp.com (Chris McGarry) wrote in message news:<b26e2d58.0405172214.723f9a49@posting.google. com>...[color=blue]
> Hello,
>
> I am trying to use a heading tag in my pages but want to control the
> look via a style sheet. I am new at CSS but here's what I have so far:
>
> <HTML><HEAD>
> <STYLE TYPE="text/css">
> H1 {font-family: Arial; font-size: 12pt; color: white; text-align:
> center}
> </STYLE>
> </HEAD>
> <BODY>
> <TABLE borderColor=black cellSpacing=0 cellPadding=1 width="95%"
> align=center border=2>
> <TR><TD bgColor=#000f99><H1>Topic Title</H1></TD></TR>
> <TR><TD>Content goes here...</TD></TR>
> </TABLE>
> </BODY>
> </HTML>
>
> Now my problem is the height of the first row in the table... See what
> happens... the cell looks like it takes the height of a standard h1
> tag. Any way that anyone sees to shrink the height of the first row to
> the font specified in the CSS?[/color]

Not knocking on anything anyone else has said *and* somewhat off topic
but have you considered using the <th> tag for table headers?

:)

Lesley

What is Bytes?

Popular Articles