I have a layout that is 960px in width. For my post date, I have set it to position: absolute; and moved it the left of the post title. Here is the CSS for it:
// this is the parent div
.hentry { position: relative; }
// this is the post date div
.post-date {
width: 37px;
height: 37px;
background: url(‘images/date.png’) no-repeat scroll 0 0;
display: block;
position: absolute;
top: 3px;
left: -57px;
margin: 0;
}
Now, this works fine on normal computers, no issue. So, when I go to style it for the iPad, here is what I put:
// I am using the WP global $is_iphone variable to target iPhones/iPads in the body class, signified by .iphone
.iphone .post-date {
position: relative;
float: right;
margin-left: 20px;
left: auto;
right: auto;
clear: left;
}
Now, I have another layout that uses this exact CSS style, and it works perfectly at floating the .post-date div to the right of the title. But, it does not work as expected on an iPhone/iPad. The .post-date div just doesn’t appear period on the screen (although the HTML/CSS is in the source). What do I need to do to get this to work?
Thomas