CSS - forcing text at top of cell [resolved]

**Acidic** · Apr 27th, 2004, 03:17 PM

I have a table with two columns and one row.
If the text in the right hand side column is very long and the text in the left hand column is very short, then the column with little text will move that text halfway down the column.
Is there anyone to stop this? I think CSS is the way to go, but I've not managed to figure this out.

**NoteMe** · Apr 27th, 2004, 03:23 PM

Are thes cells fixed with a pixel size or in %?

You could try to set the the vertical alignment to "center" in the <td> tag, even if it's not CSS, it might work.

BTW is it in all browsers or just one or two?

I had the same problem yesterday in FireFOx or was it IE, can't remember, but not both...

**CornedBee** · Apr 27th, 2004, 03:41 PM

Set the td's valign to top.

I don't approve of designing with tables at all, btw

**Acidic** · Apr 27th, 2004, 03:45 PM

valign did the trick. thank you both.

CB. I find tables very handy as it helps you keep all the information where you want it. I find it better than having DIVs everywhere. Why don't you like tables?

oh, note: I was havinf the problem in IE and FX, but now both work fine.

**CornedBee** · Apr 27th, 2004, 03:55 PM

Just compare some source, ok?

Code:

<!DOCTYPE html PUBLIC "-//W3C//HTML 4.01 Strict//EN"
	"http://www.w3.org/TR/1999/html401/strict.dtd">
<html lang="de">
<head>
<link href="style/core.css" media="all" rel="stylesheet" charset="utf-8">
<title>Fingerprothesenregister Login</title>
</head>
<body>
<h1>Willkommen zum Fingerprothesenregister</h1>
<form action="login.php" id="loginbox" method="post">
<p>Bitte geben Sie Ihre Login-Daten an.</p>
<div class="controlassoc">
<label for="user">Benutzername</label>
<input id="user" name="user" type="text">

<br class="clearer">
</div>
<div class="controlassoc">
<label for="passw">Passwort</label>
<input id="passw" name="passw" type="password">
<br class="clearer">
</div>
<input type="submit" value="Abschicken">
</form>
</body>
</html>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

name="doctitle" -->
<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="styles/oegu_hpr.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript" src="javascript/util.js"></script>
</head>

<body>

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="145"><img src="graphics/logo.gif" width="126" height="41"></td>
<td width="455" class="Header1">&Ouml;GU - H&uuml;ftprothesen Registers</td>
</tr>
</table></td>
</tr>
<tr>

<td height="140">
<form name="login" id="login" method="post" action="login2.php">
<fieldset>
<legend>Login</legend>

<table width="600" border="0" cellspacing="0" cellpadding="0"><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="10">&nbsp;</td>
<td width="590">
<table width="400" border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td>Benutzername</td><td><input type="text" id="username" name="username" value=""></td></tr>
<tr><td><img src="graphics/leer.gif" width="1" height="1"></td><td><img src="graphics/leer.gif" width="1" height="1"></td></tr>
<tr><td>Passwort</td><td><input type="password" name="password" id="password"></td></tr>
</table>
&nbsp;</td>
</tr>
<tr>

<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</fieldset>
<br>
<input type="button" name="" value="&lt; Zur&uuml;ck" disabled="1">
<input type="submit" name="" value="Login &gt;">
</form>
</td>
</tr>
</table>

<script language="JavaScript" type="text/javascript">
if(document.getElementById)
	document.getElementById('username').focus();
</script>
</body>
</html>

Not posted are the style sheets, but I assure you, the pages look almost the same.

What do you mean by "keeping all the information where you want it"? Does "where" relate to the layout or the source code? And what about having divs everywhere - there's usually far fewer divs than tds.

I don't like tables because you need a WYSIWYG editor to be able to work with them, because the source is many times as long and because they're outdated.

**NoteMe** · Apr 27th, 2004, 04:01 PM

I have to agree with Acidic a bit here...like for a head line over my articles I want the headline to be aligned left, and the date to be aligned on the right side. Using a two celled table, looks much better in the code then having the 4th and 5th div inside 3 other divs...

**CornedBee** · Apr 27th, 2004, 04:14 PM

I can do it without a single unnecessary div and a single br.

Code:

<h1>Headline</h1><div class="date">Date here</div><br class="clearer">

Code:

h1 {float: left; }
div.date {float: right; }
br.clearer {clear: both; display: inline; visibility: hidden; }

**Acidic** · Apr 27th, 2004, 04:18 PM

Originally posted by CornedBee
Does "where" relate to the layout or the source code?

yes, that's what I meant.

Originally posted by CornedBee

I don't like tables because you need a WYSIWYG editor to be able to work with them, because the source is many times as long and because they're outdated.

I used to need a WYSIWYG, but I can do it fine without one now.
I find the source is the same length. OK your post proves otherwise, but i seem to find it not too long with tables. Of course DIVs are useful. I use them a lot for when I want information at a specific point on the page, by point I meant x and y co ord).

