IE 7 Rendering Problem

AKalair · June 20, 2009

Hi Guys,

Having some trouble IE 7 rendering my page wrong.

This what it should look like:

http://img34.imageshack.us/img34/9049/7eca3862eac7bda4411c995.png

This is what it looks like in IE 7

http://img199.imageshack.us/img199/7817/29693b98ba99bb9fdece5de.png

This is the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Playstation Online</title>
<link rel="stylesheet" type="text/css" href="equalcss.css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
a:link {
color: #FFFFFF;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div class="banner">
  <center><img src="newbannerPSO.jpg" alt="b" width="726" height="113"></center>
</div>
<div class="equal">
<div class="row">
	<div class="one">

<center> 

  <p class="SideBar"><a href="index.html" target="_parent" class="standardtext">Home</a></p>
  <p align="center" class="subheadings">Reviews</p>
  <p class="standardtext"><a href="ps3rev.html" target="_parent">PS3</a></p>
  <p class="standardtext"><a href="ps2rev.html" target="_parent">PS2</a></p>
  <p class="standardtext"><a href="psprev.html" target="_parent">PSP</a></p>
  <p class="standardtext"><a href="blurayrev.html" target="_parent">Blu Ray </a></p>
  <p align="center" class="subheadings">News</p>
  <p class="standardtext"><a href="ps3news.html" target="_parent">PS3</a></p>
  <p class="standardtext"><a href="ps2news.html" target="_parent">PS2</a></p>
  <p class="standardtext"><a href="pspnews.html" target="_parent">PSP</a></p>
  <p class="standardtext"><a href="bluraynews.html" target="_parent">Blu Ray</a></p>
  <p class="standardtext"><a href="Trophy/main.html" target="_parent">Trophies </a></p>
  <p align="center" class="subheadings">Community</p>
  <p class="standardtext"><a href="forums.html" target="_parent">Forums </a></p>
  <p class="standardtext"><a href="about.html" target="_parent">About</a></p>
  <p class="standardtext"><a href="contact.html" target="_parent">Contact</a></p>
  </center>		


	</div>
	<div class="two">
	  <p align="center"><span class="FrontPage style1"><a href="vidzone.html" class="headings">PS3's VidZone launching in PAL territories on June 11!</a></span><br>
          </p>
	  <p align="center"><img src="vidzone.jpg" alt="vid" width="178" height="74"></p>
	  <p align="center"><br>
              <span class="subheadings">Music video streaming confirmed for a June launch in UK, Australia, PAL countries.</span></p>
	  <p align="center"><img src="line.jpg" alt="line" width="500" height="2"></p>
	  <p align="center"><span class="FrontPage"><a href="uneralepiccc.html" class="headings">Playstation 3 Lands Huge Epic Game</a></span><br>
</p>
	  <p align="center"><img src="epic.jpg" alt="epic" width="150" height="150"> </p>
	  <p align="center"><br>
              <span class="subheadings">Running a newer Unreal Engine.</span></p>
	  <p align="center"><img src="line.jpg" alt="l" width="500" height="2"></p>
	</div>
	<div class="three">
          <p class="headings">Bargains </p>
          <p class="standardtext">Bargains go here </p>
          <p>          <span class="headings">Clan Matches</span></p>
          <p class="standardtext">Clan matches go here </p>
          <center><p class="headings"><span class="headings">          Sponsors </span></p>
          <p class="headings"><img src="gameadd.JPG" alt="game" width="120" height="60">          </p>
          <p class="headings"><img src="hmvadd.JPG" alt="hmv" width="145" height="66"></p>
          <p class="standardtext"><br> </p></center>
              </p>
  </div>
</div>
</div>

<div id="footer">
Last Updated: June 20, 2009 1:50 PM © Playstation Online 2009 No Reproduction Without Permission 
</div>

</body>
</html>

This is the CSS


/* Unkown probably layout rules */
.equal {
	display:table;
	border-collapse:separate;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}


/* Styling rules to make the example look nicer */
html,body {
background: #000000;     /* Page background colour */
}
body {
	font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}

/* Box behind the three columns NOT page */

.equal 
{
margin:10px auto;
border-spacing:10px;
background:#FFCC00; 
width:100%;
}

/* Left column, Navigation */

.row div.one 
{
background: #F72406; 
width: 15%;
}

/* Middle Column */

.row div 
{
background: #0066FF; 
}

/* Right Colum */
.row div.three 
{
background: #33CC99;
width: 15%;
}

/* Banner */	
.banner 
{
height: 10%;
}

/* Footer */

#footer 
{
text-align:center;
background: #FFFFFF;
}

.headings
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 18px;
}

.subheadings
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 16px;
}

.standardtext
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 14px;
}

Can anyone explain how to fix this ?

Thanks

haku · June 22, 2009

Probably something to do with your use of deprecated tags, and the fact that your code is invalid - you have random closing tags for tags that aren't open. You are also using break tags everywhere, which can screw stuff up as well.

It's really quite a mess.

Sign In

IE 7 Rendering Problem

Recommended Posts

AKalair

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information