That Same Old Height Problem in Firefox vs. IE

[e1seix]

I keep getting this rather peculiar issue in my IE display.

 

Page is laid out as such:

 

<?php

echo '<div id="main">';

echo '<div id="left">';
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/1.php");
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/2.php");
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/3.php");
echo'</div>';

echo '<div id="center">';
include("../contents/summer.php");
echo '</div>';

echo '<div id="right">';
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/7.php");
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/8.php");
echo file_get_contents("http://www.malegroomingfordummies.co.uk/windows/9.php");
echo '</div>';

echo '</div>';

?>

 

here's the css:

 

#center {
        background-color:#c06666;
        float:left;
        height:1495px;
        margin-left:5px;
        width:500px; }

html>body #center {
        background-color:#c06666;
        float:left;
        height:1495px;
        margin-left:5px;
        width:500px; }

#left {
        background-color:#c0c099;
        float:left;
        height:1495px;
        width:200px; }

html>body #left {
        background-color:#c0c099;
        float:left;
        height:1495px;
        width:200px; }

#main {
        background-color:#c0c0c0;
        height:1505px;
        padding:5px;
width:900px; }

html>body #main {
        background-color:#c0c0c0;
        height:1495px;
        padding:5px;
width:890px; }

#right {
        background-color:#c0c0c0;
        float:left;
        height:1495px;
        margin-left:5px;
        width:180px; }

html>body #right {
        background-color:#c0c0c0;
        float:left;
        height:1495px;
        margin-left:5px;
        width:180px; }

 

It creates the following layout:

 

http://malegroomingfordummies.co.uk/shop/byBrand.php?brandID=204&startrow=0

 

What happens though is that you'll see IE initially holds the padding value of 5 below the 3 columns, however when you REFRESH it appears to add another 5px of padding, and then it changes back, and then back to 10px again... what is going on. i all seems fine in Firefox, but this must be some sort of glitch or something. Anyone shed any light?

[TheFilmGod]

Why do you give us the php code? Have you ever programmed php scripts? Do you know that a php server parses the php code and outputs pure html and no special php jazz about files?

 

POST THE HTML.

[e1seix]

Why do you give us the php code? Have you ever programmed php scripts? Do you know that a php server parses the php code and outputs pure html and no special php jazz about files?

 

POST THE HTML.

 

<div id="main">

<div id="left">
<div id="one"> </div>
<div id="two"> </div>
<div id="three"> </div>
</div>

<div id="center"> 
</div>

<div id="right">
<div id="seven"> </div>
<div id="eight"> </div>
<div id="nine"> </div>
</div>

</div>

 

it's probably a bit much for you if i print the code of the contents/summer.php code, so i've left it at  . That's not really the issue though

 

all help appreciated

[TheFilmGod]

What version of IE are you using? Do you have a valid doctype on the html page? If you are using ie6 w/out a valid doctype, ie6 goes into quirks mode. This may explain the situation you are getting.