iPad [and iPhone:orientation] sticky footer template
An experiment in how it might be possible to target devices using media queries. Due to uneven @media browser support additional client-side detection will most assuredly deliver a better user experience across all browsers and platforms.
The relevant media queries without src attributes:
<link rel="stylesheet" media="handheld, only screen and (max-width: 480px)"/> <!-- iPhone -->
<link rel="stylesheet" media="screen and (min-width: 481px)"/> <!-- everything else -->
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)"/> <!-- iPad -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css" media="all"/>
<![endif]-->
The relevant CSS is commented in styles-ipad.css
The relevant html tag structure: [thanks to Ryan Fait]
<div class="wrapper">
Content
<div class="push"></div>
</div>
<div id="footer"></div>
Contact
Marc Shifflett (marc@marcshifflett.com)
Download
You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/mashcode/iSticky