RE: a problem with CSS and MicroSoft Internet Explorer

Jean-Claude Grégoire wrote:

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> 
> Now MS Internet Explorer (vers 6.0) doesn't understand the code:
> 
> "margin-left: auto; margin-right: auto;"
> 
> any more, and my rose table goes to the left side of the screen!...

It's a goofy idea called "Doctype Sniffing", invented and implemented by
Netscape/Mozilla (for NS6 and the Mozilla builds) and dutifully copied
by Microsoft for IE 6.0.

The idea is this: if the user has *no* DOCTYPE, or HTML 4.x
Transitional, or an earlier "official" one, then give them the old
CSS-with-bugs.  If they request HTML 4.x Strict or an "unknown" one,
give them the "new" and "bug-free" CSS.

The reason they did this was that if they all of a sudden replaced the
CSS engines, people would complain that their pages all of a sudden
looked terrible in the new bug-reduced version.  :)  So they needed a
"switch", something to say "turn on/off correct CSS".  In possibly a
glue-sniffing-induced moment of brilliance they decided to use the
DOCTYPE declaration as this "switch".  

(In your case, IE5.x and earlier didn't understand the CSS "auto" for
margins.)

Several things wrong with this idea, IMO:

1)  What has CSS got to do a document's data structure (as defined by
the DTD)?

2)  IE6's "good" CSS is still very buggy!  So what are they going to use
as a "switch" for IE7 or 8 or whenever they finally get it right?  :)

Any your choices would appear to be:

A)  Use the Transitional DTD and be stuck with buggy CSS.

B)  Change the DOCTYPE to reference your own custom DTD.  Note in this
case you could actually -- if validation is something you use -- copy
the HTML 4.0 Transitional DTD to your own location and reference it
under a different name.  In that case you'd be still really using the
Transitional DTD for markup purposes, but you'd be "fooling" the Doctype
Sniffer and thus allowing you to use good CSS.

And if you don't give a hoot about markup validation, you could actually
just change the Doctype declaration to read something like:

	<!DOCTYPE HTML "Silly Nonsense">

and the CSS you gave in your example will work correctly -- try it!  So
much for the brilliance of Doctype Sniffing...  :)

C)  Change the DOCTYPE to reference the Strict DTD.  (See below)

> Then I test my html file with Tidy.

Tidy is not really "testing" your markup (for that, you'd use a
validator[1]).  It's "Tidying" it -- making an attempt at cleaning up
markup errors and then "pretty-printing" the result.

>  Result:
> Tidy (vers 30th April 2000) Parsing "xxxxx.htm"
> "xxxxx.htm" appears to be HTML 4.01 Transitional
> no warnings or errors were found
> 
> As a result, I follow the advice of TIDY and I change the 
> text of the line #1 of my html file to this one :
> 
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Take Tidy's guess of what the file was to begin with with a grain of
salt -- it's not advice as to what it *should* be.  The DTD *you* want
your document to conform to is what is important.  Since you're using
CSS anyway, and thus don't need the presentational markup of the
Transitional DTD, I would suggest you use the Strict DTD (avoid
<center>, <font>, etc.).  If so, change your Doctype declaration to
read:

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

Then you can have clean markup *and* use (relatively :) good CSS.


[1] http://www.htmlhelp.com/tools/validator/


/Jelks

Received on Thursday, 7 March 2002 22:09:04 UTC