Hi (Dan and others)

My code is below but here are the points to consider -

a) YOu can see the Mozialll fix "div>p {margin:0}" without this the content of the footer appears below one line and so does the date on the top right hand corner. But in IE this is fine.

b) The three containers seems to be equal length in FF and IE. But the various boxes inside the coloumns (middle and right, the first coloumn as only box) seems to differ in width between FF and IE even though I have fixed it. In FF they appear to be longer. I guess this is some browser issue. Any elaboration would help.

c) I have an IE problem here. The boxes inside the container (boxmiddle and boxright) are all left aligned (floated left) but differed in their width slightly even though I have fixed the width. I dont understand why! But under FF they are all perfectly aligned as they should be, even in my dremaweaver the boxes are aligned perfectly. This seems like IE issue. I am sure this is some IE bug that can be fixed.


MY CSS is:

a:link {
color:#0066CC;
text-decoration:none;
}
a:visited {
color:#0066CC;
text-decoration:none;
}
a:hover {
color:#0066CC;
text-decoration:none;
}
a:active {
color:#0066CC;
text-decoration:none;
}

#masthead{
width: 900;
background-image:url(../images/header.png);
background-repeat: no-repeat;
width:900;
height:142;
background-attachment: scroll;
position: relative;
}

#datebox{
position:absolute;
left:785px;
top:112px;
width:109px;
height:18px;
overflow:visible;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
text-align:right;
}



td {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

th {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

.small {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9px;
}

.medium {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

.big {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.4em;
margin: 2px;
}

.archive {
font-family: inherit;
font-size: 1.4em;
font-weight:bold;
font-styleblique;
text-align:center;
}




.bigcolor {
font-size: 1.2em;
font-weight:bold;
}

.xbig {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}


.box1 p {
line-height:1.2em;
}

html, body{height:100%;}
html,body {margin:0;padding:0}
div>p {margin:0} /* fix for mozilla */

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.625em; /* This gives a value of 10px */
background-color: #FFFFFF;
margin-left:auto; /* makes the content center, works for all but IE needs a fix thus below*/
margin-right:auto; /* makes the content center */
font: #000000;
height: 100%;
width: 900px;
text-align:center; /* fix for IE, removes the need for center tag which is more presentation */
}

#outer{
flow:left;
min-height:100%;
height:auto;
width:inherit;
margin-left:0;/* center it*/
margin-right:0;/* center it*/
position:relative;
text-align:left;
}


* html #outer{
height:100%;
width:902px;/* box model hack for ie5.+*/
w\idth:900px
}

#container1 {
float: left;
width: 430px;
height: auto;
margin-top:3px;
}
#container2 {
left:430px;
float: left;
width: 270px;
height:auto;
margin-top:3px;
margin-left:3px;
border:thin #000000 solid;
}
#container3 {
left:703px;
float:left;
width: 190px;
height: auto;
margin-top:3px;
margin-left:3px;
margin-right:0px;
border:thin #000000 solid;
}

.boxarticle {
width: 70%;
top: 144px;
font-size: 1.4em;
text-align: left;
line-height:150%;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
height: auto;
float: left;
margin-left: 10px;
}

.boxpoem {
width: 100%;
top: 144px;
font-size: 1.4em;
text-align: left;
line-height:150%;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
height: 500px;
float: left;
margin-left: 10px;
}


.boxanalysis {
font-family: Georgia, "Times New Roman", Times, serif;
border-width:thin;
padding:0.5em 1em 0.5em 1em;
border-style: solid;
border-color: #000000;
font-size: 1.2em;
text-align: justify;
font-stretch:expanded;
background-color: #CAFBD2;
visibility: visible;
height:auto;
}

.boxmiddle {
font-family:inherit;
text-align: justify;
line-height:125%;
padding:0.5em;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
font-size: 1.2em;
background-color: #CDFCFC;
visibility: visible;
margin-bottom:2px;
width:265px;
}


.boxright {
font-family:inherit;
text-align: justify;
line-height:125%;
padding:0.5em;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
height: auto;
font-size: 1.2em;
background-color: #CAFBD2;
visibility: visible;
margin-bottom: 2px;
width:185px;
}

.boxbook {
font-family:inherit;
text-align: justify;
padding:0.5em;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
height: auto;
background-color:#CAFBD2;
font-size: 1.2em;
visibility: visible;
margin-bottom: 2px;
width:185px;
}

.bookcover {
text-align:center;
font-size:18px;
font-weight:bold;
background:no-repeat #CAFBD2 url(../images/suicide6.jpg) center;
color:#FF0000;
}

#footer {
font-family:inherit;
font-size: 1em;
color: #000000;
height:15px;
background-color:#8FDCA8;
font-weight: bolder;
left: 0px;
width:900px;
position:absolute;
}


#clearfooter{clear:both;height:15px;width:100;}

.fiction {
font-style:italic;
}


.title {
font-size:1.2em;
color:#0066CC;
font-weight: bold;
}

.articletitle {
font-size:1.6em;
color: #0000CC;
line-height:125%;
font-weight: bold;
}

.image_float {
float:right;
margin:0 0 0 0.5em;
}

h1,h2,h3 {
font-family:Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
}

.author {
font-size:1.2em;
}
.spacer {
clear:right;
}


.boldtext { font-weight:bold;
font-styleblique;
line-height:130%;
font-stretch:expanded;
}

MY HTML code is (note I have taken out the PHP as much I can): -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--Serif WebPlus 10 HTML Export-->
<!--Supports HTML 4.01-->
<meta name="Generator" content="Serif WebPlus 10.1.1.036">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">


<title>Views-Home</title>
<link href="CSS/main.css" rel="stylesheet" media="screen" type="text/css">

</head>

<body>

<div id="masthead">
<div id="datebox">
<p> <?php echo date("d F, Y") ?></p>
</div>
</div> <!-- end of the header section -->

<div id="outer">
<div id="container1">
<div class="boxanalysis">
<div align="center" class="big">Latest Analysis </div>
<--! taken out my php codes here -->
<hr><br>

</div> <!--end of boxanalysis -->
</div>
<!-- end of first container -->

<div id="container2">
<div class="boxmiddle">
<div align="center" class="big"> In Quotes </div>
<hr>
<div align="center" class="boldtext"> </div>
</div>

<div class="boxmiddle">
<div align="center" class="big">21st Century Myths </div>
<hr>
<div class="bigcolor" align="center"> But the Reality </div>
<br>

</div>

<div class="boxmiddle">
<div align="center" class="big">History </div>
<hr>
<div class="title" align="center">
</div><br>

</div>


<div class="boxmiddle">
<div align="center" class="big">Juurney </div>
<hr>
<div class="title" align="center" >
</div>
</div>
</div> <!-- end of second container -->

<div id="container3">
<div class="boxbook">
<div class="big" align="center"> Forthcomming Book </div> <hr>
<div class="bookcover" align="center"> Travel
<font color="#000000" size="-1"> By Explorer </font> </div>
</div>

<div class="boxright">
<div align="center" class="big"> Poetry Corner </div>
<hr>

</div>


<div class="boxright">
<div align="center" class="big"> Letters </div>
<hr>
</div>

<div class="boxright">
<div align="center" class="big">Support</div>
<hr>
</div>
</div>
<!-- end of third container -->

<br>
<div id="clearfooter"> </div>


<div id="footer">
<p align="center"><a href="contactus.html"> Contact Us |</a><a href="aboutus.html">
About Us | </a><a href="site.html">Site Map</a></p>
</div>

</div> <!-- end of the outershell -->


</body>
</html>