tags:

views:

481

answers:

1
+7  Q: 

Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

It seems to me that some DOCTYPE declarations in IE (6-8) may cause the browser to ignore height="100%" on tables and divs (style="height:100%")

E.g

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

Will render the DIV with the height of the text, it will not stretch. Removing the DOCTYPE declaration causes the DIV to stretch vertically as desired.

So my questions are:

  1. Why does it happen?
  2. How do you keep the DOCTYPE and still allow tables to stretch?
  3. Does / did it happen to you?
  4. Did you know about it?, is it well known?
+5  A: 

  1. Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have height: 100% and the height of the parent element is auto then 100% means auto.

  2. Generally, you don't. It screams "layout table". That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don't have a handy link at the moment as, oddly, I've never been in a position where I needed the technique.

  3. It is what browsers are supposed to do, so …

  4. Well, I am answering this question …

David Dorward  2010-01-04 06:50:25
So removing the DOCTYPE declaration is pure evil? And having footers that stick to the bottom is bad UI?
Ehrann Mehdan  2010-01-04 08:09:29
Yes, and no. You might be misinterpreting my comment about having the bottom of a **table** sticking to the bottom of the window and/or page (whichever is longer).
David Dorward  2010-01-04 08:53:26
So to understand, sticking to the bottom, is not the problem, but rather the "layout table" pattern because a) it can't be done using it (if you keep the DOCTYPE) and b) also a bad practice (http://www.hotdesign.com/seybold/). To do so one should use other techniques (e.g. DIVs and CSS purely). did I get it right?
Ehrann Mehdan  2010-01-04 09:08:16
You should use whatever markup has the semantics that best describes the content (div being the last resort, as it has no semantics, and tables only being an option if the data is tabular) with CSS.
David Dorward  2010-01-04 09:23:43

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?