[SOLVED] 5 Collumn CSS appearing correctly in everything but IE

[kendallkamikaze]

http://www.one-stride.net/ is the site.

 

I've been working on the code for the last 3 hours and everything is set, but now its not displaying correctly in IE.

 

<style type="text/css">

#MainLeft, #MainRight{
position: absolute; 
top: 0; 
left: 0px; 
width: 150px; /*Width of left frame div*/
height: 100%;
overflow: hidden; 
background-color: 3a643e;
color: white;
}

#MainRight{
left: auto;
right: 0px; 
width: 150px; /*Width of right frame div*/
overflow: hidden; 
height: 100%;
background-color: 3a643e;
color: white;
}

#MainLeft2, #MainRight2{
position: absolute; 
top: 0; 
left: 0px; 
width: 10px; /*Width of left frame div*/
height: 100%;
overflow: hidden; 
background-color: 2e5032;
color: white;
}

#MainRight2{
left: auto;
right: 0px; 
width: 10px; /*Width of right frame div*/
overflow: hidden; 
height: 100%;
background-color: 2e5032;
color: white;
}

#maincontent{
position: fixed; 
left: 150px; 
right: 150px; 
bottom: 0;
overflow:auto;
height: 100%;
background: #e0e2d4;
}



table.sample {
border-width: thick;
border-spacing: 0px;
border-style: solid;
border-color: #425e3f;
border-collapse: separate;
background-color: #ffffff;
}

.innertube{
margin: 10px; 
}

</style>

<div id="MainLeft">
<div id="MainRight2">
<div id="innertube">
</div>
</div>
</div>

<div id="MainRight">
<div id="MainLeft2">
<div id="innertube">
</div>
</div>
</div>


<div id="maincontent" style="background: #e0e2d4;">
<div id="innertube">

<center>
<img src="items/currentlayout/spacer.jpg"><BR>
<img src="items/currentlayout/test.jpg"><BR><BR>
<TABLE>
<TR><TD>


<table class="sample">
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="402" HEIGHT="172">
<div STYLE="
overflow:auto; 
background-image:url(layoutslice/2newlayout_2x1.jpg);
border: 5px; 
border-style: soild; 
border-color: #425e3f; 
color:none; 
width: 402px; 
height: 180px; 
	scrollbar-face-color:F1F2EA;
	scrollbar-shadow-color:F1F2EA;
	scrollbar-highlight-color:F1F2EA;
	scrollbar-3dlight-color:F1F2EA;
	scrollbar-darkshadow-color:F1F2EA;
	scrollbar-track-color:F1F2EA;
	scrollbar-arrow-color:000000;
font-family: MS Sans Serif;
font-size: 14px;
color: #38643b;">

<li>Do you love horses?
<LI>Do you enjoy automated games?
<LI>Like the aspect of relistic simulation?
<LI>Does raising, breeding, and showing horses sound fun?
<LI>Like a friendly community and not an elitest community?
<center><BR>
<b>One-Stride</b> is a unique, challenging simulated horse game that allows players to breed, care for, show and interact with virtual horses. Players also take part in a virtual riding academy that allows them to progress up the ranks through exams to become a world class farrier, vet, show judge or president of an association. These exams involve questions taken from actual equestrian colleges. The game combines elements of a role-playing game and automated sim to give players a different and personal experience. Players will take part in challenges of realistic horse management and will build bonds with people from all over the world.  <BR><BR>This game is free to try and everyone is welcome! We do offer inexpensive upgrades for any player who would like a few extra perks on the game.
<b>One-stride</b> has been evolving quickly with members from all over the world. What we have to offer you is a very friendly/active community of horse and animals lovers, it is also a fun way to compete/care for virtual horses!<br><BR>

We hope you enjoy <b>One-stride</b> as much as we do, and look forward to chatting with you!</div></TD>
</tr></table>

</td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>

<table class="sample">
<TR><TD>
<div STYLE="
overflow:auto; 
background-image:url(layoutslice/2newlayout_2x1.jpg);
border: 5px; 
border-style: soild; 
border-color: #425e3f; 
color:none; 
width: 402px; 
height: 180px; 
	scrollbar-face-color:F1F2EA;
	scrollbar-shadow-color:F1F2EA;
	scrollbar-highlight-color:F1F2EA;
	scrollbar-3dlight-color:F1F2EA;
	scrollbar-darkshadow-color:F1F2EA;
	scrollbar-track-color:F1F2EA;
	scrollbar-arrow-color:000000;
font-family: MS Sans Serif;
font-size: 14px;
color: #38643b;">

<center><a href="http://www.one-stride.net/register.php"> <img src='layoutslice/register3.jpg' border='0px'></a><BR>
<font face='Comic Sans MS' size='2px'>It's free to play! </font></center>
<?php 

include 'loginbox.php';

?><BR>
<center><font face='Comic Sans MS' size='2px'>If you want to take a look around you can log in with:<BR>
Username: guest Password: guest</font></center></div>
</td></tr></table>
</td></tr></table>

</center>
</div>
</div>

 

IE image:

 

Opera image:

[gevans]

Which part isn't displaying correctly in IE?

[kendallkamikaze]

If you look theres a white space in the main collumn at the top and bottom

[gevans]

Trying to keep with your style of css you need to add the top positioning fot the maincontent div;

 

#maincontent{
position: fixed; 
left: 150px; 
right: 150px; 
bottom: 0;
overflow:auto;
height: 100%;
background: #e0e2d4;

top: 0;

}

[kendallkamikaze]

I've added the top to it and it displays the same in IE

[gevans]

set the margin and padding to 0 as well

 

#maincontent{
position: fixed; 
left: 150px; 
right: 150px; 
bottom: 0;
overflow:auto;
height: 100%;
background: #e0e2d4;
top: 0;
margin: 0;
padding: 0;
}

[kendallkamikaze]

Nope, nothing. What i do notice is that the white spaces on IE are fixed and the actual content scrolls when it doesnt do that in opera, ff, Google Chrome etc.

[gevans]

I'm at a bit of a loss. IE does some funny things, but can't find anything about this

[gevans]

Sorry I was being slow, had to download and fiddle before I realised....

 

add the following at the top of your css

 

body{
margin: 0;
padding: 0;
}

[kendallkamikaze]

Thank you thank you! Adding the BODY did it