Infuriating Mobile tables!

livvinit2damax

02-27-2009, 09:21 AM

Dear All,

I have an issue with a table I am trying to make for my online CV. I have made a table, such as the one below:

<table>
<tr>
<th width="110" class="tdt">Company</th>
<td class="tdt">BAE Systems - Pinzgauer Devision/Pinzgauer Ltd</td>
<td rowspan="3" width="75"><img align="right" src="images/thumb-pinz.jpg" alt="" /></td>
</tr>
<tr>
<th class="tdt">Dates of Work</th>
<th class="tdt">Job Title</th>
</tr>
<tr>
<td class="tdt">08/06-12/07</td>
<td class="tdt">Student Design Engineer</td>
</tr>
<tr>
<td colspan="3" class="tdt">
As part of my five year MEng Sandwich course...</td>
</tr>
</table>

And the relevant CSS is:

table {
width: 530px;
border-collapse: collapse;
}

th {
background-color: #333333;
padding: 2px;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-align: left;
border: solid 1px #333333;
}

tr {
color: #333333;
}

td {
border: solid 1px #333333;
}

.tdt {
padding: 2px;
font-size: 12px;
}

img {
padding: 0px;
display: block;
}

The problem is that I want the border to stay tightly wrapped around the thumbnail image and it to stay in the top right hand corner of the table. This seems to work fine with only a small amount of text is the bottom cell, however, as soon as I put more text into that cell, it moves the thumbnail left leaving blank space!!

Can anyone please explain to me why the amount of text in the bottom cell seems to change the position of the upper cell without modifying the overall table dimentions?

Any help would be greatly appreciated.

Many thanks,

Mike

abduraooft

02-27-2009, 09:31 AM

I assume you haven't added a DOCTYPE at the top of your document. So fix your site with the right doctype! (http://www.alistapart.com/articles/doctype/)

livvinit2damax

02-27-2009, 10:00 AM

I'm using Dreamweaver CS3, so the doctype is automatically included:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Is this correct for my application?

Thanks,

Mike

abduraooft

02-27-2009, 10:12 AM

I'd prefer that, but you'll get some errors on markup validation (http://validator.w3.org/#validate_by_input), and you may need to fix them later.

btw, in the above, the first line only is the DOCTYPE part and the second one is the html tag.

PS: I think a table is OK in this case, but I'd recommend you to check why tables for layout is stupid (http://www.hotdesign.com/seybold/).

jerry62704

02-27-2009, 02:20 PM

Your tables are lacking essential tags for accessibility. If you are going to use tables, use them correctly.

livvinit2damax

02-27-2009, 07:30 PM

Your tables are lacking essential tags for accessibility. If you are going to use tables, use them correctly.

Yes, thanks! That would be why I'm here!

What am I doing wrong?

livvinit2damax

03-01-2009, 12:07 PM

Dear All,

Just an update on this. This seems to be an IE problem only. Chrome and Firefox display the page exactly as I want it.

Does anyone have any ideas how I might encourage IE to see my point of view?

Cheers.