SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best way for form alignment? table or css?

    Hi guys,
    Is there way to make form align properly across different browser? IE is always give me problems argg...
    I did google for answers. However, i came across website suggest that using table to align is not recommended. They recommend to use css but i can't achieve what i want(the picture below). Kindly help me please... thanks


  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Always post your HTML & CSS if you want help.

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there shaunysj,

    try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    body {
        font-family:verdana,arial,sans-serif;
        font-size:16px;
        background-color:#f0f0f0;
     }
    #form-1 {
        width:275px;
        padding:10px 20px 0;
        background-color:#000;
     }
    #form-1 label {
        float:left;
        clear:both;
        width:82px;
        margin-bottom:10px;
        font-size:90%;
        color:#fff;
     }
    #form-1 input {  
        width:174px;
        margin-bottom:10px;
     }  
    </style>
    
    </head>
    <body>
    
    <form id="form-1" action="#">
    
    <div>
     <label for="lgn">Login:</label>
     <input id="lgn" type="text">
    
     <label for="pwd">Password:</label>
     <input id="pwd" type="text">
    </div>
    
    </form>
    
    </body>
    </html>
    
    coothead

  4. #4
    SitePoint Member
    Join Date
    May 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coothead View Post
    Hi there shaunysj,

    try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    body {
        font-family:verdana,arial,sans-serif;
        font-size:16px;
        background-color:#f0f0f0;
     }
    #form-1 {
        width:275px;
        padding:10px 20px 0;
        background-color:#000;
     }
    #form-1 label {
        float:left;
        clear:both;
        width:82px;
        margin-bottom:10px;
        font-size:90%;
        color:#fff;
     }
    #form-1 input {  
        width:174px;
        margin-bottom:10px;
     }  
    </style>
    
    </head>
    <body>
    
    <form id="form-1" action="#">
    
    <div>
     <label for="lgn">Login:</label>
     <input id="lgn" type="text">
    
     <label for="pwd">Password:</label>
     <input id="pwd" type="text">
    </div>
    
    </form>
    
    </body>
    </html>
    
    coothead
    Hey! thanks a lot! This work flawless even on IE.

  5. #5
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're very welcome.

    coothead


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
  •