PHP Login Tutorial IE issue

debmc99 · September 14, 2010

Hello,

I completed the PHP Login tutorial. Everything worked fine when I tested it in Firefox. However, the form used to register new members (register.php) is only showing 3 of the 4 form fields and they are not lining up vertically and floated next to the labels as they should be. I am really stumped because it works fine in FF. And even if I download the style.css source file it still is out of alignment in IE only.

Can anyone see what I am doing wrong? I would appreciate any advice. Thank you.

Here is the css:

body { font-family: Arial; margin:0; }
h1 { background: #1B2835; padding: 20px; font-size: 1.5em; color: white; margin: 0 0 20px 0; }
#content {padding: 0 20px; }
#content a {padding: 0 20px;}

.required { color: red; font-size: .8em; clear: both; padding-top: 20px; }
.error { float: left; color: red; display: block; padding: 4px 0 0 10px; font-size:.8em; }
.alert { background: #feff96; border: 1px solid yellow; padding: 8px; margin-bottom: 20px; }

form { overflow: auto; }
label {float: left; clear: both; width: 180px; display: block;}
input, select {width: 180px; padding: 2px; margin-bottom: 4px; float: left;}
input.submit { float: left; clear: both; width: 80px; margin-top: 20px; }

Here is the form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title>Register Member</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="robots" content="noindex, nofollow">
	<link href="css/register_style.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>

	<h1>Register Member</h1>
	<div id="content">
		<form action="" method="post">
		<div>
			<?php if ($error['alert'] != '') { 
				echo "<div class='alert'>".$error['alert']."</div>"; } ?>

			<label for="username">Username: *</label>
			<input  type="text" name="username" value="<?php echo $input['user']; ?>"><div class="error"><?php echo $error['user']; ?></div>

			<label for="type">Member Type: *</label>
			<select name="type">
				<?php echo $select; ?>
			</select>
			<div class="error"><?php echo $error['type']; ?></div>

			<label for="password">Password: *</label>
			<input type="password" name="password" value="<?php echo $input['pass']; ?>"><div class="error"><?php echo $error['pass']; ?></div>

			<label for="password2">Password (again): *</label>
			<input type="password" name="password2" value="<?php echo $input['pass2']; ?>"><div class="error"><?php echo $error['pass2']; ?></div>				
			<p class="required">* required fields</p>

			<input type="submit" name="submit" class="submit" value="Submit">
		</div>
		</form>

		<p><a href="members.php">Back to member's page</a> |
		<a href="change_password.php">Change Password</a> | 
			<a href="logout.php">Log Out</a></p>
	</div>

</body>
</html>

falkencreative · September 14, 2010

The styling works in IE8 and Firefox, but unfortunately not in IE6 or 7. This is partially my fault for not double checking things while I was recording, though the focus was on the PHP functionality more than the CSS styling.

For one reason or another IE6-7 doesn't place the form elements correctly, displaying the labels on separate lines (like it should) but displaying form elements all on one line.

Here's a near complete solution. I have added an ordered list to hold the different form elements. Each <li> holds a line of the form, which helps keep the form orderly (you could also do this with multiple divs, but using a ordered list seemed semantically correct and used less code than a separate div with a class for each row.) There are a couple minor issues still -- for example, I have to add clear:both to the element below the form for IE6 (I'm not sure why that is necessary just yet) and there are some minor height differences between the IE's in the last two <li>s in the list, probably due to the use of padding or margin on input.submit and .required. Hopefully it will help get you started.

Here's the code (for testing purposes, I removed any PHP):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
       <head>  
               <title>Register Member</title>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
               <meta name="robots" content="noindex, nofollow">

               <style type="text/css">
               body { font-family: Arial; margin:0; }
h1 { background: #1B2835; padding: 20px; font-size: 1.5em; color: white; margin: 0 0 20px 0; }
#content {padding: 0 20px; }
#content a {padding: 0 20px;}

.required { color: red; font-size: .8em; clear: both; padding-top: 20px; }
.error { float: left; color: red; display: block; padding: 4px 0 0 10px; font-size:.8em; }
.alert { background: #feff96; border: 1px solid yellow; padding: 8px; margin-bottom: 20px; }

form { overflow: auto; }
label {float: left; width: 180px; display: block;}
input, select {width: 180px; padding: 2px; float: left;}
input.submit { float: left; clear: both; width: 80px; margin-top: 20px; }

ol.form { margin:0; padding:0; overflow:hidden; }
ol.form li { list-style:none; padding:0 0 6px 0; overflow:hidden; clear:both; float:left; }

               </style>
       </head>
       <body>

               <h1>Register Member</h1>
               <div id="content">
                       <form action="" method="post">
                           <ol class="form">
                               <li><label for="username">Username: *</label>
                               <input  type="text" name="username" value=""><div class="error">hhh</div></li>

                               <li><label for="type">Member Type: *</label>
                               <select name="type">
                                       mmm
                               </select>
                               <div class="error">hhh</div></li>

                               <li><label for="password">Password: *</label>
                               <input type="password" name="password" value="nn"><div class="error">nn</div></li>

                               <li><label for="password2">Password (again): *</label>
                               <input type="password" name="password2" value="mmm"><div class="error">mm</div></li>

                               <li><p class="required">* required fields</p></li>

                               <li><input type="submit" name="submit" class="submit" value="Submit"></li>
                           </ol>
                       </form>

                       <p style="clear:both;"><a href="members.php">Back to member's page</a> |
                       <a href="change_password.php">Change Password</a> | 
                               <a href="logout.php">Log Out</a></p>
               </div>

       </body>
</html>

debmc99 · September 14, 2010

Thank you!

debmc99 · September 15, 2010

Hello,

I am sorry, but this is still not working. Actually, I am using IE8.

When I add the php code the alignment is off again and the drop down select menu displays an actual option rather than "select an option". It is so weird because virtually the exact same CSS styles work fine for the other pages, including a contact form with drop down menus.

I know you are all busy but if I could get any further advice I would really appreciate it and I can finally finish this project. Would adding the php have anything to do with the alignment issue?

Edited September 15, 2010 by debmc99

falkencreative · September 15, 2010

Have you checked the generated HTML/CSS using the CSS/HTML validators? Perhaps the HTML that you create within the PHP has errors? It could be a missing ending tag, a missing quote, etc?

debmc99 · September 15, 2010

The only error I am getting refers to this:


   <select name="type"> mmm </select>

(end tag for "SELECT" which is not finished) but everything else is valid. The CSS is valid too.

Wickham · September 15, 2010

The select tag needs options (two or more usually although just one might work) so perhaps the validator thinks the tag is incomplete.

<select id="title" name="title">
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="ms">Ms</option>
</select>

I've taken the above out of one of my pages so you will need to edit it.

falkencreative · September 15, 2010

I do want to point out that the "mmm" section of your code is supposed to be replaced with "<?php echo $select; ?>". When I was working with this, I removed any PHP from the form in order to test this properly in IE (I don't have PHP set up on my Windows machine). I thought I was clear about this, but maybe I wasn't.

Can you post the most recent code you are working with?

debmc99 · September 15, 2010

Hello,

Yes, I had the php code replacing the "mmm" parts. The options for the "Select" drop down list should be coming from this, right?

<?php echo $select; ?>

Here is the current CSS:

body { font-family: Arial; margin:0; }
h1 { background: #1B2835; padding: 20px; font-size: 1.5em; color: white; margin: 0 0 20px 0; }
#content {padding: 0 20px; }
#content a {padding: 0 20px;}

.required { color: red; font-size: .8em; clear: both; padding-top: 20px; } 
.error { float: left; color: red; display: block; padding: 4px 0 0 10px; font-size:.8em; }
.alert { background: #feff96; border: 1px solid yellow; padding: 8px; margin-bottom: 20px; }

form { overflow: auto; }
label {float: left; width: 180px; display: block;}
input, select {width: 180px; padding: 2px; float: left; }
input.submit { float: left; clear: both; width: 80px; margin-top: 20px; }

ol.form { margin:0; padding:0; overflow:hidden; }
ol.form li { list-style:none; padding:0 0 6px 0; overflow:hidden; clear:both; float:left; }

Here is the current HTML. It is weird because the first password field doesn't even display in IE, only Password (again)does.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title>Register Member</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="robots" content="noindex, nofollow">
	<link href="css/register_style.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>

	<h1>Register Member</h1>
	<div id="content">
		<form action="" method="post">
			<ol class="form">
			<li><label for="username">Username: *</label>
			<input  type="text" name="username" value="<?php echo $input['user']; ?>"><div class="error"><?php echo $error['user']; ?></div></li>

			<li><label for="type">Member Type: *</label> 
			<select name="type">
				<?php echo $select; ?>
			</select>
			<div class="error"><?php echo $error['type']; ?></div></li>

			<li><label for="password">Password: *</label>
			<input type="password" name="password" value="<?php echo $input['pass']; ?>"><div class="error"><?php echo $error['pass']; ?></div></li> 

			<li><label for="password2">Password (again): *</label>
			<input type="password" name="password2" value="<?php echo $input['pass2']; ?>"><div class="error"><?php echo $error['pass2']; ?></div></li>

			<li><p class="required">* required fields</p></li>

			<li><input type="submit" name="submit" class="submit" value="Submit"></li>
			</ol>

		</form>

		<p style="clear:both;"><a href="members.php">Back to member's page</a> |
		<a href="change_password.php">Change Password</a> | 
			<a href="logout.php">Log Out</a></p>
	</div>

</body>
</html>

Thank you for your help. I have put hours into this and I have no idea what to try next.

falkencreative · September 15, 2010

This is what I get when I test it: http://falkendev.com/test.php (In this sample, I've kept the PHP code in place, but set each of the variables besides the select to empty strings.

I'm thinking this has to do with a typo of some sort in your PHP code. Can you post the PHP that controls this page? (I believe that should be "register.php".)

debmc99 · September 16, 2010

Here is the register.php code:

<?php

/*
*  REGISTER.PHP
*  Register New Members
*/

//start session / load configs
session_start();

include('includes/config.php');
include('includes/db.php');

/*
* This section below checking if user is logged in/checking for inactivity 
* may be best put in a reusable function so it is easily reused/updated
*/

// check that the user is logged in
if (!isset($_SESSION['username']))
{
header("Location: login.php?unauthorized");
}
//check that the user is an admin
else if (!is_ceoadmin())
{
header("Location: members.php");
}
// check for inactivity
if (time() > $_SESSION['last_active'] + $config['session_timeout'])
{
// log out user
session_destroy();
header("Location: login.php?timeout");
}
else
{
// update the session variable
$_SESSION['last_active'] = time();
}

// form defaults
$error['alert'] = '';
$error['user'] = '';
$error['type'] = '';
$error['pass'] = '';
$error['pass2'] = '';

$input['user'] = '';
$input['type'] = '';
$input['pass'] = '';
$input['pass2'] = '';

if (isset($_POST['submit']))
{
$input['user'] = htmlentities($_POST['username'], ENT_QUOTES);
$input['type'] = htmlentities($_POST['type'], ENT_QUOTES);
$input['pass'] = htmlentities($_POST['password'], ENT_QUOTES);
$input['pass2'] = htmlentities($_POST['password2'], ENT_QUOTES);

	// create select options
$select = '<option value="">Select an option</option';
$stmt = $mysqli->prepare("SELECT id, name FROM permissions");
$stmt->execute();
$stmt->bind_result($id, $name); // for more information, see http://www.php.net/manual/en/mysqli-stmt.bind-result.php
while ($stmt->fetch())
{
	$select .= "<option value='" . $id . "'";
	if ($input['type'] == $id) { $select .= "selected='selected'"; }
	$select .= ">" . $name . "</option";
}
$stmt->close();

// process form
if ($_POST['username'] == '' || $_POST['password'] == '' || $_POST['password2'] == '' || $_POST['type'] == '')
{
	// both fields need to be filled in
	if ($_POST['username'] == '') { $error['user'] = 'required!'; }
	if ($_POST['type'] == '') { $error['type'] = 'required!'; }
	if ($_POST['password'] == '') { $error['pass'] = 'required!'; }
	if ($_POST['password2'] == '') { $error['pass2'] = 'required!'; }
	$error['alert'] = 'Please fill in required fields!';

	// show form
	include('views/v_register.php');
}
else if ($_POST['password'] != $_POST['password2'])
{
	// both password fields need to match
	$error['alert'] = 'Password fields must match!';

	// show form
	include('views/v_register.php'); 
}
else
{
	// get and clean data from form
	$input['user'] = $_POST['username'];
	$input['pass'] = $_POST['password'];
	$input['pass2'] = $_POST['password2'];

	// insert into database
	if ($stmt = $mysqli->prepare("INSERT members (username, type, password) VALUES (?,?,?)"))
	{
		$stmt->bind_param("sss", $input['user'], $input['type'], md5($input['pass'] . $config['salt']));
		$stmt->execute();
		$stmt->close();

		// add alert and clear form values
		$error['alert'] = 'Member added successfully!';
		$input['user'] = '';
		$input['type'] = '';
		$input['pass'] = '';
		$input['pass2'] = '';

		// show form
		include('views/v_register.php');
	}
	else
	{
		echo "ERROR: Could not prepare MySQLi statement.";
	}
}
}
else
{
// create select options
$select = '<option value="">Select an option</option';
$stmt = $mysqli->prepare("SELECT id, name FROM permissions");
$stmt->execute();
$stmt->bind_result($id, $name);
while ($stmt->fetch())
{
	$select .= "<option value='" . $id . "'>" . $name . "</option";
}
$stmt->close();


// show form
include('views/v_register.php');
}

// close db connection
$mysqli->close();

falkencreative · September 16, 2010

Looks like this line:

$select .= "<option value='" . $id . "'>" . $name . "</option";

is missing a ">" on the "</option".

debmc99 · September 16, 2010

Yes, I noticed that, but it is like that in the phplogin - parts 17 and 18 project file - register.php, so I wasn't sure. Do I just close it?

falkencreative · September 16, 2010

Yeah, that should be closed. It's possible that Firefox is smart enough to ignore the typo, and that's why I didn't see it. I'll have to update the source files to correct that.

debmc99 · September 16, 2010

That totally worked! Thank you so much!

Sign In

PHP Login Tutorial IE issue

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites