internet explorer and google chrome rendering issues

Posted by jeansymolanza on Stack Overflow See other posts from Stack Overflow or by jeansymolanza
Published on 2010-04-30T14:15:15Z Indexed on 2010/04/30 14:17 UTC
Read the original article Hit count: 398

Filed under:

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">
    &copy; <?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">
    &copy; <?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.

Developer IT

internet explorer and google chrome rendering issues - Developer IT

internet explorer and google chrome rendering issues

php

mysql

html

css

Related posts about php

Magento, NGINX, PHP-FPM, APC, MEMCACHED, 16gb Ram CentOS, Spiking PHP-FPM to 100% CPU

PHP Pear Installation on CentOS

Apache configurations for php "AddType text/html php" or "AddType application/x-httpd-php php .php"

mod_rewrite settings causes server to throw HTTP 500 errors instead of 404

Problems installing Memcache (PECL extension)

Related posts about mysql

How to remove MySQL completely with config and library files on ubuntu 12.04 gnome 3.0

mysql: Cannot load from mysql.proc. The table is probably corrupted

Why is there a /etc/init.d/mysql file on this Slackware machine? How could it have gotten there?

mysql: Bind on unix socket: Permission denied

MySQL – Learning MySQL Online in 6 Hours – MySQL Fundamentals in 320 Minutes

Categories cloud