Simple forms for recent Table convert

Discussion in 'CSS' started by IsmAvatar, Jun 17, 2008.

0
  1. #1
    As the title suggests, I've recently made the philosophical conversion from Tables to Css.
    The first matter at hand, now, is converting a simple form over from this:

    <table><tr><td>Username (in game):</td><td><input type="text" name="user" /></td></tr>
<tr><td>Password:</td><td><input type="password" /></td></tr>
<tr><td></td><td><input type="submit" /></td></tr></table>
    HTML:
    into something like this:

    <style>
label {
 display: block;
 width: 4em;
 float: left;
 text-align: right;
 padding-right: 0.5em;
}
.submit { margin-left: 4.5em; }
</style></head><body>
<p><label for="user">Username (in game):</label>
 <input type=text name="user" /></p>
<p><label for="pass">Password:</label>
 <input type=password name="pass" />Stuff</p>
<p class="submit"><input type="submit" /></p>
    HTML:
    And of course, needless to say, it turned out ugly. The second form element is indented because the first element's text is wrapped (I want it to wrap).

    What is the appropriate way to deal with this?

    -IsmAvatar
     
    IsmAvatar, Jun 17, 2008 IP