...

View Full Version : 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum