What is wrong with this code?

[timmydeleu]

Hey guys,

my first message on this forum!

I've got a problem and I hope one of you guys can give me some advice.

I've created a few tables for a site

http://www.example.com/accommodations/

In firefox and IE the table has to much space next to the image in the table. The table and the text should be aligned. In chrome the table is also messed up. I can't see any problems with the code. Can anyone of you see the problem?

<table class="style1" width="100%">
<tbody>
<tr>
<th>
<h3><strong><span style="color: #4f93cf;">Double Room Deluxe</span></strong></h3>
</th>
<th><strong>Season</strong></th>
<th><strong>Internet Rates</strong></th>
</tr>
<tr>
<td rowspan="4" align="center"><img class="aligncenter size-full wp-image-1269" title="Deluxe Room" src="http://www.example.com/wp-content/uploads/2011/02/deluxe-reservation.jpg" alt="Deluxe Room" width="250" height="110" /></td>
<td>Low season: 01 May - 31 Oct</td>
<td style="text-align: center;">1880 Baht</td>
</tr>
<tr>
<td>High season: 01 Nov – 20 Dec &amp; 07 Jan – 30 April</td>
<td style="text-align: center;">2240 Baht</td>
</tr>
<tr>
<td>Christmas: 21 Dec – 6 Jan (min. 3 nights)</td>
<td style="text-align: center;">2940 Baht</td>
</tr>
<tr>
<td style="text-align: left;" align="center"><a title="Double Room Deluxe" href="http://www.example.com/double-room-deluxe/"><img class="aligncenter size-full wp-image-1283" title="Accommodation Details" src="http://www.example.com/wp-content/uploads/2012/08/accommodation-details.png" alt="" width="181" height="30" /></a></td>
<td align="left"><a onclick="hhotelSearchPromo('ASIATHHTLGoodT');" href="javascript:;"><img class="aligncenter size-full wp-image-1178" title="Book This Accommodation" src="http://www.example.com/wp-content/uploads/2012/08/book-now-at-example.png" alt="Book a Room on Example
</tr>
</tbody>
</table>

[edited by: tedster at 2:49 am (utc) on Nov 26, 2012]

[edited by: coopster at 8:03 pm (utc) on Dec 7, 2012]
[edit reason] example.com [/edit]

[not2easy]

(Always use example.com in place of actual URLs when you post.)

Some of your coding is conflicting: <td style="text-align: left;" align="center">

The other thing that affects your image placements can be settings in your css file.

This is a problem that can be solved in the css file for your Wordpress theme, the image margins are set in the css.

go to Appearance> editor> style.css
Before you make any changes, backup a copy on your computer. Find settings for img and see what you can adjust to fix the issue there.

[edited by: tedster at 2:50 am (utc) on Nov 26, 2012]

[jesstp]

Definitely look at your CSS and put everything in your CSS instead of inline, that way you can control it in one place.

Also is img class="aligncenter size-full wp-image-1269" a class name?

Not sure if you are aware, but on the last td you need to close the last bit:

alt="Book a Room on Example"></td>

[edited by: jesstp at 10:41 pm (utc) on Nov 26, 2012]

[DrDoc]

You also need to close your anchor in the last cell:

... alt="Book a Room on Example" /></a></td>

Have you run your markup through a validator [validator.w3.org]?