Are they really outdated? I know you're very up to date on these things, but I find it difficult to believe that tables are becoming obsolete. I don't want to start an argument though, so how about you keep to using DIVs (I wouldn't manage to try to convert you even if I tried anyways) and I'll keep to using tables until I see why I really shouldn't be.

**Acidic** · Apr 27th, 2004, 04:19 PM

OK, looking at your CSS I see that once I'm better at that, I might move over to not using tables.

**CornedBee** · Apr 27th, 2004, 04:22 PM

Here, this might help you make the right decision

http://www.hotdesign.com/seybold/

**NoteMe** · Apr 27th, 2004, 04:31 PM

Originally posted by CornedBee
I can do it without a single unnecessary div and a single br.

Code:

<h1>Headline</h1><div class="date">Date here</div><br class="clearer">

Code:

h1 {float: left; } div.date {float: right; } br.clearer {clear: both; display: inline; visibility: hidden; }

But you are still using one div, H1 and a br, I still can't see that it's easier then just using a two cell table. But maybe you are right,

BTW is it slow to go out an in of PHP mode all the time? Have been wondering a bit about this for a while, because I am printing the table in PHP, and if it is slow it isn't a good idea to do it your way.

**CornedBee** · Apr 27th, 2004, 04:33 PM

I doubt it's slow to switch mode. In fact, I think the switches take almost no time and the parser is a lot faster in no-php mode.

So? I use h1, div and br. You use table, tr and 2xtd. 3 tags for me, 4 for you.

**Acidic** · Apr 27th, 2004, 04:34 PM

exactly same question here. And I'll try learning more CSS so I can at least see what the code is like when not using tables.

edit: I see you just answered the question.

**NoteMe** · Apr 27th, 2004, 04:39 PM

Originally posted by CornedBee

So? I use h1, div and br. You use table, tr and 2xtd. 3 tags for me, 4 for you.

Hehe....ok...I give up...

...I belive you...

...will have a look at it to see if I can rewrite that. At least remember it to next time.

PS: When am I ever going to be right in a discusion with CornedBee..

**CornedBee** · Apr 27th, 2004, 04:42 PM

When I've got a bad hit in the head?

I try to stay out of discussions where I'm not right, it hurts my image

**NoteMe** · Apr 27th, 2004, 04:47 PM

Hehe....I am not affraid about getting a hit, someone always corrects me, so no damage is ever done anyway. Only my "image", but I can only blame that I am young, and still have much to learn, but in 3-4 years when I have finished my education, then I never will be wrong. Just have to get that job at ATI first...

BTW now when I have the oppertunity, thanks for all help the last year or so. You have done a lot to help me.

**Acidic** · Apr 27th, 2004, 04:49 PM

Yeah, I was about to thank CB too, but though he might think I'm a big softy. And I haven't quite been here long enough anyways. but here's goes anyways. Thank for all the help from me and everyone who has ever been helped by you. you really make a great addition to this forum.

**CornedBee** · Apr 27th, 2004, 04:52 PM

Thanks

Oh, and I'm only 19...

**Acidic** · Apr 27th, 2004, 04:58 PM

Originally posted by CornedBee
Oh, and I'm only 19...

seriously?? I'm 18, now that just makes me look bad.

**NoteMe** · Apr 27th, 2004, 04:59 PM

Me and Acidic can't win on age either...

...well....there is probably something I know more about then you. ..

....I waithed to long before starting to explore anything else then VB. I hate my self for that now. I will never get those years back. Well....thats probably why I have more or less stoped to eat and sleep the last year to get back on top of everything. But there is to much to learn, to little time. I always have 5-6 projects that I am doing simultaneously....

....well well...as I said, waith 4-5 years and I am there..

Why couldn't it be a check box to not make this post count as a post count.....I hate that...

**CornedBee** · Apr 27th, 2004, 05:02 PM

Ah, but this way you get a chance to catch up to my 7000 posts

**NoteMe** · Apr 27th, 2004, 05:11 PM

I actually don't care about the post count. It doesn't say anything about your skills. I have seen persons here that are way more skilled then me with a lot fewer posts, and persons that are that have more or less the same post count as me in only a few months that have only asked silly questions.

I am not saying that non of my posts are silly, but I like to think that I have sometihing to teach away, at least in the game/graphics section.

**Jop** · Jul 30th, 2004, 05:23 AM

Originally posted by NoteMe
But you are still using one div, H1 and a br, I still can't see that it's easier then just using a two cell table. But maybe you are right,

I like to hook up on that.
What you´re saying in that sentence is actually the big advantage of using proper html. The fact that you use a H1 for a heading is the point of this ´new-school´ html coding. It actually used to be that way since the beginning but nobody (including me a while ago) cared as long as it looked good in the browser you were designing for.

I can talk about this for hours, but Doug Bowman already wrote a great article on why this new style coding is good:
http://www.stopdesign.com/articles/throwing_tables/

Try http://www.alistapart.com for more information.

Thread: CSS - forcing text at top of cell [resolved]

Thread Tools

Display

CSS - forcing text at top of cell [resolved]

Posting Permissions