I have an issue with viewing a webpage in IE7 or below. IE8 is fine and all FFs are perfect; but it seems to be related to floating or possibly having a width:auto.
First, screenshots (IE in Compatibilty Mode then Firefox):


Code: Select all
@charset "utf-8";
/* CSS Document
Written by Gary Newport
Started: May 2010
Version 0.3
MAIN DOCUMENT INFORMATION */
body
{
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
img
{
border-style: none;
}
/* Font Definitions */
.title
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.author
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
color: #9475B9;
}
/* Button Definitions */
#login_btn
{
background: url(images/buttons/login.png) center no-repeat;
height: 75px;
width: 50px;
border: none;
vertical-align: -15px;
}
#save_btn
{
background: url(images/buttons/save.png) center no-repeat;
height: 75px;
width: 50px;
border: none;
vertical-align: -15px;
}
#login:hover, #save:hover
{
cursor: pointer;
}
/* Container DIV definitions */
#container
{
margin: auto;
padding: 0;
margin-left: auto;
margin-right: auto;
height: auto;
width: 900px;
}
#content_top
{
position: relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
width: 900px;
background: #eee url(images/bcktop.png) center top no-repeat;
}
#top_padding
{
height: 110px;
}
#nav
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #9475B9;
font-weight: bold;
width: 860px;
text-align:right;
}
#content_top a
{
color: #000;
text-decoration: none;
}
#content_top a:hover
{
color: #00f;
text-decoration: underline;
}
#content_main
{
position: relative;
width: 900px;
min-height: 200px;
background: #eee url(images/bckmid.png) center top repeat-y;
}
#content_bottom
{
height: 128px;
width: 900px;
background: #eee url(images/bckbot.png) center bottom no-repeat;
}
#content_bottom div
{
position: relative;
top: 40px;
text-align: center;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#main
{
position: relative;
width: 830px;
left: 35px;
}
#anchor1
{
height: 140px;
width: 100px;
margin-left: 100px;
background: url(images/button.png) center center no-repeat;
}
#anchor1:hover
{
height: 140px;
width: 100px;
margin-left: 100px;
background: url(images/button_dn.png) center center no-repeat;
}
/* MESSAGE BOX PARAMETERS */
.MSG
{
border: #7E58AC 1px solid;
width: 200px;
min-height: 20px;
background-color: #FFFFFF;
}
.MSG_Top
{
width: 100%;
height: 12px;
background-color: #7E58AC;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 10px;
text-align: center;
font-weight: bold;
}
.MSG_Main
{
width: 100%;
height: 100%;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
.MSG_Main p, .MSG_Main a
{
font-size: 10px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
}
.MSG_Main a:hover
{
color: #00f;
text-decoration: underline;
}
/* Posting Space */
#area_left
{
float: left;
min-width: 200px;
}
#area_right
{
float: right;
}
/* Article Space */
#article
{
width: 600px;
}
/* Main Menu Definitions */
.category
{
width: auto;
float: left;
}
.category .topic
{
float: right;
}
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="rro.css" rel="stylesheet" type="text/css">
<title>Welcome to Revision Rocks Online</title>
</head>
<body>
<div id="container">
<div id="content_top">
<div id="top_padding">
</div>
<div id="nav">
<span style="vertical-align: 40px;">Welcome, Mr Admin</span> <a href="index.php?action=control"><img src="images/buttons/control.png" alt="Control Room"></a> <a href="index.php"><img src="images/buttons/home.png" alt="Home Page"></a>
<a href="./cmsadmin/login.php?action=logout"><img src="images/buttons/logout.png" alt="Log Out"></a>
</div>
<div style="clear:both;"></div> </div>
<div id="content_main">
<div id="main">
<div id="area_left">
<div class="category">
<img src="images/buttons/history.png" alt="History">
<div class="topic">
<img src="images/buttons/germany.png" alt="Germany 1919-1945">
</div>
<div class="topic">
<img src="images/buttons/coldwar.png" alt="The Cold War">
</div>
<div class="topic">
<img src="images/buttons/ameridiv.png" alt="America 1941-1980">
</div>
<div class="topic">
<img src="images/buttons/america.png" alt="America 1919-1941">
</div>
</div>
<div style="clear:both;"></div>
<br>
<div class="category">
<img src="images/buttons/english.png" alt="English">
<div class="topic">
<img src="images/buttons/miceandmen.png" alt="Of Mice and Men">
</div>
</div>
</div>
<div id="area_right">
<div class="MSG" style="left: 620px;">
<div class="MSG_Top">
Latest Information
</div>
<div class="MSG_Main">
<p><a href="article.php?id=4&act=v">One Flew Over The Cuckoo's Nest</a></p><p><a href="article.php?id=2&act=v">Second World War</a></p><p><a href="article.php?id=1&act=v">Of Mice and Men</a></p> </div>
</div>
<br> <div class="MSG" style="left: 620px;">
<div class="MSG_Top">
Useful Key
</div>
<div class="MSG_Main">
<table>
<tr>
<td><a href="./cmsadmin/login.php?action=logout"><img src="images/icons/logout.png" alt="Log Out"></a></td>
<td><p style="text-align:left;"><a href="./cmsadmin/login.php?action=logout">Log out</a></p></td>
</tr>
<tr>
<td><a href="index.php"><img src="images/icons/home.png" alt="Home Page"></a></td>
<td><p style="text-align:left;"><a href="index.php">Return to the home page</a></p></td>
</tr>
<tr>
<td><a href="control.php" ><img src="images/icons/control.png" alt="Control Room"></a></td>
<td><p style="text-align:left;"><a href="control.php" >Enter the Control Room</a></p></td>
</tr>
</table>
</div>
</div>
<br> </div>
<div style="clear:both;"></div>
</div>
</div>
<div id="content_bottom">
<div style="width: 500px; left: 200px;">
<a href="http://validator.w3.org/" target="_blank"><img src="images/valid-html401.png" alt="Valid HTML 4.0" style="float: left; left: 35px;"></a>
Copyright Revision Rocks Online ©2010 ¦ Contact Us ¦ About Us
<a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="images/vcss.gif" alt="Valid CSS 2.1" style="float: right"></a> </div>
</div>
</div> </body>
</html>