Here is my html code:
<!DOCTYPE html>
<!--
test app
-->
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" charset="utf-8" href="http://darrenvenn.com/greenie.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>test app</title>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Sample Header</h1>
</div>
<div data-role="content" data-theme="a">
<input type="button" value="selection 1" onclick=""/>
<p>
<input type="button" value="selection 2" onclick="" />
</p><p>
<input type="button" value="selection 3" onclick="" />
</p><p>
<input type="button" value="selection 4" onclick="" />
</p>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</div>
</body>
</html>
When I run this from a browser it finds the greenie.min.css file just fine. When I run it in PhoneGap/Xcode it does not load the css, ever. Wondering why my css won’t load in PhoneGap when it loads fine in the browser. I’ve tried in many different ways, using the plain and min version, loading locally and loading from url, nothing works, nothing.
This should be so simple!…
Check the permissions of the CSS files and the directories in which they are located. In particular, ensure the x flags are set on the CSS director(ies). This has been known to affect CSS loading in certain cases, such as within EPUBs with certain ereaders including iBooks.