SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Tableless form problem (IE6 screws up the alignment)

    Hello,

    I'm trying my luck implementing my first tableless form layout, however (as usual) I'm having problems with IE6. I uploaded a stripped down version of the page for you to check out:

    http://www.link7.ro/misc/cssd/fields1.html

    As you can see the description should start at 155px which is 150px - the width of the label plus 5px - the left margin of the input. But it's misaligned because IE decides that there should be some extra space in front of the text fields (or after the labels?). Extra space which I can't get rid of. I tried with padding 0 and margin 0 to no avail...

    The differences are more visible on this coloured version:

    http://www.link7.ro/misc/cssd/fields2.html

    Please suggest fixes / hacks / whatever...

    Thanks.
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To accomplish what you want I would use 2 divs inside the main div 1 floated left and 1 floated right of the appropriate widths. Then put the left content in the left and the right content in the right.

    That will give you the 2 columns without having to line up each row.

    If you need better control than that then I would make each row a div, then float a div left and float a div right.

    Hope this helps...
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually do something like this:

    HTML Code:
    <label for="name"><span>Name:</span><input type="text" name="name" id="name" /></label>
    
    /* CSS */
    label { display: block; }
    label span { float: left; width: 5em; margin-right: 10px; }
    You don't need the additional divs.

  4. #4
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Tyssen: But what do I do if I want a short description to be placed right under the text input? Aligned with the input, just like in my examples...
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  5. #5
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Following your example I got to this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    
    label { display: block; }
    label span { float: left; width: 150px; margin-right: 0px; text-align: right; }
    .description { margin-left: 150px; }
    
    </style>
    <link rel="stylesheet" href="menu.css" type="text/css" />
    <script type="text/javascript" src="pcactiv.js"></script>
    </head>
    <body>
    <label for="name"><span>Name:</span><input type="text" name="name" id="name" /></label>
    <div class="description">a</div>
    </body>
    </html>
    Here it is live: http://www.link7.ro/misc/cssd/fields3.html
    Unfortunately the same problem persists. The description is misaligned in IE.
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The description is misaligned in IE.
    If you are trying to kill the space between the input and the text then add this.

    Code:
    label input{float:left}
    .description{clear:both}

  7. #7
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's like... PERFECT.
    Thanks again Paul!
    Science is magic that works!
    -- Kurt Vonnegut Jr.


Bookmarks

Posting Permissions

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