internet explorer and google chrome rendering issues
- by jeansymolanza
hi guys,
i'm trying to build a login and main page on dreamweaver for a client and testing them in google chrome and internet explorer but i am running into a lot of unexpected difficulties. the main thing has to be the way the tables are being rendered on the different pages. it seems to appear well on google chrome but when i test the page under internet explorer there have been issues with the way the footer is being rendered. i've included several images showing the problem:
login page on IE8 http://i39.tinypic.com/iz9lw3.jpg
login page on google chrome http://i44.tinypic.com/1zn0qd2.jpg
main page on IE8 http://i41.tinypic.com/2d0gyhf.jpg
main page on google chrome http://i42.tinypic.com/2ry58aw.jpg
login fail on IE8 http://i40.tinypic.com/2jea9ac.jpg
login fail on google chrome http://i43.tinypic.com/sl35h2.jpg
please help! i have included the source code below. i spent an entire night trying to figure out what was wrong but to little success.
login page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="resources/css_01.css">
<link rel="shortcut icon" href="resources/favicon.ico">
<title>Speedy CMS</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr" background="resources/bg_01.jpg">
<div id="container">
<div id="mainContent">
<!-- start #mainContent -->
<table id="Table_01" width="1024" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" rowspan="3">
<img src="resources/login_01.png" width="93" height="440" alt=""></td>
<td valign="top" rowspan="3">
<img src="resources/login_02.png" width="457" height="440" alt=""></td>
<td valign="top">
<img src="resources/login_03.png" width="474" height="86" alt=""></td>
</tr>
<tr>
<td valign="top"><img src="resources/login_04.png" width="474" height="89" /></td>
</tr>
<tr>
<td valign="top" width="100%" height="100%" align="left">
<form ACTION="<?php echo $loginFormAction; ?>" METHOD="POST" name="login" >
<h3 class="login">Username</h3>
<span id="sprytextfield1">
<input name="username" type="text" class="input" />
</span>
<h3 class="login">Password</h3>
<span id="sprypassword1">
<input name="password" type="password" class="input" />
</span>
<p></p>
<div align="left" style="width:474px; padding-top: 10px; padding-left: 100px;">
<input name="login" type="submit" id="Log in" value="Log in" class="btn"/>
</div>
</p>
</form>
</td>
</tr>
</table>
</div>
</div>
<!-- end #mainContent -->
<!-- start #footer -->
<?php include("resources/footer.php"); ?>
<!-- end #footer -->
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1");
//-->
</script>
</body>
</html>
main page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="resources/css_01.css">
<link rel="shortcut icon" href="resources/favicon.ico">
<title>Speedy CMS</title>
<body class="oneColElsCtr" background="resources/bg_01.jpg">
<div id="container">
<div id="mainContent">
<!-- start #mainContent -->
<table id="Table_01" width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<img src="resources/main_01.png" width="93" height="440" alt=""></td>
<td colspan="2">
<img src="resources/main_02.png" width="457" height="95" alt=""></td>
<td colspan="3" valign="bottom">
<!-- start #navbar -->
<?php include("resources/navbar.php"); ?>
<!-- end #navbar -->
</td>
</tr>
<tr>
<td colspan="2">
<img src="resources/main_04.png" width="457" height="1" alt=""></td>
<td colspan="3" rowspan="2" valign="top"><a class="bottom2" href="<?php echo $logoutAction ?>">Log off</a></td>
</tr>
<tr>
<td colspan="2">
<img src="resources/main_06.png" width="457" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="resources/main_07.png" width="456" height="315" alt=""></td>
<td colspan="2">
<img src="resources/main_08.png" width="75" height="94" alt=""></td>
<td rowspan="3">
<img src="resources/main_09.png" width="6" height="281" alt=""></td>
<td align="left" valign="middle" style="padding-left:20px;"><h2 class="home">Hello, <?php echo $_SESSION['MM_Username']; ?></h2></td>
</tr>
<tr>
<td rowspan="3">
<img src="resources/main_11.png" width="1" height="221" alt="" /></td>
<td>
<img src="resources/main_12.png" width="74" height="90" alt=""></td>
<td align="left" valign="middle" style="padding-left:20px;"><h3 class="home"><?php echo date("l F d, Y, h:i A"); ?></h3></td>
</tr>
<tr>
<td>
<img src="resources/main_14.png" width="74" height="97" alt="" /></td>
<td align="left" valign="middle" style="padding-left:20px;"><h3 class="home">You currently have <a href="progress.php" class="main"><?php echo $totalCases; ?> claims</a> running</h3></td>
</tr>
<tr>
<td colspan="3">
<img src="resources/main_16.png" width="474" height="34" alt=""></td>
</tr>
</table>
</div>
</div>
<!-- end #mainContent -->
<!-- start #footer -->
<?php include("resources/footer.php"); ?>
<!-- end #footer -->
</body>
</html>
<?php
mysql_free_result($tbl_accident);
?>
login fail page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="resources/css_01.css">
<link rel="shortcut icon" href="resources/favicon.ico">
<title>Speedy CMS</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr" background="resources/bg_02.jpg">
<div id="container">
<div id="mainContent">
<table id="Table_01" width="1024" height="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="resources/default2_01.png" width="93" height="440" alt=""></td>
<td colspan="2"><img src="resources/default_02.png" width="457" height="95" /></td>
<td valign="bottom"></td>
</tr>
<tr>
<td colspan="2">
<img src="resources/default2_03.png" width="457" height="1" alt=""></td>
<td>
<img src="resources/default2_04.png" width="474" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3">
<div align="left" style="padding-left: 18px;">
<h3 class="loginfail">Sorry, but your username and password is incorrect.</h3> <h4 class="loginfail">Please try again!</h4>
<form ACTION="<?php echo $loginFormAction; ?>" METHOD="POST" name="login" >
<h5 class="loginfail">Username</h5>
<span id="sprytextfield1">
<input name="username" type="text" class="input2" />
</span>
<h5 class="loginfail">Password</h5>
<span id="sprypassword1">
<input name="password" type="password" class="input2" />
</span>
<img src="resources/spacer.gif" width="1" height="5" alt="" />
<p></p>
<div align="left" style="width:474px; padding-top: 10px;">
<input name="login" type="submit" id="Log in" value="Log in" class="btn"/>
</div>
</p>
</form>
</td>
</tr>
<tr>
<td colspan="3" height="100%">
</td>
</tr>
<tr>
<td>
<img src="resources/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="resources/spacer.gif" width="337" height="1" alt=""></td>
<td>
<img src="resources/spacer.gif" width="120" height="1" alt=""></td>
<td>
<img src="resources/spacer.gif" width="474" height="1" alt=""></td>
</tr>
</table>
</div>
</div>
<!-- start #footer -->
<?php include("resources/footer2.php"); ?>
<!-- end #footer -->
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1");
//-->
</script>
</body>
</html>
footer.php
<table width="1024px" border="0" cellspacing="0" cellpadding="0" style="padding-left: 200px; padding-top: 10px; padding-bottom: 36px; text-align: left;">
<!-- speedy claim links -->
<td width="33%" valign="top">
<div class="bottom" style="padding-left: 40px; text-align: left;">Learn About Us</div>
<div class="hr" style="margin-left: 40px; width: 200px;"><hr /></div>
<div style="padding-left: 40px; text-align: left;">
<a href="http://www.speedyclaim.co.uk/php/gifts.php" class="bottom2" target="_blank">Free Gifts</a><BR />
<a href="http://www.speedyclaim.co.uk/php/calculator.php" class="bottom2" target="_blank">Injury Calculator</a><BR />
<a href="http://www.speedyclaim.co.uk/php/aboutus.php" class="bottom2" target="_blank">About Us</a><BR />
<a href="http://www.speedyclaim.co.uk/php/claimonline.php" class="bottom2" target="_blank">Claim Online</a><BR />
<a href="http://www.speedyclaim.co.uk/php/contactus.php" class="bottom2" target="_blank">Contact Us</a><BR />
</div>
</td>
<!-- speedy claim links -->
<td width="33%" valign="top">
<div class="bottom" style="padding-left: 40px; text-align: left;">Get Help</div>
<div class="hr" style="margin-left: 40px; width: 200px;"><hr /></div>
<div style="padding-left: 40px;">
<a href="http://www.speedyclaim.co.uk/php/services.php#roadaccident" class="bottom2" target="_blank">Road Traffic Accident</a><BR />
<a href="http://www.speedyclaim.co.uk/php/services.php#workaccident" class="bottom2" target="_blank">Work Accident</a><BR />
<a href="http://www.speedyclaim.co.uk/php/services.php#criminalinjury" class="bottom2" target="_blank">Criminal Injury</a><BR />
<a href="http://www.speedyclaim.co.uk/php/services.php#medicalnegligence" class="bottom2" target="_blank">Medical Neglicence</a><BR />
<a href="http://www.speedyclaim.co.uk/php/services.php#publicl" class="bottom2" target="_blank">Public Liability</a><BR />
<a href="http://www.speedyclaim.co.uk/php/services.php#taxiaccident" class="bottom2" target="_blank">Taxi Related Accident</a><BR />
</div>
<!-- speedline -->
<td width="33%" valign="top">
<div class="bottom" style="padding-left: 40px; text-align: left;">Taxi Service</div>
<div class="hr" style="margin-left: 40px; width: 200px;"><hr /></div>
<div style="padding-left: 40px;">
<a href="http://www.speedlinetaxi.com/airport.asp" class="bottom2" target="_blank">Airport Meet & Greet</a><BR />
<a href="http://www.speedlinetaxi.com/register.asp" class="bottom2" target="_blank">Automated Booking</a><BR />
<a href="http://www.speedlinetaxi.com/business.asp" class="bottom2" target="_blank">Business Accounts</a><BR />
<a href="http://www.speedlinetaxi.com/technology.asp" class="bottom2" target="_blank">Technology</a><BR />
<a href="https://ebook.autocab.net/3037" class="bottom2" target="_blank">E-Booking</a><BR />
<a href="http://www.speedlinetaxi.com/recruitment.asp" class="bottom2" target="_blank">Recruitment</a><BR />
<a href="http://www.speedlinetaxi.com/feedback.asp" class="bottom2" target="_blank">Feedback</a><BR />
<BR />
</div>
</td>
<tr>
<td colspan="3" valign="top" style="padding-top:5px; padding-left:40px;">
<span class="bottom">
© <?php echo date("Y")?> Speedline
</span>
</td>
</tr>
</table>
footer2.php
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-left: 188px; padding-top: 10px; text-align: left;" align="center">
<!-- speedy claim links -->
<tr>
<td width="99%" valign="top" style="padding-top:5px; padding-left:40px; padding-bottom: 10px;">
<span class="bottom">
© <?php echo date("Y")?> Speedline
</span>
</td>
</tr>
</table>
css_01.css
html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}
body {
font: 100% Arial, Helvetica, sans-serif;
background-repeat: repeat-x;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColElsCtr #container {
width: 1024px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
text-align: right;
}
.loginfail {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #3399cc;
}
.login {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #3399cc;
padding-left: 100px;
}
.navbar {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #FFF;
font-size: 16px;
}
.navbar:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration:underline;
color: #FFF;
font-size: 16px;
}
.login2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration:none;
color: #3399cc;
}
.window {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration:none;
}
.login2:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration:underline;
color: #3399cc;
}
.main {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #3399cc;
}
.main:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration:underline;
color: #3399cc;
}
.form {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #3399cc;
}
.form:hover {
font-family: Arial, Helvetica, sans-serif;
text-decoration:underline;
color: #3399cc;
}
.input {
margin-left: 100px;
background-color:#FFF;
border: none;
width: 14em;
height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
}
.input2 {
background-color: #F2F2F2;
border: none;
width: 14em;
height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
}
.btn {
height: 2em;
width: 8em;
color: #FFF;
background: #3399cc;
font-weight: bold;
font-size: 18px;
border: none;
}
.btn:hover {
color: #FFF;
background: #333;
cursor: pointer; /* cursor: hand; for IE5 */
}
.bottom {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #7e8081;
}
.bottom2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #7e8081;
}
.bottom2:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
color: #7e8081;
}
.bottom3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
}
.bottom3:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
color: #333;
}
div.hr {
height: 1px;
background: #CCC url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.home {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #3399cc;
}
.form2 {
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size: 12px;
}
.rta {border-width: 1px; border-style: solid; border-color: #CCC; }
.box {
width: 100%;
padding-right: 3px;
color: #000;
text-decoration:none;
}
.box:hover {
width: 100%;
padding-right: 3px;
color: #000;
text-decoration:underline;}
.box2 {
width: 100%;
color: #C00;
text-decoration:none;
}
.box2:hover {
width: 100%;
padding-right: 3px;
color: #C00;
text-decoration:underline;}
thanking in you advance. God bless.
