[SOLVED] Decapitated Princess. Will you help her?

[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:

 

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="125" background="../Images/topbar1.jpg"></td>
    <?php
    $topbar2="\"../Images/topbar1b.jpg\"";
    if (isset($_SESSION['cust_name'])) $topbar2="\"../Images/topbar1b2.jpg\"";
    ?>
    <td width="270" <?php echo "background=".$topbar2; ?> class="hello">
    <?php if (isset($_SESSION['cust_name'])) echo "  <i>Hello ".$_SESSION['cust_name']."!</i>"; ?>
    </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"> </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"> </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"> </td>
  </tr>
  <tr>
    <td width="800" height="20" bgcolor="#FFFFFF"></td>
  </tr>
</table>

 

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:

 

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

 

Thanks in advance for the help!

 

[noober]

I'm viewing in IE6 and it looks almost exactly to that of Firefox. Her head is definitely fully intact.

 

You can place each image in a seperate div or table if you wish, then add onto your html table code a "id" such as

<table width="800" border="0" align="center" id=table1
or
<div id="div1"></div>

 

In css you would position them such as below, with "top" and "left", so they would line up. Deamweaver or similar software with a design interface feature helps a bunch.:

table1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
color: #4B4B4B;
font-size: 15px;
border: 0px;
top:197px;
left:186px;
width:401px;
height: 343px;
position:absolute;
z-index: 1;
border: none;
}

 

I hope that helps.