Can't get the vertical-align:top to work

[tshad]

I have the following code:
****************************************************************************
*
<tr >
<td style="vertical-align:top" >By State:
<select name="ByState" onchange="__doPostBack('ByState','')"
language="javascript" id="ByState" columns="3">
<option selected="selected" value="ALL">All</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
</select>
&nbsp;By City:
<select name="ByCity" size="3" multiple="multiple" id="ByCity"
style="width:160px; border-style:inset">
</select>
</td>
</tr>
****************************************************************************
****

I am trying to get all the text and labels to go the top of the cell. The
problem is that they go to the bottom of the cell. The ByCity listbox is
the size of 3.

I tried this:

<td style="vertical-align:top" >

And I also tried:

<tr style="vertical-align:top" >

But neither one seems to work.

Thanks,

Tom

 

[Els]

I have the following code: [snip code snippet]
I am trying to get all the text and labels to go the top of the cell. The
problem is that they go to the bottom of the cell. The ByCity listbox is
the size of 3.

How about a url so that we can see what you're doing wrong?

 

[tshad]

I have the following code: [snip code snippet]
I am trying to get all the text and labels to go the top of the cell.
The
problem is that they go to the bottom of the cell. The ByCity listbox is
the size of 3.

How about a url so that we can see what you're doing wrong?

Sorry, I thought that would be enough.

I also don't have that code as I worked around it to make it work. Here is
some other examples where I am having similar problems

http://www.payrollworkshop.com/samples/testalign2.htm
http://www.payrollworkshop.com/samples/testalign2.htm

 

[tshad]

I have the following code: [snip code snippet]
I am trying to get all the text and labels to go the top of the cell.
The
problem is that they go to the bottom of the cell. The ByCity listbox
is
the size of 3.

How about a url so that we can see what you're doing wrong?

I accidently hit the send button before I finished.

I also don't have that code as I worked around it to make it work. Here is
some other examples where I am having similar problems

http://www.payrollworkshop.com/samples/testalign2.htm
http://www.payrollworkshop.com/samples/testalign3.htm
http://www.payrollworkshop.com/samples/testalign4.htm
http://www.payrollworkshop.com/samples/testalign5.htm

The problem is only in IE. Mozilla and Netscape seem to handle it fine.

In these - the word "First:" is not lined up to the right of the Cell. It
seems either the row above or the row below seem to be affecting it. If I
take out the cell above or below it, it seems to line up fine. Taking out
the "nowrap"s helps, but doesn't solve the problem. I can increase the cell
by a lot and that and that seems to help.

The question is: if it is to be aligned right, why does it end up in the
middle of the cell (testalign2.htm), anyway?

Thanks,

Tom

 

[Els]

I have the following code:
[snip code snippet]
I am trying to get all the text and labels to go the top of the cell.
The problem is that they go to the bottom of the cell. The ByCity
listbox is the size of 3.

How about a url so that we can see what you're doing wrong?

I also don't have that code as I worked around it to make it work. Here is
some other examples where I am having similar problems

http://www.payrollworkshop.com/samples/testalign2.htm
http://www.payrollworkshop.com/samples/testalign3.htm
http://www.payrollworkshop.com/samples/testalign4.htm
http://www.payrollworkshop.com/samples/testalign5.htm

The problem is only in IE. Mozilla and Netscape seem to handle it fine.

In these - the word "First:" is not lined up to the right of the Cell. It
seems either the row above or the row below seem to be affecting it. If I
take out the cell above or below it, it seems to line up fine. Taking out
the "nowrap"s helps, but doesn't solve the problem. I can increase the cell
by a lot and that and that seems to help.

The question is: if it is to be aligned right, why does it end up in the
middle of the cell (testalign2.htm), anyway?

Why don't you use CSS instead of inline HTML styles?
Even if only to apply this rule *{border:1px solid red;}, which shows
that the word First is right aligned in the DIV that you put inside
that TD.
I don't do HTML table layouts, and at first sight I can't figure out
why the DIV doesn't stretch to the right of the TD, but I think it has
to do with a DIV being a block element and leaving some space to the
right of it. If I use CSS to set the width of the DIVs to any size at
all (except %), it instantly stretches to fill the TD.

If you were using CSS, this would be easy (for me) ;-)

 

[tshad]

I have the following code:
[snip code snippet]
I am trying to get all the text and labels to go the top of the cell.
The problem is that they go to the bottom of the cell. The ByCity
listbox is the size of 3.

