Browser Compatability

[chestertb]

I'm still getting my head around the whole CSS thing, and started "translating" one of our corporate pages.

I started to get some odd results, and also some compatability issues between the latest Netscape and IE browsers. I thought one of the arguments for going with CSS was that these issues went away.

I have set up a demo page at http://www.sapphiremarine.com/style_thing.htm

There you will find the original, and the new class driven CSS version, with the style sheet.

Can anyone tell me why the font size is smaller in Netscape, and how the CSS can be written to avoid that?

CTB

[pyro]

In your inline content, you use <font size="1"> while in your external you use font-size: xx-small; They aren't the same...

[toicontien]

The bright side of your new design is that you can ditch the font tags all together. You haven't run into this problem yet, but without a correct doctype tag and character set declaration meta tag, browsers released 2000 and after are working in Quirks mode. You'll get much more consistent results working in Standards Compliance mode.

Head to http://www.w3schools.com/ and apply the correct doctype tag and use a character set declaration meta tag, like the one below:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Internet Explorer 6 has one notable bug when working in Quirks mode: it gets the CSS box model wrong. IE6 absorbs padding, margins and borders into the width specified in a style sheet. The official spec says that the total width of an element is the width + padding + margins + borders.

When working in standards compliance mode, IE6 gets the box model correct. I believe Netscape/Mozilla and Opera get the box model correct when working in standards mode and quirks mode.

You can validate your markup at http://validator.w3.org/. I always start by validating the markup and then making sure I write standards compliant CSS. I test the standardized markup and CSS in a real browser like Mozilla or Opera 7, and then view it in IE. Things will look a little odd in IE, but then I adjust, and sometimes hack, the stylesheets to get them to work.

That's the process I've heard many developers use when they go to CSS-based designs, and it works best for me.

If you're just getting into CSS designs, head to http://www.alistapart.com/ to read stories that tackle specific problems and give cross-browser solutions for them. Most every article is a good read.

[chestertb]

Thanks guys.

Pyro, I tried the fontsize:"1" and even fontsize:1 but neither seemed to work. Is there a CSS equivalent that I've missed?

And Greg, fabulous resources and advice. Thanks. Really appreciate you taking the time to write such a detailed note.

I was sort of hoping FrontPage (yes, I know, bloatware, ptooeeyy) would put the doc type header in there, but sadly it doesn't. More stuff to learn.

Cheers.

CTB

[pyro]

You can find info about setting the font size with CSS at http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props.