Jump to content
Killersites Community
Sign in to follow this  
debmc99

PHP Login Tutorial IE issue

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 by debmc99

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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();



Share this post


Link to post
Share on other sites
Sign in to follow this  

×