CODEWITHSUNDEEP
csshtmldoctype
Roman Redz
Roman Redz

Reputation: 11

DOCTYPE stops my div from showing

I have the following code which, as expected, shows a grey rectangle in both Firefox and IE. As soon as I add a DOCTYPE (HTML 4.01 Transitional) in front, it shows only a blank page. The online validator says the document is OK. What is wrong? Should I care about DOCTYPE?

<html>
<head>
  <title>Title</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <style type="text/css">
   #gallery
    {
      width:750;
      height:548;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>

Upvotes: 1

Views: 3338

Answers (4)

BoltClock
BoltClock

Reputation: 724372

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;
}

Upvotes: 6

Dan Iveson
Dan Iveson

Reputation: 936

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.

Upvotes: 3

MacMac
MacMac

Reputation: 35351

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

width: 750px;
height: 548px;

Upvotes: 2

gblazex
gblazex

Reputation: 50127

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">
<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>​

Upvotes: 2

Related Questions