SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: header table

  1. #1
    ::==:: Bonzo_CS's Avatar
    Join Date
    Dec 2003
    Location
    (Cardiff Wales)
    Posts
    747
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

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


  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    ::==:: Bonzo_CS's Avatar
    Join Date
    Dec 2003
    Location
    (Cardiff Wales)
    Posts
    747
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thats much better!!! Thanks a million. I'll try it now.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    ::==:: Bonzo_CS's Avatar
    Join Date
    Dec 2003
    Location
    (Cardiff Wales)
    Posts
    747
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ) and set the form's width:50% - something is expanding that div, fiddle and see what.

  7. #7
    ::==:: Bonzo_CS's Avatar
    Join Date
    Dec 2003
    Location
    (Cardiff Wales)
    Posts
    747
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •