Declaring Document Type at Beginning Changes Look of Header

StackOverflow https://stackoverflow.com/questions/23120166

  •  04-07-2023
  •  | 
  •  

Вопрос

So, I have quite the strange problem here. I started off editing an already made webpage, and the DOCTYPE was not at the beginning, it was a few lines down, actually after the header.

This is my beginning HTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LymeMD :: Lyme Disease Research Foundation</title>
<link rel="stylesheet" type="text/css" href="stylenew1.css" />

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

<body>
<div id="Header">
<div id="logowrap">
<h1 class="fltlft"><a class="logo" href="index.php" title="LymeMD - Lyme Disease Research 
Foundation">LymeMD - Lyme Disease Research Foundation</a></h1>

And here is what I think is the relevant CSS:

#header {
background-image:url(images/headerbg.jpg);
background-repeat:repeat-x;
width: 100%;
margin: 0 auto;
}
.logo {
background: url(images/logo3.png) no-repeat 0 0;
width: 1040px;
height: 120px;
display: block;
text-indent: -9999px;
position: relative;
}
#logowrap {
width: 1040px;
margin: 0 auto;
}

When I move the !DOCTYPE to before the header, I lose the headerbg.jpg background-image contained within the #header.

Here is my active webpage for reference if need be: http://www.lymemd.org/indexmm4.php

Это было полезно?

Решение

The case is wrong for the id Header. It is upper for the html and lower for the css. They need to agree.

Change to 

<div id="header">

From sitepoint - CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects, except when it comes to certain attribute values, like the id and class attributes.

There must be something about leaving off the doctype which makes it case insensitive. Browsers from the version 4 era treated class and id values as being case insensitive. There may be some compatibility setting going on with missing doctype - I don't know for sure.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top