467,115 Members | 1,310 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,115 developers. It's quick & easy.

Page header cut off

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!
Jan 22 '08 #1
  • viewed: 2392
Share:
1 Reply
drhowarddrfine
Expert 4TB
Link .
Jan 22 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by martin | last post: by
82 posts views Thread by Eric Lindsay | last post: by
6 posts views Thread by dana lees | last post: by
6 posts views Thread by scottyman@comcast.net | last post: by
1 post views Thread by franc sutherland | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.