Welcome to WebmasterWorld Guest from 107.20.34.173

Forum Moderators: incrediBILL

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)

5+ Year Member



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)

5+ Year Member



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 &nbsp;</a>
<a id="about" href="#">about &nbsp;</a>
<a id="contact" href="#">contact &nbsp;</a>
<a id="scripts" href="#">scripts &nbsp;</a>
<a id="designs" href="#">designs &nbsp;</a>
<a id="link" href="#">links &nbsp;</a>
</td>
</tr>
<tr>
<td id="footer" colspan="2">

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

tedster

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



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)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month