table tag help - td text not displaying properly - HTML forum at WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

table tag help - td text not displaying properly

all responses appreciated :)

codingisforsquares

10:52 pm on Jun 25, 2010 (gmt 0)

okay, so i've been working on a new website for two days straight. i've coded about five layouts (each with table and div options) trying to decide which to stick with, and i came across an error i couldn't fix & thought it'd be good to ask so i could fix it again later.

as you can see, my testing text 'testing :)' refuses to be positioned at the top of my <td> tag. it's halfway down the middle, as the navigation is longer than it. i put enough 'testing :)'s to make the content longer than the links, and the problem reversed; links was then centered vertically. i'd rather stick with <div>s, but of course the famous footer, 100% height, non-stretchiness, etc came up & of course i couldn't fix it. i've been designing for a while but exploring new coding is something i like to do. anyway, any help on the subject would be GREATLY appreciated!

<moderator note - continued below>

[edited by: tedster at 11:28 pm (utc) on Jun 25, 2010]

codingisforsquares

11:03 pm on Jun 25, 2010 (gmt 0)

oops, i pasted the wrong code/image. the links were supposed to be blurred out.. use these, if someone can delete the other codes.. sorry!

image: [img190.imageshack.us...]

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=utf-8" />
<title>website</title>
<style type="text/css">
body {background-color: #000000;}
#container {margin: auto; width: 700px; height: auto;}
#content {width: 476px; height: auto; color: #000000; text-align: left; font-family: arial; font-size: 12pt; background-color: #ffffff; padding: 5px;}
</style>
</head>
<body>
<table id="container" cellpadding="0" cellspacing="0">
<tr>
<td id="header" colspan="2"></td>
</tr>
<tr>
<td id="content">
testing :)
</td>
<td id="links">
<a id="home" href="#">home  </a>
<a id="about" href="#">about  </a>
<a id="contact" href="#">contact  </a>
<a id="scripts" href="#">scripts  </a>
<a id="designs" href="#">designs  </a>
<a id="link" href="#">links  </a>
</td>
</tr>
<tr>
<td id="footer" colspan="2">

</td>
</tr>
</table>
</body>
</html>

tedster

11:31 pm on Jun 25, 2010 (gmt 0)

Welcome to the forums!

I think all you need is an extra attribute for that particular table cell: <td id="content" valign="top"> should work...

...or you can do it within the CSS rules for the #content by adding vertical-align:top;

codingisforsquares

1:23 am on Jun 26, 2010 (gmt 0)

i completely forgot about 'valign'. i used to use it all the time when i still used tables, haha. thanks!

tangor

3:56 am on Jun 26, 2010 (gmt 0)

@codingisforsquares... kewl name!

tedster's comments above will solve. Just have to ask why the "small" width? Got lost on my dinky 1680x1050 monitor (and other monitors are even larger in resolution!)

Merely a query as to size... (the pic looked okay, just SMALL)

codingisforsquares

1:25 pm on Jun 26, 2010 (gmt 0)

oh, well i've just been coding layouts to practice & eventually i'll offer some of them as free templates.