I am setting up a mobile iPhone Intranet site with iWebKit. Most of the things work perfectly, except I cannot get formatting of my table right using CSS.
What I have in my HTML (actually ASP since the HTML is created using queries on a database) is the following:
<div id="content">
<ul class="pageitem">
<li class="textbox">
<table class="mytable">
<tr>
<th>Type</th>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
<tr>
<th>First type</th>
<td>123</td>
<td>456</td>
<td>789</td>
<td class="targetok">159</td>
</tr>
</table>
</li>
</ul>
</div>
And I've added the following to iWebKit's CSS file:
.mytable {
border:1px solid black;
border-collapse:collapse;
font-family: Helvetica;
color:#000000;
font-size:20px;
width:100%;
height:35px;
padding:5px;
text-align:center;
-webkit-text-size-adjust:none;
}
.targetok {
background:#80FF80
}
I've tried several combinations (also adding table, tr, th and/or td to .mytable) but the table never seems to be formatted. It is always shown without borders, small font, not colored, ...
Since I don't know much about CSS I also quickly followed the CSS introduction on W3SCHOOLS. As far as I can see the syntax is correct.
I seem to be missing something, but can't find it. Is something wrong in my syntax? Or does iWebKit prevent you from adding your own CSS rules?
To force refreshing you can use this code:
<link href="your.css?1" rel="stylesheet" type="text/css" />
?1
Where 1 is your version, Safari will retrieve this css because it's like php request.
Or you can add inline styles in <style></style>
tag