SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict MarekS's Avatar
    Join Date
    Jan 2003
    Location
    Estonia / Tallinn
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    full size (100%x100%) table?

    Taking my first XHTML+CSS steps and... stuck I am.

    I'm tryn to make a full size table (100% x 100%) and center/middle the stuff in it, but no luck...

    HTML Code:
    <!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">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    	<link rel="stylesheet" type="text/css" href="index.css" />
    	<title>concover.ee</title>
    </head>
    <body>
    	<table class="main">
    		<tr>
    			<td class="main">
    				testing 123<br />
    				<img src="_i/logo_big.gif" width="594" height="100" alt="a" />
    			</td>
    		</tr>
    	</table>
    </body>
    </html>
    Code:
    body {
    	height:100%;
    	margin:0px;
    	padding:0px;
    }
    
    table.main {
    	height:100%;
    	width:100%;
    }
    
    td.main {
    	text-align:center;
    	vertical-align:middle;
    	border:1px solid gray;
    }
    and here is the result:
    http://www.concover.ee/_dev/

    Any ideas what is wrong? I believe the code would have been working with old HTML -> here

    Thanks,
    Last edited by MarekS; Oct 17, 2003 at 05:28.

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it looks OK to me all centered and stuff, however you should be aware that the vertical-align attribute can only be applied to in-line elements like <span> ... </span>.

  3. #3
    SitePoint Addict MarekS's Avatar
    Join Date
    Jan 2003
    Location
    Estonia / Tallinn
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well - yes - ok,

    But I think, my problem is that - the table will not be rendered as 100% by 100%

    It's the height that is not working as ... I expected.

  4. #4
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vertical-align also applies to table-cells.

    and try setting height:100%; for the html element.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  5. #5
    SitePoint Addict MarekS's Avatar
    Join Date
    Jan 2003
    Location
    Estonia / Tallinn
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huhu... that made an effect.

    I would not have never thought that <html> and css fit together somehow or... I would have thought it's a nonsence.

    Thanks,

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Try adding html {100%} for mozilla (although I believe it may cause some problems on the mac.

    vertical-align does work on table cells and will align the content within that cell. (Ouside of tables vertical align only aligns within a single line and not the whole element etc.)

    Paul

    Edit:

    hmmm Jeffs post wasn't there when I started typing! - sorry for duplicating the info

  7. #7
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    winXp Pro IE6 1024x768
    Both old and new look the same to me, aside from the language differences


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
  •