Text aligning

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am curious as to why HTML doesn't line up the objects in a cell the way
you ask.  Each object seems to be dependant on the other.

For example, in the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<body id="myBody">
 <form name="addForm" method="post" action="resumeSubmit.aspx" id="addForm">
  <table width="612" border="1" >
     <td style="vertical-align:top" nowrap>&nbsp;
      Resume Title: <input name="ResumeTitle" type="text" value="DataBase
Administrator 3" size="45" id="ResumeTitle" />

The way this seems to work is that the text is always in the middle of the
textbox.  So the textbox goes to the top and the text will still be at the
middle of the textbox.  If you delete the textbox, the text moves to the top
of the cell.

If you have an image, the bottom of the image will be at the bottom of the
text (which puts the text at the bottom of the image).  The if there is a
text box, that will be a little bit lower (as the text is always at the
middle of the textbox).

Now you can change the valign (or vertical-align) to (top, bottom middle,
baseline etc) and all will move as one.  If you say top, the image will go
to the top of the box and all the other objects will be in relation to the
image (as specified before).  If you say valign="Bottom", the textbox will
go to the bottom (as it is the lowest object) and everything will move in
relation to that.

The problem is I want to put all all the objects in the middle so that the
text will be in the middle  (but next to) the image and the text box at the
middle of the text box.

Is there anyway to do this without putting each in their own cell?

This is actually part of a data table where I want to put text and an image
as well as a text box for editing the data.



Re: Text aligning

tshad wrote:

Quoted text here. Click to load it

4.01 Transitional Doctype with no URL. This will trigger Quirks mode in many

Quoted text here. Click to load it

Rather pointless non-breaking space there.

Quoted text here. Click to load it

Weird mix of XHTML and HTML style syntax here.

Quoted text here. Click to load it

The text and the input are set out in a line. That line is an anonymous
inline box. It is that box which is aligned to the top of the cell.

The trick is to apply the vertical-align property to the input and position
it on the line (in that anonymous inline block).

David Dorward       <http://blog.dorward.me.uk/ <http://dorward.me.uk/
                     Home is where the ~/.bashrc is

Site Timeline