Results 1 to 6 of 6

Thread: HTML/CSS help

  1. #1
    Member
    Join Date
    Feb 2007
    Posts
    66

    HTML/CSS help

    Hi. Consider the following code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>Login</title>
    
    <style type="text/css">
    #login label {
      position:absolute;
    }
    
    input {
      margin-left:5.5em;
      margin-bottom:.2em;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="login">
    <p><b>Login to your account</b></p>
    
    <label>Email:</label><input type="text" name="email" size="30" /><br />
    <label>Password:</label><input type="password" name="password" size="30" /><br />
    <input type="checkbox" name="remember" /><p>Remember me on this computer</p>
    <input type="submit" value="Sign in" />
    
    <div id="signup">
    
    <p>Don't have an account?<br /><a href="#">Sign up!</a></p>
    </div>
    
    </div>
    
    </body>
    </html>
    The checkbox is right where I want it, but I would like to put the sentence "Remember me on this computer" to the right of it, but I can't figure out how to do that. Any help would be appreciated. Thanks.

  2. #2
    Lifetime Friend of Staff
    Join Date
    May 2007
    Location
    Sheboygan, WI
    Posts
    3,921
    How about this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Login</title>
    <style type="text/css">
    #login label {
      position:absolute;
    }
    input {
      margin-left:5.5em;
      margin-bottom:.2em;
    }
    </style>
    </head>
    <body>
    <div id="login">
    <p><b>Login to your account</b></p>
    <label>Email:</label><input type="text" name="email" size="30" /><br />
    <label>Password:</label><input type="password" name="password" size="30" /><br />
    <input type="checkbox" name="remember" /><b>Remember me on this computer</b>
    <input type="submit" value="Sign in" />
    <div id="signup">
    <p>Don't have an account?<br /><a href="#">Sign up!</a></p>
    </div>
    </div>
    </body>
    </html>

  3. #3
    Member
    Join Date
    Feb 2007
    Posts
    66

    Unhappy

    It looks perfect on Firefox but not on IE

  4. #4
    Lifetime Friend of Staff
    Join Date
    May 2007
    Location
    Sheboygan, WI
    Posts
    3,921
    I see the check box is one or 2 spaces to the left.

    Humm, add a space in front of "checkbox" and see if it renders up right.

    Experiment time I guess.

  5. #5
    Ultimate Member
    Join Date
    Aug 2002
    Posts
    3,922
    Hey

    Found a fix for this...tried all kinds of things including tables....the way to do it seems to be to have a custom style for IE

    So Now this will work in both FF and IE. Webkit browsers render it fine too.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Login</title>
    <style type="text/css">
    #login label {
      position:absolute;
    }
    input {
      margin-left:5.5em;
      margin-bottom:.2em;
    }
    </style>
    
    <!--[if IE]><style type="text/css">input#remember {margin-left:4.4em}</style><![endif]-->
    
    
    </head>
    <body>
    <div id="login">
    <p><b>Login to your account</b></p>
    <label>Email:</label><input type="text" name="email" size="30" /><br />
    <label>Password:</label><input type="password" name="password" size="30" /><br />
    <input type="checkbox" name="remember" id="remember"/><b>Remember me on this computer</b>
    <input type="submit" value="Sign in" />
    <div id="signup">
    <p>Don't have an account?<br /><a href="#">Sign up!</a></p>
    </div>
    </div>
    </body>
    </html>

  6. #6
    Lifetime Friend of Staff
    Join Date
    May 2007
    Location
    Sheboygan, WI
    Posts
    3,921
    Excellent and THANKS for posting the fix!

Posting Permissions

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