Forms and browsers

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:
form.jpg

in internet explorer:
form2.jpg

and in firefox:
form3.jpg


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?
 

Wratox1

Member
Reaction score
22
Is it me or you don't even have tr and td in your table?

i dont need tr and td's in the table, actually i dont need the table at all, but the table prevents chrome and firefox from displaying it as the same as internet explorer..

Is it just me, or is he using a table? o_o

i am using a table.

Is it just me, or are tables so 2001.

how does that help?

Problem here is you don't know how to HTML.

http://w3schools.com/html/default.asp

i can only think of one thing when you stated this, and i looked at my code(that i posted here), and saw that i had forgotten to the start-tag for the div..

i will fix this now.

if this is not what you are talking about then maybe you could tell me how to fix my problem?
 

Wratox1

Member
Reaction score
22
i dont need the table really and i have deleted it now, but i need to have the three buttons centered and they must be centered in atleast google chrome, internet explorer and firefox.

none of you havent tried to fix the problem(from what i can tell), you have only complained about the table i had..
 

Wratox1

Member
Reaction score
22
Code:
<?php
if(!isset($_SESSION)){
session_start();
}
?>
<!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>
<link href='http://fonts.googleapis.com/css?family=Orbitron:regular,500' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Snoman.se/login</title>



</head>
<body>
<div id="logo">
<a href="http://www.henriksnoman.kaggteknik.se/">Snoman.se</a>
</div>
<?php
if($_COOKIE['user'] == ""){


?>
<div id="loginbox">
<table>
<form name="login" action="action" method="POST" class="form">

<label for="username">Username:</label>
<input type="text" name="username" id="username" class="input" /><br>

<label for="password">Password:</label>
<input type="password" name="password" id="password" class="input" /><br>

<label for="remember">Remember me?</label> <input type="checkbox" name="remember" id="remember" value="yes"/><br>

<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>
</table>
</div>
<?php
}
else{
?>
<div id="logout">
You are already logged in, you can log out if you want:<br>
<form name="logout" action="logout" method="POST">
<input type="submit" value="Log out" class="loginsubmit" />
</form>
</div>
<?php
}
?>
</body>
</html>

i think the problem is that the forms is pushing the next form down to the next row, but im not sure..
 

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
Forms are block elements, so they appear below each other.
You should read up on CSS (inline vs block).
 

JerseyFoo

1/g = g-1
Reaction score
40
PHP:
<form id="loginbox" name="login" action="action" method="POST" class="form">
	<fieldset>
		<legend>Login</legend>
		<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>
		&nbsp;<input type="checkbox" name="remember" id="remember" value="yes"/>

		<input type="submit" name="login" value="login" class="loginsubmit" />
		<input type="submit" name="register" value="register" class="loginsubmit" />
		<input type="submit" name="cancel" value="cancel" class="loginsubmit" />
    </fieldset>
</form>

Should learn HTML though.
 

Wratox1

Member
Reaction score
22
Forms are block elements, so they appear below each other.
You should read up on CSS (inline vs block).

that i didnt know, thanks for telling me!

PHP:
<form id="loginbox" name="login" action="action" method="POST" class="form">
	<fieldset>
		<legend>Login</legend>
		<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>
		&nbsp;<input type="checkbox" name="remember" id="remember" value="yes"/>

		<input type="submit" name="login" value="login" class="loginsubmit" />
		<input type="submit" name="register" value="register" class="loginsubmit" />
		<input type="submit" name="cancel" value="cancel" class="loginsubmit" />
    </fieldset>
</form>

Should learn HTML though.

if you can read you will see that the buttons register and cancel are 2 completely different forms from the login button and your solution dont work..
 

UndeadDragon

Super Moderator
Reaction score
448
You can use CSS to fix the inline vs block. Use:

display: inline;
 

JerseyFoo

1/g = g-1
Reaction score
40
if you can read you will see that the buttons register and cancel are 2 completely different forms from the login button and your solution dont work..
If you can use logic you will see that having a seperate form for register and cancel in this context is retarded and you should either handle it on the PHP side by using the value of the submit field (like you should with register anyway), or just use links.

I would use JavaScript but something tells me you're one of those NoScripters.
 

Wratox1

Member
Reaction score
22
You can use CSS to fix the inline vs block. Use:

display: inline;

thanks! it worked! +rep!´

If you can use logic you will see that having a seperate form for register and cancel in this context is retarded and you should either handle it on the PHP side by using the value of the submit field (like you should with register anyway), or just use links.

I would use JavaScript but something tells me you're one of those NoScripters.

i dont like to argue, so im going to, and since the problem now is solved you dont need to bother..
Edit: the register-button redirects the user to the register page, and the cancel redirects the user to the page he was on when he clicked the login-button(which takes him to this login page)
 
General chit-chat
Help Users

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top