Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to line up Form with CSS correctly.

    Would you know why this looks all screwy in Win/IE6 (and probably others)?:

    http://www.jamesmawdsley.com/haveyoursay.html
    http://www.jamesmawdsley.com/layout1.css

    (Looks fine in Mac Safari.)

    Here's CSS:

    div.row {
    clear: right;
    padding-top: 5px;
    }

    div.row span.label {
    float: left;
    width: 70px;
    text-align: right;
    }

    div.row span.formw {
    float: right;
    width: 400px;
    text-align: left;
    }

    It all appears too far to the right, but if I reduce the 400px width, it comes in left abit, but in safari it moves rightwards...what's with that?

    What's the best way to get it all lined up nicely?
    (I got the code from the ALA tips:http://www.alistapart.com/articles/practicalcss/)

    Thanks everyone

    Andrew.

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this out. It should align the text inputs, although you'll still need to tweak where the buttons are appearing.

    Code:
    div.row
      {
      clear: right;
      padding-top: 5px;
      }
    
    div.row span.label
      {
      float: left;
      width: 70px;
      text-align: right;
      padding-right:1em;
      }
    
    div.row span.formw
      {
      ...deleted everything here...
      }
    Also, where you are using <span class="label"> you'd benefit from using the actual <label> element: http://www.htmldog.com/guides/htmladvanced/forms/
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry Andrew, ignore what I just sain in my email

    Get rid of the ALA stuf, and just put this in your css, then you'll be halfway there

    Code:
    input {
    margin-left: 100px;
    display: block;
    }
    textarea {
    margin-left: 100px;
    display: block;
    }
    Gary

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one chaps.

    This works:

    div.row
    {
    clear: right;
    padding-top: 5px;
    }

    div.row span.label
    {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 1em;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •