Forms and browsers

Wratox1 · Apr 17, 2011

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:

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?

GetTriggerUnit- · Apr 17, 2011

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

Lyerae · Apr 17, 2011

GetTriggerUnit- said:
Is it me or you don't even have tr and td in your table?

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

tooltiperror · Apr 17, 2011

Is it just me, or are tables so 2001.

JerseyFoo · Apr 17, 2011

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

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

Wratox1 · Apr 18, 2011

GetTriggerUnit- said:
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..

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

i am using a table.

tooltiperror said:
Is it just me, or are tables so 2001.

how does that help?

JerseyFoo said:
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?

Darthfett · Apr 18, 2011

Wratox, I think this is their point. Tables are bad design.

Here's some hopefully helpful links: html forms, general use of css with divs

Wratox1 · Apr 18, 2011

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..

tooltiperror · Apr 18, 2011

Can we have the whole page, please?

Wratox1 · Apr 18, 2011

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 · Apr 18, 2011

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

JerseyFoo · Apr 18, 2011

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 · Apr 18, 2011

Magentix said:
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!

JerseyFoo said:

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 · Apr 18, 2011

You can use CSS to fix the inline vs block. Use:

display: inline;

JerseyFoo · Apr 18, 2011

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 · Apr 18, 2011

UndeadDragon said:
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)

Forms and browsers

Wratox1

Member

GetTriggerUnit-

DogEntrepreneur

Lyerae

I keep popping up on this site from time to time.

tooltiperror

Super Moderator

JerseyFoo

1/g = g-1

Wratox1

Member

Darthfett

Aerospace/Cybersecurity Software Engineer

Wratox1

Member

tooltiperror

Super Moderator

Wratox1

Member

Magentix

if (OP.statement == false) postCount++;

JerseyFoo

1/g = g-1

Wratox1

Member

UndeadDragon

Super Moderator

JerseyFoo

1/g = g-1

Wratox1

Member

Settings Notifications

Options

The Helper Discord

Members online

Share this page

Affiliates

Network Sponsors