Jump to content

[SOLVED] IE Displaying Differently on Refresh


PHP Monkeh

Recommended Posts

Ok usually I don't post new topics but for this one I'm really stumped.

 

My page looks perfect in Firefox (as always), so I decided to take a look at it in IE - my god what a mistake.  Here's three links to screenshots:

 

FF.jpg http://img177.imageshack.us/my.php?image=ffiy1.jpg

IE 1.jpg http://img177.imageshack.us/img177/1434/ie1fg9.th.jpg

IE 2.jpg http://img205.imageshack.us/my.php?image=ie2wd2.jpg

 

FF.jpg is what it looks like in Firefox, IE 1 is what it looks like when you open it for the first time, and IE 2 is what it looks like after you refresh the page.

 

Now I could understand if something was going wrong the first time it was opened, but why on earth is it changing as soon as it's refreshed?  Not that the page is correct after it's refresh anyway!

 

What I'm trying to accomplish is pretty simple as far as web design goes, I've even decided to use tables so that I'm trying not to achieve the horrid 100% height using DIVs.  Here's my index.php:

 

<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"; ?>
<!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" xml:lang="en" lang="en">
<head>

   <link rel="stylesheet" href="themes/default/styles.css" type="text/css" media="screen" />
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <title>Title</title>
   
</head>
<body>

   <table cellspacing="0" cellpadding="0" border="0" id="wrapper">
      <tbody>
         <tr><td id="header">
            
         </td></tr>
         <tr><td id="menu">
            Menu
         </td></tr>
         <tr><td id="subMenu">

         </td></tr>
         <tr><td id="container">

            asd

         </td></tr>
         <tr><td id="footer">
            Footer
         </td></tr>
      </tbody>
   </table>

</body>
</html>

 

I'm echoing the first XML line via PHP because of short-tags problems (on certain hosts anyway).

 

This is my stylesheet:

 

html, body {

   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: Tahoma, Arial, Verdana;
   font-size: 12px;
   background-image: url('images/bodyBackground.jpg');
   background-repeat: repeat-x;
   background-color: #F6F6F6;
   text-align: center;
   
}

/* Layout IDs */

table#wrapper {

   width: 845px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   background-color: #FFFFFF;
   border-left: 1px solid #686868;
   border-right: 1px solid #686868;
   text-align: left;

}

table#wrapper td#header {

   height: 147px;
   background-image: url('images/serbisHeader.jpg');
   background-repeat: no-repeat;
   
}

table#wrapper td#menu {

   height: 31px;
   border-top: 1px solid #686868;
   border-bottom: 1px solid #686868;
   background-color: #f09f2c;
   
}

table#wrapper td#subMenu {

   height: 20px;
   border-bottom: 1px solid #686868;
   background-color: #c2c2c2;
   display: none;
   
}

table#wrapper td#container {

   height: 100%;
   vertical-align: top;
   padding: 10px;
   
}

table#wrapper td#footer {

   height: 20px;
   border-top: 1px solid #686868;
   background-color: #f09f2c;
   
}

Ok I've actually found that it's something to do with the DOCTYPE.  If I remove the DOCTYPE completely it works fine in IE, but I don't think that should have to be a solution (I've used DOCTYPES fine in IE before).

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.