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>
&开发者_StackOverflow中文版lt;/html>
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;
}
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.
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>
The definition of height and width should be in pixels, em's or percentages, e.g:
width: 750px;
height: 548px;
加载中,请稍侯......
精彩评论