Results 1 to 4 of 4

Thread: Vertically stretching HTML table / cell

  1. #1

    Vertically stretching HTML table / cell

    Hi All Ive been pulling my hair out on this one--

    I need a 3 row table to stretch 100% vertically. eg row 1 (10%), row 2 (scales to fit) , and row 3 ( 10% aligned to the bottom of the page)

    See sample below: ( The red circle needs to always be on the bottom of the page, the logo and content centered vertically, and the top row ( above the logo) scaling to always show the middle row vertically centered

    Any ideas?

    Code snippet:

    <table width="325" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="325"><img src="spacer_splash.gif" width="325" height="100"></td>
    </tr>
    <tr>
    <td><img src="kemistry_logo_splash.gif" width="325" height="177"></td>
    </tr>
    <tr>
    <td><p align="center" class="style1">The brands that will endure <br>
    are the ones built on their worth to society</p>
    <p align="center" class="style1"><br>
    <strong>Website Requirements</strong><br>
    <strong>Minimum Resolution</strong> 1024 x 768 <br>
    <strong>Flash Player 7.0</strong> Download</p>
    <p align="center" class="style1"><strong>Design:</strong> Kemistry Creative<br>
    <strong>Code:</strong> Maxdefinition</p>
    <p align="center" class="style1">Johannesburg<br>
    <strong>South Africa<br>
    <br>
    </strong>+27 (0) 861 114 163</p>
    <p align="center" class="style1">Disclaimer<br>
    Copyright</p>
    <p align="center" class="style1">&nbsp;</p>
    <p align="center" class="style1">works beautifully</p></td>
    </tr>
    <tr>
    <td><img src="red_cricle_splash.gif" width="325" height="69"></td>
    </tr>
    </table>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	splashpage.gif 
Views:	48 
Size:	14.7 KB 
ID:	34573  
    Last edited by pixi; March 24th, 2006 at 05:40 AM.
    What would happen if you hired two private detectives to follow each other?
    http://www.mailgloo.com

  2. #2
    Quick Fix

    make sure your body height is set to 100%, it also works differently in IE and FF.
    if your html starts like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    change it to this
    <html>

    It may not be 100% xhtml css standards etc, but it makes it work...

  3. #3
    Thanks soo much Yopure a star Works a treat
    What would happen if you hired two private detectives to follow each other?
    http://www.mailgloo.com

  4. #4
    cool!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012