How about a url so that we can see what you're doing wrong?

I also don't have that code as I worked around it to make it work. Here
is
some other examples where I am having similar problems

http://www.payrollworkshop.com/samples/testalign2.htm
http://www.payrollworkshop.com/samples/testalign3.htm
http://www.payrollworkshop.com/samples/testalign4.htm
http://www.payrollworkshop.com/samples/testalign5.htm

The problem is only in IE. Mozilla and Netscape seem to handle it fine.

In these - the word "First:" is not lined up to the right of the Cell.
It
seems either the row above or the row below seem to be affecting it. If I
take out the cell above or below it, it seems to line up fine. Taking
out
the "nowrap"s helps, but doesn't solve the problem. I can increase the
cell
by a lot and that and that seems to help.

The question is: if it is to be aligned right, why does it end up in the
middle of the cell (testalign2.htm), anyway?

Why don't you use CSS instead of inline HTML styles?
Even if only to apply this rule *{border:1px solid red;}, which shows
that the word First is right aligned in the DIV that you put inside
that TD.
I don't do HTML table layouts, and at first sight I can't figure out
why the DIV doesn't stretch to the right of the TD, but I think it has
to do with a DIV being a block element and leaving some space to the
right of it. If I use CSS to set the width of the DIVs to any size at
all (except %), it instantly stretches to fill the TD.

Ok.

Here are 3 new pages.

In http://www.payrollworkshop.com/samples/testalign6.htm, I took out the
<div> and I added it to "Last Name". Same result: "First Name" is not right
justified and "Last Name" is.

In http://www.payrollworkshop.com/samples/testalign7.htm, I cut out a bunch
of text from the paragraph and now it lines up. But what is really
happening is that "First Name" is in the same place (like it was absolute
positioned or something) and the cell just got smaller.

In http://www.payrollworkshop.com/samples/testalign8.htm, I used CSS for the
"First Name":

style="text-align:right; vertical-align:bottom"

No affect.

All these pages work correctly (or how I would have expected). I am only
having the problem with IE.

Thanks,

Tom

 

[solitaire]

I have the following code:
****************************************************************************
*
<tr >
<td style="vertical-align:top" >

<td valign=top>

KISS rule in effect.

 

[tshad]

<td valign=top>

KISS rule in effect.

This is what I usually do.

The problem is that whenever I do, someone is telling me I should use CSS
styles instead.

I'm not really sure where I should be using CSS and where not.

Tom

 

[Adrienne]

This is what I usually do.

The problem is that whenever I do, someone is telling me I should use
CSS styles instead.

I'm not really sure where I should be using CSS and where not.

Tom

If you remove all the presentation from your markup, then it's pretty easy
to use CSS to style that markup. Of course, the markup has to be valid for
that to work, but that's not that difficult either.

I use two stylesheets, one for positioning, and one for colors. That way,
changing the theme of a site is really, really easy.

 

[edwatki]

Hi,

Ok the problem is your specifying the td width of the firstname field. You need to delete the width.

Change the code to be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>:: Staffing Workshop ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-top: 31px;
}
.style1 {
font-size: 18px;
font-weight: bold;
}
-->
</style>

<style type="text/css">
<!--
.style2 {color: #FF0000}
.style3 {color: #D4D0C8}
.leftlink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #5C5C5C;
text-decoration: none;
font-weight:bold;
}
.errorMessage{
font-size:8pt;
font-weight:bold;
color:red;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>

</head>

<body>
<table border="0" cellspace="0" cellpadding="0" width="569" >
<tr valign="baseline">
<td colspan="2"><blockquote>
<div align="justify">Please provide us with the following information so that we may create your account. Once you successfully submit the information to StaffingWorkshop, you will receive an email with your temporary login credentials. </div>
</blockquote></td>
</tr>
<tr valign="baseline">
<td align="right" valign="baseline" >First Name:</td>
<td width="420" align="left" >
<input name="firstName" type="text" size="20" id="firstName" />
</td>
</tr>

<div id="Password"> </div>
<div id="retypePassword">
<tr valign="baseline">
<td align="right" valign="middle" ><span class="style2">*</span> Retype Password:</td>
<td align="left" >
<input name="password2" type="password" size="20" id="password2" />
</td>
</tr>
</div>
</table>
</body>
</html>