ansaurus

Question

Answer 1

+2 A:

Your CSS was buggy.

  width:750px;   /*  PX!! */
  height:548px;  /*  PX!! */

Then add the doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
  <title>Title</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <style type="text/css">
   #gallery
    {
      width:750px;
      height:548px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>

galambalazs 2010-07-05 14:35:01

Answer 2

+6 A:

You need to specify the units for your width and height. I assume you're going for pixels so:

#gallery
{
  width: 750px;
  height: 548px;
  background-color: #f0f0f0;
}

BoltClock 2010-07-05 14:35:12

A Doctype declaration doesn't always trigger Standards mode, see http://hsivonen.iki.fi/doctype/#handling

Marcel Korpel 2010-07-05 16:21:29

@Marcel Korpel: I rolled back my answer. Thanks for the link - completely forgot about almost standards mode!

BoltClock 2010-07-05 17:15:46

Answer 3

+2 A:

The definition of height and width should be in pixels, em's or percentages, e.g:

width: 750px;
height: 548px;

YouBook 2010-07-05 14:36:05

I prefer furlongs, personally.

Lèse majesté 2010-07-05 15:00:12

Angstroms are far more precise.

Cylon Cat 2010-07-05 17:19:02

Thanks to all of you for pointing the error! Just found it myself after discovering the CSS Validator. I was deceived by the fact that it worked without DOCTYPE, and even with DOCTYPE without the second line ("http:// etc.).PS. Next time I try Swedish inches (2.96 cm).

Roman Redz 2010-07-05 19:43:53

Answer 4

+3 A:

You haven't specified the units of measure for the height and width attributes in your CSS. Without a DOCTYPE the browser will attempt to render the page as best it can (QUIRKS mode), in your case I think it probably guessed the correct units. By adding the DOCTYPE you have told the browser to follow a very specific set of instructions when rendering the page - no guessing that you wanted pixels instead of percents.

Dan Iveson 2010-07-05 14:38:59

That makes sense, but I thought Transitional triggers quirks mode anyway in most browsers. Or this hybrid mode (Transitional) vs. quirks mode (no `DOCTYPE`).

Lèse majesté 2010-07-05 14:58:32

@Lèse. It's a bit more complicated than that. See http://hsivonen.iki.fi/doctype/#handling for a thorough explanation.

Alohci 2010-07-05 15:09:08

I don't think a Transitional DOCTYPE is the same as quirks mode i.e. it still has rules based on the Standards, where as no DOCTYPE is entirely up to the browser vendor. I think it is coincidence that some quirks match the Transitional rules.

Dan Iveson 2010-07-05 15:11:02

@Lèse and Dan – The full HTML 4.01 Transitional Doctype (`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`) triggers ‘Almost standards mode’ in most browsers. See http://hsivonen.iki.fi/doctype/#handling

Marcel Korpel 2010-07-05 16:23:28

ansaurus

tags:

views:

answers:

DOCTYPE stops my div from showing.

related questions