1. Post #1
    Shane's Avatar
    March 2010
    336 Posts
    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;
    }
    

  2. Post #2
    :^)
    Wipmuck's Avatar
    May 2009
    1,759 Posts
    You could just either use a table insted of this shit
    Code:
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  3. Post #3
    Shane's Avatar
    March 2010
    336 Posts
    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.

  4. Post #4
    Sharpshooter's Avatar
    April 2007
    1,230 Posts
    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.
    Reply With Quote Edit / Delete Reply United Kingdom Show Events Agree Agree x 1 (list)

  5. Post #5
    Gold Member
    andersonmat's Avatar
    May 2008
    2,607 Posts
    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.
    Reply With Quote Edit / Delete Reply United States Show Events Agree Agree x 1 (list)

  6. Post #6
    Gold Member
    binarybitz's Avatar
    February 2005
    455 Posts
    Buttons aren't the same throughout browsers. You could use an image instead. Otherwise just add more space to the design.

  7. Post #7
    Shane's Avatar
    March 2010
    336 Posts
    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/

  8. Post #8
    Gold Member
    jaybuz's Avatar
    May 2006
    5,516 Posts
    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.


  9. Post #9
    Shane's Avatar
    March 2010
    336 Posts
    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.

  10. Post #10
    Gold Member
    andersonmat's Avatar
    May 2008
    2,607 Posts
    Lazy one you are, and it's an easy fix.
    Reply With Quote Edit / Delete Reply United States Show Events Dumb Dumb x 1 (list)

  11. Post #11
    Shane's Avatar
    March 2010
    336 Posts
    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.

  12. Post #12
    shadowplay's Avatar
    November 2007
    53 Posts
    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;
    }
    

  13. Post #13
    Shane's Avatar
    March 2010
    336 Posts
    .. awesomeness..
    Thanks for this, it really is a good reference point. I can see I have a lot to learn.