I have the following code, with the html and body margins and padding set to zero, but their is still a gap at the top, why?:
CSS\[code\]html, body { margin: 0; padding: 0;}.mobile body { overflow: hidden;}.mobile #wrapper { position: absolute; top: 0; bottom: 0; left: 0; width: 100%;}.mobile #scroller { height: 3000px;}.header { background: url(../img/dark_exa.png) repeat; height: 300px; margin: 0 auto; text-align: center;}.header h1 { color: white;}\[/code\]HTML\[code\]<!doctype html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <title>Mobile Parallax with Stellar.js - Demo</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15861723/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15861723/css/style.css" /> </head> <body> <div id="wrapper"> <div id="scroller"> <div class="header"> <h1>Product Title</h1> </div> </div> </div> <script src="http://stackoverflow.com/questions/15861723/lib/jquery.min.js" ></script> <script src="http://stackoverflow.com/questions/15861723/lib/jquery.stellar.min.js"></script> <script src="http://stackoverflow.com/questions/15861723/lib/iscroll.js"></script> <script src="http://stackoverflow.com/questions/15861723/script.js"></script> </body></html>\[/code\]