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?