mozilla won't obey my css!

cubdriver posted this at 14:52 — 9th December 2003.

Joined: Oct 2003

I use tables. Basically a 540 px table containing the content, and a 180 px table containing advertising and affiliate links. Here's my css stylesheet:

BODY, TABLE, TH, TD {font-family: 'verdana'; font-size:10pt}

H1 {font-family: 'arial'; font-size: 18pt; line-height: 20pt; color:#000080}

H2 {font-family: 'arial'; font-size: 14pt; line-height: 16pt; color:#000080}

H3 {font-family: 'arial'; font-size: 12pt; line-height: 14pt; color:#000080}

H4 {font-family: 'verdana; font-size: 10pt; line-height: 12pt; color:#000080}

For the life of me, I can't make Mozilla obey the instructions for the h2, h3, and h4 heads. They all come out to boldface body type (or smaller, in the case of h4).

This is my link to the stylesheet, which is contained in the portion of my code:

Have I done something wrong? Or more exactly: what am I doing wrong?

Thanks! - Dan

Suzanne posted this at 15:29 — 9th December 2003.

She has: 5,507 posts

Joined: Feb 2000

Hi, Dan, I'm into making lists today, so here you go:

1. Don't use pts for font sizing, they are print values. Use em, %, or in a pinch, px.

2. You only need quotes around font-family names that have spaces in them.

3. Try using lowercase element names in your CSS (as well as in your HTML)

4. An actual url helps a great deal more. As we can see the whole package. You may be focusing on one area while the problem exists in another.

When in doubt, validate:

HTML: http://validator.w3.org
CSS: http://jigsaw.w3.org/css-validator/

cubdriver posted this at 13:29 — 13th December 2003.

They have: 13 posts

Joined: Oct 2003

Thank you, Suzanne. I tried sizing in various ways and settled upon using pixels as giving the most consistent results across browsers (IE6, Mozilla, Opera).

I solved the problem of Mozilla's ignoring the head-sizing instructions by using classes, and by removing the font size instructions throughout. (Previously I had font size=2 in the left table and font size=1 in the right table.)

I now have two lines in the css file as follows:

div.text {font-family: verdana,arial,helvetica; font-size: 13px; color:#000000}

div.advert {font-family: verdana,arial,helvetica; font-size: 12px; color:#000000}

I call them by inserting at the beginning of the left table, and in the right table. This sizes the text much as it was before, while allowing the head tags to retain their desired sizes.

- Dan