Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox?
I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding or margin is not being reset to 0. Additionally, there appears to be extra padding on the overall document height which I'm struggling to remove.
Here's a helpful tip:
The issue was resolved by using the following code:
div#aiport > *:first-child { margin-top: 0px }
Simply adding
overflow: hidden;
to the div#airport definition managed to solve the problem effectively. :-)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bug</title>
<link rel="icon" type="image/png" href="bookmarkIcon.png" />
<style type="text/css">
html {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
margin-top: 0px;
padding-top: 0px;
width: 100%;
height: 100%;
font-size: 16px;
background: #fff;
}
div#airport {
position: relative;
z-index: 1;
top: 0px;
padding: 0px;
padding-top: 0px;
margin: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 900px;
min-width: 900px;
max-width: 900px;
background-color: #0f0;
}
</style>
</head>
<body lang="en">
<div id="airport">
<p>Platform</p>
</div>
</body>
</html>