Misplaced footer when viewed on iPad's Safari
A website that I'm currently working on works completely fine in regards
to the footer, however when viewing the website on the iPad's Safari, the
footer is misplaced quite a bit above the bottom of the page and after an
hour of trial and error I'm not getting anywhere fast. I was hoping
someone had this very issue and can perhaps aid me by explain what you did
to resolve the issue.
This is the basic markup of my HTML.
<html>
<body>
<form>
<iframe></iframe> <!-- This is where the different pages are set -->
</form>
<footer>
</footer>
</body>
</html>
Here's the CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:40px; /* Height of the footer */
background:#6d8085;
}
Chrome
iPad
Thanks a lot for the help!
No comments:
Post a Comment