//flex table opened by JP
PDA

Click to See Complete Forum and Search --> : HTML/CSS help

cesc
09-06-2008, 05:37 PM
Hi. Consider the following 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.
Train
09-06-2008, 06:15 PM
How about this?


<!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>
cesc
09-06-2008, 07:01 PM
It looks perfect on Firefox but not on IE
Train
09-06-2008, 08:47 PM
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. :(
causticVapor
09-28-2008, 04:53 PM
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 :rolleyes:

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

<!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>
Train
09-28-2008, 09:07 PM
Excellent and THANKS for posting the fix!