Wratox1
Member
- Reaction score
- 22
Hello, im trying to create the loginpage for my site, but i have a cross-browser problem..
here is a rough picture on how i have now in google chrome:
in internet explorer:
and in firefox:
in the pictures the username, password and remember are in the same form as the login-button, the register- and cancel-buttons are two completely separate forms.
if you look close(on chrome and firefox) you can see that the buttons are not centered, and i them to, if i put a center-tag around the buttons they all look like internet explorerexcept that theyre centered..
and this is my code:
here is the css code:
anyone have a clue on how i could center the buttons and make it look the same in all browsers without using different pages for each browser or checking which browser the user have?
here is a rough picture on how i have now in google chrome:
in internet explorer:
and in firefox:
in the pictures the username, password and remember are in the same form as the login-button, the register- and cancel-buttons are two completely separate forms.
if you look close(on chrome and firefox) you can see that the buttons are not centered, and i them to, if i put a center-tag around the buttons they all look like internet explorerexcept that theyre centered..
and this is my code:
Code:
<div id="loginbox">
<form name="login" action="action" method="POST" class="form">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="input" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="input" />
<label for="remember">Remember me?</label> <input type="checkbox" name="remember" id="remember" value="yes"/>
<input type="submit" name="login" value="Log in" class="loginsubmit" />
</form>
<form name="register" action="/register" method="POST" class="form">
<input type="submit" name="register" value="Register" class="loginsubmit" />
</form>
<form name="cancel" action="<?php echo $_SESSION['lastpage']; ?>" method="POST" class="form">
<input type="submit" name="cancel" value="Cancel" class="loginsubmit" />
</form>
</div>
here is the css code:
Code:
#loginbox
{
position:relative;
padding:4px;
width:25%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
border: 5px solid #6698FF;
}
#loginbox .form
{
padding:0;
margin:0;
}
.input
{
color:#6698FF;
font-size:100%;
font-family: 'Orbitron';
}
.loginsubmit
{
background-color: #6698FF;
color: #000000;
border: 1px solid #6698FF;
font-family: 'Orbitron';
font-size:100%;
margin-top:10px;
}
anyone have a clue on how i could center the buttons and make it look the same in all browsers without using different pages for each browser or checking which browser the user have?