Table problems with WebKit

Question

I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.

<table width="100%">
 <tr>
  <td rowspan="2" style="vertical-align:middle;">
   <a href="http://http://{$smarty.const.DOMAIN}/company/a_cherry_on_top/line/gift_cards/?v=s2"&gt;&lt;img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/></a>
  </td>

  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=2044" target="_top">Wishlist</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=2125" target="_top">Link to Us</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://www.shareasale.com/shareasale.cfm?merchantID=8362" target="_blank">Affiliate Program</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=1521" target="_top">Privacy</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=1395" target="_top">Guarantee</a>
  </td>

  <td rowspan="2" style="width:160px;">
   <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=en&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"&gt;&lt;/script&gt;
  </td>
 </tr>
 <tr>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=3069" target="_top">About Us</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=1467" target="_top">Shipping</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=12342383" target="_top">Why Buy From Us</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/article?a=1397" target="_top">Contact Us</a>
  </td>
  <td style="vertical-align:middle;">
   <a href="http://{$smarty.const.DOMAIN}/help" target="_top">Help</a>
  </td>
 </tr>
</table>

The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.

Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?

Answer 1

I could help more with a live example to test on but you could try adding this to your tr tags.

<tr style="height: 50%;">

Assuming you only need two rows this will bring them to equal height.

Answer 2

I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.

1. First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
2. Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.

Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.