#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    4
    Rep Power
    0

    Textarea vertical alignment


    If I have just a label and textarea inside a TD, the textarea aligns to the top of the td just fine. If I have a textbox and a textarea, the textarea comes down a bit, looks bad and wastes space on a busy form. How can I get the textarea to stay at the top?

    <td class=row-label align=left valign=top>
    TextBox:<input type="text" class=info size=6 name="tid" >
    TextArea:<textarea class=info
    style="vertical-align:text-top;font-family:Arial"
    rows=2 cols=50 name="t2id"></textarea>
    </td>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    23
    Rep Power
    0
    How does this look:

    <table><tr><td class=row-label align=left valign=top>
    TextBox:<input type="text" class=info size=6 name="tid" >

    TextArea:</td><td><textarea class=info
    style="vertical-align:text-top;font-family:Arial"
    rows=2 cols=50 name="t2id"></textarea>
    </td>
    </tr></table>

    Just an example table - Now the tops are aligned. It requires including the "Textarea:" text in the same td.

    I think this is what you want - I dunno, there might be something more streamlined, I just have to play around with it.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    4
    Rep Power
    0
    caustic vapor,

    Thanks for your reply, however, if you look again, you will see that I do have the textbox and the textarea in the same td, I just did not show the table and tr. Does the top of the textbox line up exactly with the textarea on your machine? Mine is about 1/8 inch lower. If yours is exact, then perhaps IE is the problem.
    Let me know!

    Thanks for your help!
  6. #4
  7. No Profile Picture
    The one who gets it done
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Madison, WI
    Posts
    395
    Rep Power
    14
    Try adding style="padding: 0px;" to the td tag. Does that help?
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    4
    Rep Power
    0
    Setting the padding to zero did not make any difference, the textarea is still offset from the textarea. It was a good thought, though. I also tried setting the margin to 0px to no affect.

    I also tried wrapping it in a span and div. If I wrap it in a div, I can force the positioning (230,-20px) but that screws up the flow, so now a huge space is allocated where the div would naturally be positioned.

    Somehow, I need to control the flow or baseline or something.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    4
    Rep Power
    0
    I am so happy, thanks to your ideas, I did figure it out.
    I changed style="vertical-align:text-top; to
    style="vertical-align:top;

    Makes perfect sense!
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    23
    Rep Power
    0
    Ah! I should have seen that myself. Oh well, good luck.

IMN logo majestic logo threadwatch logo seochat tools logo