What kind of CSS and HTML used for changing Table height in different browsers?

This is happen when i try to check my site if it was cross browsers (compatible in any website) or not.I found my site working properly in Google Chrome v.10, Opera v.11, and Firefox v.10 (for Internet Explorer i have different troubleshooting). When i checked in Safari v.3 Macintosh, some of page (not all) have some blank content added on it (blank space).

You can see this : http://www.wahana-interfood.com/chocopedia-health.... or http://www.wahana-interfood.com/chocopedia-varieti... , this was happened in "chocopedia" page section.

When i try to edit main table height, both left and right table height inside the main table and i success to make Safari render it in right place. But when i posted it and opened in other browsers, seems the last edited html ruins all browsers, and just only work properly in safari.

I decided to make another CSS just only for safari. So if the web rendered in Safari it'll not add more blank space on the table height.

What i asked :

1. What the new CSS code must i create? *

2. Must i put this on the html page? (<!--[if safari3]>

<link href="ie.css" rel="stylesheet" type="text/css" />

<![endif]-->) ?

Since i don't know very well about CSS or HTML tag, i don't have a clue to put what the correct tags in the new CSS to fix this problem. Please any help would be appreciated ! =]

*CSS and HTML code

p.s : sorry for bad english, i hope you understand what i'm saying~= b