-
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.
-
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>
-
It looks perfect on Firefox but not on IE
-
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.
-
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>
-
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
-
Forum Rules
|
|