Thread: CSS alignment

    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2002
    Posts
    607
    Rep Power
    13

    CSS alignment


    HI,

    I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows:

    Code:
    .row {
      height: 30px;
      vertical-align: text-top;
    }
    
    .formField {
      border: 1px solid #666;
      width: 150px;
      background: #FFFFFF;
      color: #000000;
    }
    
    
    <body>
    
       <div class="row">
       xxxxx: <input type="text" class="formField">
       </div>
     
    </body>
    The textbox is sitting just above the text. How can I get them lined up properly?
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    I don't think you can with just css...
    Works with tables though...
    Code:
    <table>
    <tr>
    <td>XXXXX: <input type="text" class="formField"></td>
    </tr>
    </table>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2002
    Posts
    607
    Rep Power
    13
    Gotta be a way. If not then I can laugh in the face of all the CSS zealots out there.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    7
    Rep Power
    0

    reducing hieght of a textbox


    Hi, I was wondering if there were a way of reducing the height of a textbox in a form field? height="?" does nothing.

    Thanks in advance,

    Tom
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Austin
    Posts
    126
    Rep Power
    11
    The easiest solution to your problem could be solved like this.
    PHP Code:
    .formField {
      
    border1px solid #666;
      
    width150px;
      
    background#FFFFFF;
      
    color#000000;
      
    position:relative;
      
    top:2px;
    }

    <
    body>
    xxxxx: <input type="text" class="formField">
    </
    body
    Hope this was helpful.

    skycast:
    You can change the height of textbox using css.
    Try putting style="height:45px;" into the tags of your textbox.
  10. #6
  11. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    This works...
    Code:
    <html>
    <body>
    <form>
    <input type="text" style="width:100px; height:15px; font-size:8px;" />
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo