I'm working on a website and have been using absolute positioning, since the viewport size will always be fixed (offline iphone webapp). Halfway through I realized that I wasn't using a proper doctype declaration and such. When I added those and refreshed in a browser, the content completely vanished.
A code sample is below. With no doctype and a plain "" opening html tag, the content shows up. As it is below, the page shows up completely blank. Can anyone explain why this doesn't this code work in standards mode (with doctype and such)? What can I change to fix it (preferably cross browser compatible) - while still using an absolute positioned layout?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
html {
overflow: hidden;
height: 100%;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: -1; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="windowWrapper">
<div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="mobilePage">
<div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 50; left: 0; width: 320; text-align: left; " class="mobileToolbar">
<button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 5; width: 60; text-align: center; " class="">Back</button>
<button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 245; width: 70; text-align: center; " class="">Options</button>
<p style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 65; width: 180; text-align: center; " class="mobilePageTitle">Home</p>
</div>
</div>
</div>
</body>
</html>