Cross browser CSS [Archive] - FutureQuest Community

Justin

02-28-1999, 03:32 PM

I'm having difficulties with NS and IE (what else is new?). I have a very little bit of CSS:

body {
font-family: Arial;
color: #000000;
font-size: 12px;
}

and other similar junk. I want to offer alternate fonts, but Netscape (and Opera) won't recognize any of them (not even the first one) when it is done according to W3C:

font-family: "Arial, Sans Serif";

If I don't quote them, W3C's validator has a fit and NS ignores anything after the first white space. So for now, it's just Arial, which is fine for me (and I think everyone has Arial installed anyway). I don't care about Mac users (no offence) because my site deals with Windows shareware.

I'm just wondering how this can be done to please IE and NS (not worried about Opera too much, but was surprised that it does CSS at all).

I would just use normal ordinary <font> tags, but I also have this:

td {
font-family: Arial;
color: #000000;
font-size: 12px;
}

to prevent having to constantly restate my font info. Explorer is TOO flexible. It doesn't seem to care how I format anything, it always works fine. It even carries font face info into a td, where NS and Opera won't. It's also the only one with a hover:.

I just want it to look the same in both browsersaurs. Doing it by the book breaks NS 4.08, and doing it wrong (not quoting) makes it ignore everything after the first white space. Or am I just screwed?

------------------
Justin Nelson, SFE Software
www.vdj.net (http://www.vdj.net)

[This message has been edited by Justin (edited 02-28-99).]

jenili

03-12-1999, 01:02 AM

Got it! http://www.aota.net/ubb/smile.gif
The CSS1 spec says to quote each font that contains white space. You're quoting the whole mess. Here's an example of the right way to do it.

font family: Arial, Verdana, "Comic Sans MS", Sans-Serif;

When I snarfed a copy of your top page and tried defs like the above, they worked (and fell back when a font wasn't there) in NS4.0x and IE4. And they worked in a td definition under both browsers.

jeni

Justin

03-12-1999, 01:12 AM

Awesome! I'm going to have to do that then, when I get around to redesigning http://www.aota.net/ubb/smile.gif I must have read the specification wrong, because I did read the W3C page on CSS... that's different than HTML though. I know in a FONT tag you have to quote "the whole mess" http://www.aota.net/ubb/smile.gif

Thanks, Jenili http://www.aota.net/ubb/smile.gif I think I'll do my redesign tonight anyway, so I'll definately do that, even though I'm sure everyone and their dog has Arial - but you never know http://www.aota.net/ubb/smile.gif

------------------
Justin Nelson
FutureQuest Tech Support

jenili

03-12-1999, 01:22 AM

Seems inconsistent to me too, but there ya have it. This took some digging. Reference http://www.w3.org/TR/REC-CSS1#font-family :

Font names containing whitespace should be quoted:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

Cheers,
jeni

Justin

03-12-1999, 09:09 AM

Thanks for doing the digging on that one. Problem now is I redid my site and I absolutely do not remember what font I needed so badly... Might have been Comic Sans MS but I'm not sure http://www.aota.net/ubb/smile.gif I think I just really wanted to know why it wouldn't work, and now I know.

So now I only have:

body {font-family: Arial, Verdana, Sans-Serif}

and the same for td.

Now, if only I could get Opera to have a margin of 0... I have NS and IE both covered on that, but Opera will not do it. Does all the CSS, most of the JS, and the tables properly, but it won't do animated GIF's or zero margins. I guess there aren't that many people using Opera anyway http://www.aota.net/ubb/smile.gif

---------
Justin
http://www.vdj.net