Page header cut off

[vozzek]

Hi everyone,

It's funny how much you learn while creating a website from scratch. What's not funny is stumbling across the first few bits of code you did and realizing it's absolute CRAP. I need some help fixing something that's kinda complicated (to me at least).

At the top of my site is my main logo. I chopped this image up and spanned it across tables so that I could fit a search bar into the site. I AM using CSS, but my CSS knowledge is limited. I had tried to anchor the search bar with some absolute positioning - it looked great in Firefox, but this positioning seemed to differ greatly when the site was viewed in I.E.

Anyway, I used tables for everything. Not the smartest idea, but it's what I knew at the time. I'm sure I need to use <div> or CSS absolute positioning, but I'm not sure how. The site looks good in IE and Firefox, but I've had complaints that when viewed with an Apple... the princesses' head is cut off!

http://www.thefrogandtheprincess.com/

Here's the code that makes up the top portion of the site. Yes, I know it's ugly... I need suggestions as to the best way to fix it:

[html]<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="125" background="../Images/topbar1.jpg"></td>
[/html][php]<?php
$topbar2="\"../Images/topbar1b.jpg\"";
if (isset($_SESSION['cust_name'])) $topbar2="\"../Images/topbar1b2.jpg\"";
?>[/php][html]
<td width="270"[/html] [php]<?php echo "background=".$topbar2; ?>[/php][html] class="hello">[/html]
[php]<?php if (isset($_SESSION['cust_name'])) echo "&nbsp;&nbsp;<i>Hello ".$_SESSION['cust_name']."!</i>"; ?>[/php][html]
</td>
<td width="58"><a href="http://www.thefrogandtheprincess.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Images/topbar2_rollover.jpg',1)"><img src="../Images/topbar2.jpg" alt="Home" name="Home" width="58" height="30" border="0" id="Home" /></a></td>
<td width="161"><a href="../customer_service.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Customer Service','','../Images/topbar3_rollover.jpg',1)"><img src="../Images/topbar3.jpg" alt="Customer Service" name="Customer Service" width="161" height="30" border="0" id="Customer Service" /></a></td>
<td width="83"><a href="../login.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Account','','../Images/topbar4_rollover.jpg',1)"><img src="../Images/topbar4.jpg" alt="Account" name="Account" width="83" height="30" border="0" id="Account" /></a></td>
<td width="103"><a href="https://thefrogandtheprincess.com/view_cart.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('View Cart','','../Images/topbar5_rollover.jpg',1)"><img src="../Images/topbar5.jpg" alt="View Cart" name="View Cart" width="103" height="30" border="0" id="View Cart" /></a></td>
</tr>
</table>
<form action="../search_results.php" method="post" name="searchform" id="searchform" style="margin:0;">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="535" height="30" background="../Images/choplogo1.jpg">&nbsp;</td>
<td width="210" height="30" background="../Images/choplogo2.jpg" class="search">
Search: <input name="srch" type="text" id="srch" size="18" maxlength="50" />
</td>
<td width="40" height="30" background="../Images/background7.jpg" class="gobutton"><input type="image" src="../Images/choplogo3.jpg" name="send" value="send" /></td>
<td width="15" height="30" background="../Images/choplogo4.jpg">&nbsp;</td>
</tr>
</table>
</form>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="120" background="../Images/choplogobase.jpg">&nbsp;</td>
</tr>
<tr>
<td width="800" height="20" bgcolor="#FFFFFF"></td>
</tr>
</table>[/html]

This code exists in my main template so it exists on all my pages. Getting it right is important. Getting it to load as fast as possible is a huge bonus too.

Oh, I have a class of 'search' associated with the searchbar. The code exists in an external file, and looks like this:

[html]td.search {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #4B4B4B;
font-size: 15px;
border: 0px;
}[/html]

Thanks in advance for the help!

[drhowarddrfine]

Link .