Reply Subscribe

Shane · 17th July 2010

I have everything else 100% placed perfectly except for this dang login button. It is either 2 pixels to the right or 2 pixels to the right and a few pixels down. I have tried everything I can think of but can't get it to work. It is driving me crazy. Both html and css passed the w3.org validators.

Browser Views

index.html

<!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>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="login_background">
		<div id="login_content">
			<form name="login_form" style="margin: 0px; padding: 3px; text-align: left;" action="index.php" method="post">
                &nbsp;<label class="text_login">Username:</label><br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div id="login_image_user"></div> <input name="username" type="text" class="FormFont" style="width: 237px;" tabindex="1" value="" />
                &nbsp;<label class="text_login">Password:</label><br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div id="login_image_pass"></div> <input tabindex= "2" type="password" class="FormFont" name="password" style="width: 237px;" value="" /><br /><br />
                <div id="login_label_remember"><label class="text_login">Remember me?</label> <input tabindex= "3" type="checkbox"  name="rememberme" /></div>
                <div id="login_submit"><input tabindex= "4" type="submit" class="FormFont" style="color: #CCCCCC; width: 50px;" name="login" value="Login" /></div>
			</form>
		</div>
    </div>
	<div id="login_footer">	
		&copy;2010 Shane Wellington - <a href="mailto:shane@darkflaw.com">Contact</a> - <a href="http://blog.darkflaw.com">Blog</a>
    </div>
</body>
</html>

style.css

body {
	background-color: #4e4e4e;
	padding: 0px;
	margin: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #36b474;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #36b474;
}
a:hover {
	text-decoration: none;
	color: #36b474;
}
a:active {
	text-decoration: none;
	color: #36b474;
}
.FormFont {
	font-family: tahoma;
	font-size: 13px;
	color: #36b474;
	background-color: #333333;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}
.text_login {
	font-family: tahoma;
	font-size: 13px;
	color: #CCCCCC;
}
#login_background {
	height: 294px;
	width: 500px;
	background-image: url('images/login_background.jpg');
	margin: 80px auto; 
	padding: 0;
	text-align: left;
}
#login_content {
	height: 129px;
	width: 278px;
	position: relative; left: 111px; top: 83px;
}
#login_label_remember {
	height: 13px;
	width: 115px;
	position: absolute; left: 7px; top: 99px;
}
#login_image_user {
	height: 16px;
	width: 16px;
	background-image: url('images/login_user.png');
	position: absolute; left: 8px; top: 24px;
}
#login_image_pass {
	height: 16px;
	width: 16px;
	background-image: url('images/login_pass.png');
	position: absolute; left: 8px; top: 63px
}
#login_submit {
	width: 50px;
	height: 20px;
	position: relative; left: 219px; top: 0px;
}
#login_footer{
	width: 173px;
	height: 9px;
	position: absolute; left: 50%; margin-left: -86px; top: 313px;
	text-align: right;
	font-size: 10px;
}

**Wipmuck** · 17th July 2010

You could just either use a table insted of this shit

Code:

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Shane · 17th July 2010

Wipmuck posted:

You could just either use a table insted of this shit

Code:

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Yea I had that fixed with CSS but forgot to save and lost it and havn't gotten to it again. The problem still existed with that all fixed.

Sharpshooter · 17th July 2010

Wipmuck posted:

You could just either use a table insted of this shit

Code:

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Why would he use a table? They are for storing tabular data, using them in order to aid design provides no advantages what so ever over CSS.

**andersonmat** · 17th July 2010

Don't make everything absolutely positioned. It will change just a little from browser to browser. I suggest you make everything CSS and go from there. It's not too hard.

**binarybitz** · 17th July 2010

Buttons aren't the same throughout browsers. You could use an image instead. Otherwise just add more space to the design.

Shane · 17th July 2010

Redid the positioning and the switched to a image button but the problem still seems to exist. It is weird that this only affects one element.

You can view it here for live edits: http://dev.darkflaw.com/

**jaybuz** · 17th July 2010

Instead of using that DIV to contain the FORM, use the form itself. But the background in the FORM and position it etc. Then from there you can use float to align everything easier.

Shane · 18th July 2010

jaybuz posted:

Instead of using that DIV to contain the FORM, use the form itself. But the background in the FORM and position it etc. Then from there you can use float to align everything easier.

I ditched the background div and set the forms background as what the div was. This fixed all of chrome's issues and firefox is still 2 pixels to the right, I think I will just leave it as is since all the other browsers work except firefox and it is only 2 pixels.

**andersonmat** · 18th July 2010

Lazy one you are, and it's an easy fix.

Shane · 18th July 2010

andersonmat posted:

Lazy one you are, and it's an easy fix.

Then how? I have been testing this for days, I know like 1% about html and css.

shadowplay · 18th July 2010

So I got pretty bored and decided to make a CSS3 version of this, without the background image. I tidied up the code as well, but this isn't perfect.

It works great in Firefox, Opera, and Chrome. It uses multiple box-shadows, so IE has no big border or shadow, but it looks surprisingly ok. If you want to support IE fully, you could easily use your background image again (but you might want to crop it to just the bit you need).

The main thing to remember is, it's rarely a good idea to wrap everything in divs and position them exactly. Style the elements you want styled, and try to let the browser do as much of the positioning as it can itself!

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form name="login_form" action="index.php" method="post">
        <label for="username">Username:<br />
        <img src="images/login_user.png" /></label><input id="username" name="username" type="text" tabindex="1" /><br />
        <label for="password">Password:<br />
        <img src="images/login_pass.png" /></label><input id="password" tabindex= "2" type="password" name="password" /><br /><br />
        <label for="rememberme">Remember me?</label><input id="rememberme" tabindex= "3" type="checkbox"  name="rememberme" />
        <input id="submit" tabindex= "4" type="submit" name="login" value="Login" />
    </form>
	<div id="login_footer">
		&copy;2010 Shane Wellington - <a href="mailto:shane@darkflaw.com">Contact</a> - <a href="http://blog.darkflaw.com">Blog</a>
    </div>
</body>
</html>

body {
	background-color: #4e4e4e;
	padding: 0px;
	margin: 0px;
}
a:link, a:visited, a:hover, a:active {
	color: #36b474;
	text-decoration: none;
}
form {
	width: 267px;
    margin: 155px auto 0;
	font-family: tahoma;
	font-size: 13px;
	color: #CCCCCC;
    padding: 5px 6px 6px 7px;
    border: 1px solid black;
    box-shadow: 0 0 0 10px #2A2A2A, 0 0 0 11px black, inset 2px 2px 7px black, 6px 10px 7px 11px black;
   -moz-box-shadow: 0 0 0 10px #2A2A2A, 0 0 0 11px black, inset 2px 2px 7px black, 6px 10px 7px 11px black;
   -webkit-box-shadow: 0 0 0 10px #2A2A2A, 0 0 0 11px black, inset 2px 2px 7px black, 6px 10px 7px 11px black;
}
form img {
    display: block;
    padding-top: 4px;
    float: left;
}
#username, #password {
    width: 240px;
    margin: 2px 0;
    float: right;
	color: #36b474;
	background-color: #333333;
    border: 1px solid black;
}
#submit {
	width: 50px;
	height: 20px;
	float: right;
    color: #CCCCCC;
	background-color: #333333;
    border: 1px solid black;
}
#login_footer{
	width: 278px;
	margin: 23px auto 0;
	text-align: center;
	font-size: 10px;
}

Shane · 18th July 2010

shadowplay posted:

.. awesomeness..

Thanks for this, it really is a good reference point. I can see I have a lot to learn.