Doctypes, Boxes, and the Width Property

Forum Moderators: not2easy

Message Too Old, No Replies

Doctypes, Boxes, and the Width Property

How doctypes affect IE6 rendering of width, padding, margin.

dewde

1:07 pm on Apr 28, 2003 (gmt 0)

Folks:

I am trying to develop a .Net application in IE6 without bastardizing the presentation with traditional table-based positioning. I am trying to implement a mostly relative positioned and liquid design (aren't we all?), and I am experiencing anguish.

When I set the doctype to XHTML1 from HTML 4.01, I lose the fixed-widths of my spans and divs? I know this is because of how IE6 implements the box model per doctype, but can anyone tell me why? Does XHTML 1 just make all boxes ignore the width property? It also seems box margins and paddings have become quirky (do not work).

This may all be a result of poor implementation on my part, but wondering if anyone can shed any light.

Chris

[edited by: dewde at 2:46 pm (utc) on April 28, 2003]

universalis

1:23 pm on Apr 28, 2003 (gmt 0)

You're getting this problem due to IE6 going in to Standards mode for the XHTML doctype. I assume you were using an incomplete HTML4 doctype (with no URL), which would have triggered the "bugwards compatibility" mode. You should be forcing standards mode wherever possible, as it is more forwards-compatible. To sort out the div widths, do a search for the "box model hack".

I've recently gone rather anti-XHTML, but you can get standards mode in HTML 4.01 with these full doctypes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

Or, if you must, with:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

grahamstewart

1:28 pm on Apr 28, 2003 (gmt 0)

Transitional doctypes will still demonstrate the dodgy IE box model - use the strict doctype for a true standards compliant render.

See AListApart: using the DOCTYPE [alistapart.com] for more info.