CSS Font-Family No Longer Recognized With Doctype Change 1

xyzuser · Jan 25, 2009

I have a CSS:

Code:

.bigletter {
font-family:"Typo Upright BT, Times New Roman";
font-size:45px;
font-weight:normal;
line-height:80%;
letter-spacing:-6px;
}

I use it here:

Code:

 <p class=Normal><span class="bigletter">T</span>his is the start of a new chapter.</p>

It works fine with doctype I have been using:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I was given code to create menus - the code uses .ul .li . I was given the following doctype to use for this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

When I put that in, the font-family from the CSS stopped being recognized. Everything else in the CSS is still recognized.

I changed the doctype from XHTML to HTML strict and it made no difference. Then I tried this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

The font-family was still being ignored while the menu code continued to work correctly. Then I tried dropping the http

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Now the CSS font-family works once again - but the menu code fails to work properly. So the problem is this http that is at the end of the docutype. Why is the presence of this preventing font-family from being recognized while the rest of the CSS is recognized? (And why is its absence breaking the menu code?)

I have tried changing the fonts specified in the font-family but that has made no difference. I have also tried removing the class=normal from the <p> and that has not made a difference, either.

Vragabond · Jan 25, 2009

Doctype you've been using is incomplete. As such, it serves no purpose, as browsers revert to quirks mode, when you supply them with an incomplete doctype. Adding the http part, makes the doctype complete and makes the browsers render in (near) standards mode.

The menu you have is designed to be rendered in standards mode (which is the only mode where you can expect the code to work cross-browser) and thus it fails in quirks mode. That explains one part of your problem.

The other one boils down to a mistake you've made. In CSS, you use quotes very sparingly. Indeed, the only time they're needed is when you're trying to use a font that has more than one word in its name. In that case you wrap quotes around that font's name.

Your code says the following: font-family: "Typo Upright BT, Times New Roman". This is interpreted that you only allow one type of font and that font is Typo Upright BT Times New Roman. Since there is no such font installed on any computer, the font-family declaration fails.

In quirks mode the browser figures out you made a mistake and tries to guess what you meant. Apparently in your case, it guesses correctly. In standards mode it does not guess, it simply follows the guidelines of the standards and tries to look for the non-existing name.

Changing your font-family declaration would solve your problem (make sure you keep the complete doctype):

Code:

font-family: "Typo Upright BT", "Times New Roman", serif;

Note that I added a generic type at the end. If the first two fonts are not found on the client machine, any serif font will be used.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

xyzuser · Jan 25, 2009

Thank you vragabond. Now it all works. This is such a big help (I wonder if I can give you two stars for this? You deserve it!)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Font-Family No Longer Recognized With Doctype Change 1

xyzuser

Technical User

Vragabond

Programmer

xyzuser

Technical User

Similar threads

Part and Inventory Search

Sponsor