iPhone CSS won't load correctly

[JPT]

I'm creating a webpage in XHTML Strict and it passes the html validator test with flying colors. Renders perfectly in all the browsers I have on my MBP (Chrome, Safari, and Firefox).

Anyway, I tried it on my iPhone 3GS and it loads most of the css except for some font related things. The weird thing is when I change the orientation it magically loads all the font related CSS and displays the page perfectly.

Any idea what would cause this?

Also, sometimes it will load correctly when I refresh a few times. And it will work for quite a few refreshes after restarting my iPhone.

CSS:

.list { width:22%; float:left; height:175px; background-color: #00FF00; margin:6px; padding:5px; text-align: center; border: 5px solid #0AD10A; }
	.list .title { font-size: 11px; text-transform: uppercase;
	letter-spacing: 2px; font-weight: bold; }
	
	.list .book {color: #444; margin: 0; padding: 0px 0px 0 0px;
	font-size: 35px; letter-spacing: -2px; font-weight: bold; text-align: center; }
	
	.list .chapter { color: #444; margin: 0; padding: 0px 0px 10px 0px;
	font-size: 25px; letter-spacing: -2px; font-weight: bold; text-align: center; }
	
	.list .done { text-align: center; }
	
	.list .done a { font-family: times, Times New Roman, times-roman, georgia, serif; color: #0AFF0A; margin: 0; padding: 0px 0px 6px 0px;
	font-size: 40px; letter-spacing: -2px; font-weight: bold; text-decoration: none; background-color: #6C9E06; border: 5px solid #078507;
	padding-right: 15px; padding-left: 15px; padding-bottom: 1px; padding-top: 1px; }
	
	.list .done a:hover { background-color: #07B307; }
	
	.list .extra { font-family: Gill Sans, Verdana; font-size: 10px; text-transform: uppercase;
	letter-spacing: 1px; font-weight: bold; margin-top: 15px;}

HTML:

<div class="list">
	<div class="title">
		Title
	</div>
	<div class="book">
		Book
	</div>
	<div class="chapter">
		Chapter
	</div>
	<div class="done">
		<a href="#">Done</a>
	</div>
	<div class="extra">
		Finished: 0.07 times
	</div>
</div>

Correct:


Incorrect:

 

[angelwatt]

I haven't really done much testing with the iPhone, but recently came across a CSS property that may be of help for the iPhone, -webkit-text-size-adjust. This article from ALA explains it a little and may have some other ideas for you.