header table

Hi All,

I have just implemented a header (sliced table)which includes 2 search functions. (www.artthings.co.uk). Please ignore the design of the page as this is temporary, the header is what I am working on at the moment.

Anyway the search funciton includes 2 forms 1 for search by products and 1 for a drop down choice. The functions work perfectly.

Anyway as you can all see, the header is distorted really bad, don't even bother viewing it in anything other then IE at the moment its that bad.

I have changed the heights etc, but I can't seem to sort out the problem? Is there something I can do to sort it?

Quote:

---

<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/newheader_01.gif" WIDTH=275 HEIGHT=39 ALT=""></TD>
<TD ROWSPAN=4>
<IMG SRC="images/newheader_02.gif" WIDTH=8 HEIGHT=96 ALT=""></TD>
<TD ROWSPAN=3 background="images/newheader_03.gif" WIDTH=512 HEIGHT=87 ALT="">

<div align="right">
<form action="searchresults2.php" method="post">
<font color="#FFFFFF" size="-1"> Search by product name:</font>
<input name="searchtext" type="text" size="15" />
<input type="submit" name="submit" value="Search Products" />
</form>

<?php

$dbcnx = mysql_connect( '*******', '*******, '*******' );
//$db = db_connect( "*******", "*******", "*******", "*******" );
mysql_select_db(*******);


$sql = @mysql_query('Select productname, catid FROM atoz');
if (!$sql) {
die('<p>Error performing query collecting data from database' .mysql_error() .
'</p>');
}
echo('<form action="searchresults2.php" method=post>');
echo('<font color="#FFFFFF" size="-1"> Search A-Z:</font><select name="catid">');
while ( $row = mysql_fetch_array($sql) ) {
echo ('<option name="atoz" value="'.$row['catid'].'">'.$row['productname'].'</option>');
}
echo('</select>');
echo ('<input type="submit" name="submitatoz" value="Search" />');
echo ('</form>');
?>
</div>

</TD>
<TD ROWSPAN=2>
<IMG SRC="images/newheader_04.gif" WIDTH=5 HEIGHT=48 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=39 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/newheader_05.gif" WIDTH=275 HEIGHT=57 ALT="">

</TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/newheader_06.gif" WIDTH=5 HEIGHT=48 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=39 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/newheader_07.gif" WIDTH=512 HEIGHT=9 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=9 ALT=""></TD>
</TR>
</TABLE>

---

I've put up an example for you to look at, went with a different concept altogether, I cracked yours open and got really confused. You're using a lot of markup that doesn't validate to the doctype you're using, normally I'm not incredibly picky about that but the markup techniques you've chosen are nowhere near suitable for xhtml transitional.

A few things that might help you in your situation, apply font-sizes to your form elements to make them smaller, and the heights specified in that table's TDs were varied and confusing, I tihnk the browsers agree.

Hey thats much better!!! Thanks a million. I'll try it now.

oh yeah, your width, you seemed to be designing a static width for the lowest common denominator of 800x600 screen resolution. If that's the case, you should knock your presentation back to about 770px instead of 800 to accomodate for scrollbars, else you'll get the HSOD (Horizontal Scrollbar of Death) in addition to the acceptable vertical one.

ah right, I see it now. Cheers.

One more problem guys, I added arounded right edge...

All browsers, but IE are fine, but IE is putting a verticle line further right than the graphic? Is this itself repeating and how can I sort it out?

:cool:

I think firstly you should get rid of the dobule beginning you've got going there, 2 opening HTMLs, BODYs, TITLEs, HEADs etc

The "line" to the right is actually the background-color showing for that div as it's stretched beyond the background image, you might try taking away "display:block" as that's kinda redundant (I know, my mess :p ) and set the form's width:50% - something is expanding that div, fiddle and see what.

Hi,

I managed to sort it out after, have not got a clue what or why, just fiddled with the same values and it came together? Cheers for the help though :)