WCSS - Cell widths

[skvincent]

Hi,

I am developing some templates for an XHTML WAP interface and am having problems with how the Nokia Mobile Browser and OpenWave for that matter renders the table.

Overall the page looks great except for one thing:

I have a two column table with the cell widths defined within an external WCSS file. It renders perfectly well within all standard web browsers (IE, Opera, Netscape), but when I look at it in NMB 4.0 it divides the two columns in half assigning both columns to be 50%. I've used fixed widths and percentages to no avail.

Has anyone noticed this problem or am I doing something wrong?

Any advice would be greatly appreciated.

[Satu]

Hi,

Nokia Mobile Browser 4.0 supports defining different column widths in tables. You can define width in external CSS or with inline style attributes. Could you post here the code you are using so we can take a look at it and try to find out what is wrong with it?

Kind regards,
Satu/Forum Nokia Developer Support

[skvincent]

I was able to make it work but only after removing the rows above the 2 columns that spanned both.

Basically I had two rows that contained a logo and a separator that spanned the two columns.

Once I removed this row and enclosed it within its own table the subsequent 2 column table layout was corrected.

Here's a sample of what I did to fix it (previously the rows with the logo and the separator were in the same table as the 2 column table):

<table>
<tr>
<td class="logo"><img src="images/Logo.gif" alt="Company Logo" /></td>
</tr>
<tr>
<td class="separator"></td>
</tr>
</table>

<table>
<tr>
<td class="iconset">()</td>
<td class="menu"><a href="#" class="menu2">FEATURED</a></td>
</tr>
<tr>
<td class="separator" colspan="2"></td>
</tr>
<tr>
<td class="iconset">?</td>
<td class="menu"><a href="#" class="menu2">FEATURED</a></td>
</tr>
</table>

The relevant CSS looks like this:


/* Table Defaults */
table {
width: 100%;
border-spacing: 0px;
border-collapse:collapse;
}

/* Menu Separator */

.separator
{
background-color:#333333;
height: 1px;
}

/* Logo Background */
.logo
{
background-color:#333366;
}

/* ICON blocks */

.iconset
{
background-color:#333366;
width: 10px;
text-align: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
white-space: nowrap;
font-family: verdana, helvetica, arial, sans-serif;
font-weight: bold;
color: #ccccff;
}


/* OTHER TD blocks */

td.menu
{
background-color:#666699;
width: auto;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
white-space: nowrap;
color: #ffffff;
}

[skvincent]

I'm also having a hard time forcing the text-decoration: none style for links.

Does the Nokia browser support turning this feature off? If so, what is the method?

Thanks for your assistance.