<!DOCTYPE html> breaking my page! Why?
Question
Problem: images not showing up until I resize the browser, or else only a fraction of each image showing; the outcome is random for each time the page is reloaded. I could get 10 different results reloading the page 10 times.
After resizing the window, the page would show up exactly like it should look, even when sizing the page back to the original size, it would continue working.
After having trouble with a very simple webpage,
js fiddle here (working just fine):
I found that the one change that I could make to my page's source was removing
<!DOCTYPE html>
no other changes fixed the problem, but removing that tag fixes it, 100%. Why Is this??
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Title</title>
<meta name="keywords">
<meta name="description" content="The GameMode Hub is a Minecraft Server Network bringing together all of Minecraft's best and brightest server owners to present the gaming community with the largest collection of Minecraft Servers in the world!">
<meta name="author" content="Jonathan Todd">
</head>
<body>
<div class="wrap">
<!-- begin wrap :: this will keep all of the stuff neat and in one place -->
<div class="login-screen bg-dirt">
<!-- begin login screen, background dirt :: sets up a background for the login and styles it with a dirt tile and holds all login elements -->
</div>
<!-- end login screen, background dirt -->
<div class="welcome-screen">
<!-- begin welcome screen :: this will hold the elements within the welcome screen, mainly just a title and the two moving wall pieces -->
<div class="wall-left">
<!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
<img src="http://www.new.gamemode.org/images/wall_left.png">
</div>
<!-- end wall left -->
<div class="wall-right">
<!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
<img src="http://www.new.gamemode.org/images/wall_right.png">
</div>
<!-- end wall right -->
<img class="welcome-logo" src="http://www.new.gamemode.org/images/logo.png">
<img class="welcome-shadows" src="http://www.new.gamemode.org/images/shadows_fast.png">
</div>
<!-- end welcome screen -->
</div>
<!-- end wrap -->
</body>
</html>
CSS:
/* Style Setup */
body, div {
margin:0;
padding:0;
-webkit-perspective:6500;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, th, var {
font-style:normal;
font-weight:normal;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
}
.wrap, html {
width:100%;
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
/* Style Start */
.bg-dirt {
}
.login-screen {
z-index:0;
}
.welcome-screen {
z-index:1;
width:100%;
height:100%;
}
.wall-left {
position:absolute;
z-index:2;
height:100%;
left:0px;
}
.wall-right {
position:absolute;
z-index:3;
height:100%;
right:0px;
}
.welcome-logo {
position:absolute;
z-index:4;
margin-left:auto;
margin-right:auto;
}
.welcome-shadows {
position:absolute;
z-index:5;
width:100%;
}
2 answers
solution1
0 2013-09-24 17:08:39
I'm not sure why is this happening, but:
- is not a tag. It says your document is HTML (version 5). You should not remove it unless you know what are you doing. Without it browsers will think you are working in html4, and strange thinks could happen if you still use html 5 thinks.
Try writing more xml-like code. For example, i try your code closing img tags and it works for me (latest chrome @ mac os):
<div class="wall-left"> <!-- begin wall left :: must I explain this? It opens and closes with the other wall --> <img src="http://www.new.gamemode.org/images/wall_left.png" /> </div> <!-- end wall left --> <div class="wall-right"> <!-- begin wall-right :: must I explain this? It opens and closes with the other wall --> <img src="http://www.new.gamemode.org/images/wall_right.png" /> </div>
(Please note that img tag closes with />)
solution2
-1 2013-09-24 17:08:28
Shame on you for even writing such a title to a question.
html,body { height: 100%; width: 100%; }
EDIT
As to why removing the doctype makes it work, I honestly don't know. However, your body element has no height on it and therefore could potentially end up hiding things that overflow it's bounds (which are effectively width: 100%; height: 0; ) and indeed it does this, although at strange places, which is why your image is sometimes cutoff.
I see that you already have the html height set to 100%, but you also need to set the body height to 100% as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.