3 Column Layout (based on Eastview) problems with column widths

Hi

This is my first post… After long searching I know that my problem is probably based in column widths. Basically, In Internet Explorer I see my site the way it should be… Three Columns laid out as follows

A features area which spans the two two right columns and then three columns

Column 1 (News Categories)
Column 2 (Announcements Category)
Column 3 (Sidebar Menu)

then the footer.

The theme is based heavily upon Eastview. But when I view it in Netscape Column 2 is pushed down the page. I have gone through the CSS file (see below) and adjusted and readjusted to no avail. I have gone through forums on here and also ones found through google with luck, except to find one that means I will have to start recoding from scratch. I have tried part of this and end up in a more horrible mess. i wonder if anyone out there can help by having a look at the code below and let me know what I am doing wrong.

many thanks

Noel

CSS

_________________

/*
License – The CSS, XHTML and design is released under GPL:
https://www.opensource.org/licenses/gpl-license.php

*/

/* ——- Layout CSS( Centered Fixed Width) —— */

body {
font-family: Verdana, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
text-align: center; /* IE 5.5 hack */
}

#farouter {background: #D8D4C9;width: 760px; border: 1px solid #3A291F;margin: 20px auto 20px auto;text-align: left; /* IE 5.5 hack part II */}
#outer {}
#rap {}
#masthead { font: normal 100% Verdana, sans-serif; height: 190px;
}

#main {padding-left:25px;}
#content {float: left;width: 500px; padding-top: 40px;}
#menu {float: right;width: 175px; margin-right: 3px; border-left: 1px dashed #030303;}
#nav {padding-left: 10px;}
#logo {padding-top: 25px; padding-left: 12px;}
#hmenu {margin: 8px; height: 30px;}
#hnav {margin: 0px;padding: 0px;}
#clearer { clear: both; margin: 0px; padding: 0px;}
#footer { margin: 8px 8px 8px 8px; }
#left { width: 250px; border-right: 1px dotted #ccc; padding: 0px 10px 0px 0px; float: left; display: block; ; ; clear: left}
#right { width: 230px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: right; display: block; left: 3px; float: right; position: relative; clip: rect( ); overflow: visible; clear: right}

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 225px;
margin: 25px 0px 0px 20px;
padding: 0px 0px 20px 0px;
border-top: 2px solid #000000;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
display: inline;
padding: 0px;
margin: 0px;
}

#l_sidebar ul li a {
display: block;
color: #000000;
text-decoration: none;
margin: 0px;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid #C0C0C0;
}

#l_sidebar ul li a:hover {
background: #EFEFEF;
color: #990000;
}

#l_sidebar p{
padding: 3px 0px 0px 0px;
margin: 0px;
line-height: 20px;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 225px;
margin: 25px 0px 0px 20px;
padding: 0px 0px 20px 0px;
border-top: 2px solid #000000;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#r_sidebar ul li {
display: inline;
padding: 0px;
margin: 0px;
}

#r_sidebar ul li a {
display: block;
color: #000000;
text-decoration: none;
margin: 0px;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid #C0C0C0;
}

#r_sidebar ul li a:hover {
background: #EFEFEF;
color: #990000;
}

#r_sidebar p{
padding: 3px 0px 0px 0px;
margin: 0px;
line-height: 20px;
}

/************************************************

/*—————– Color CSS ————————*/

body {background: #D8D4C9;}
#rap {background: #ffffff;}
#masthead {background-image: url(‘images/header.jpg’);}
#footer {background: #000000;}
#hmenu { background: #000000;}
#hnav {
background: #000000;
}
a {color: #000000; text-decoration: none; }
a:visited { color: #5A1706; text-decoration: none; }
a:hover { color: #D16C04; text-decoration: underline; }

acronym, abbr { border-bottom: #333; }
blockquote {border-left: #000000; color: #1E2D3B;}
h2 { color: #000000;}
h3 a {color: #000000; }
h3 a:hover {color: #000000;}
h3 a:visited {color: #000000;}
.meta { color: #CCCC99 }
.meta a {color: #cccc99;}
.feedback a{color: #cccc99;}

/* ——– Core CSS ———*/

a{text-decoration: none;}
a img { border: none; }
acronym, abbr { border-bottom: 1px dashed; }
acronym, abbr, span.caps { cursor: help; font-size: 90%; letter-spacing: .07em;}
blockquote { border-left: 3px solid #000000; border-bottom: 3px solid #000000; margin-left: 1.5em; padding-left: 5px;}
cite { font-size: 90%; font-style: normal; }
#header a { color: #000000; text-decoration: none;}
#header a:hover { text-decoration: underline; }
h1 { margin: 0; padding: 10px; text-align: right; }
#hidden {display:none;}

h2 {font: normal 12px Verdana, sans-serif; letter-spacing: 0em; margin: 0 10px 10px 0; padding: 10px 0 0 0; }
h2#tagline { margin-right: 15px; padding:0;text-align: right;color: #ff0000;border: 0px none;; margin-left:0; margin-top:0; margin-bottom:0}

.post h2 { font: 100% Verdana, sans-serif; letter-spacing: .6em; margin: 0px 20px 0px 30px; padding: 20px 0px 30px 0px; }
h3 {font: bold 10px Verdana, sans-serif; margin-left: 0px; margin-top: 30px;color: #000000; }
h3#comments { margin-left: 10px; }
h3#respond { margin-left: 10px; }
h4 {
font-size: 12px;
font-weight: normal;
}
ol#comments li p { font-size: 100%; }
img {margin: 10px;padding: 10px; border: 1px solid #000000; }
.feedback
{ font: 100%/175% Verdana, sans-serif;}
p {}
.textarea { width:200px; margin:0; }
#archvies {
font: 150% normal Verdana, sans-serif;
}

.substory-frame {padding: 0px 0px; margin: 0px 0px; display: block; overflow: auto; }
.substory {display: block; padding: 5px; margin: 0px; text-align: justify}

/* ————————- Classes used by the_meta() ———————*/

ul.post-meta {
list-style: none;
}

ul.post-meta span.post-meta-key {
font-weight: bold;
}

.credit {
color: #fff;
font-size: 90%;
margin: 10px 0px 0px 0px;
padding: 3px;
text-align: center;
}

.credit a, .credit a:hover {color: #fff;text-decoration: none;}
.feedback {text-align: right;clear: both;margin-right: 30px; font-size: 90%}
.meta {font-size: .95em;}
.meta li, ul.post-meta li {display: inline;}
.meta ul {display: inline;list-style: none;margin: 0px;padding: 0px;}
.meta, .meta a { font-weight: normal; letter-spacing: 0px;}
.post { margin: 35px 35px 20px 0px; }
.entrytext {margin-left: 30px;}
.storytitle { margin-top: 10px; margin-bottom: 2px; }
.storytitle a { text-decoration: none; }
.storycontent{margin-bottom: 5px; border-bottom: 1px solid #000000;}
#commentform { margin-left: 20px; }
#commentform #comment { width:450px; }
#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background: #fff; padding: .2em; }
#commentform textarea { width:100%;}
#commentlist li {border: 2px solid #000000; margin-bottom: 20px; padding-left: 20px;}
#commentlist li ul { border-left: 1px solid #ddd; font-size: 110%; list-style-type: none;}

/* ———- All menu styling except #menu itself (in layout above) ——- */

#nav form {
margin: 0px 0px 0px 13px;
}

#nav inputs {
width: 80%;
background: #eee;
border: 1px solid #000;
color: #000;
}

#nav ul li h2 {
font-family: Verdana, sans-serif;
font-weight: normal;
letter-spacing: 0.1em;
border: 0px none;
text-align: left;
padding-left:0px;
margin-left: 0px
}

#nav ul ul ul.children {
font-size: 100%;
padding-left: 4px;
}

#nav { width: 170px; }

#nav ul
{
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
font-family: Verdana, sans-serif;
font-size: 95%;
}

#nav a
{
display: block;
padding-left: 17px;
width: 130px;
background-color: #FFF;
background-image: url(‘images/icon.gif’);
background-repeat: no-repeat;
background-position: 0% 55%;
border-bottom: 1px dotted #000000; padding-right:3px; padding-top:3px; padding-bottom:3px

}

#nav a:link, #navlist a:visited
{

text-decoration: none;
}

#nav a:hover
{
background-image: url(‘images/icon2.gif’);
color: #000
}

#themeswitcher {
font-size: 8px;
}

/*————- hnav————*/

#hnav ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0px;
margin-top: 0px;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0px;
background-color: #000000;
color: #D8D4C9;
width: 100%;
font-family: Verdana, sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}

#hnav ul li
{
display: inline;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}

#hnav ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #D8D4C9;
text-decoration: none;
border-right: 1px solid #D8D4C9;
}

#hnav ul li a:hover
{
background: #D8D4C9;
color: #3A291F;
}

#hnav #active { border-left: 1px solid #D8D4C9; }

/*————- added ————*/

.gravatar {
float:left;
padding: 3px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #000000;
}

#commentbox {
background: #BFBEBE;
border: 1px solid #000000;
padding: 5px;
margin-bottom: 15px;
}

.commentby {
font-size: 14px;
text-transform: uppercase;
}
.commentinfo {
font-size: 10px;
margin-top: -10px;
border-bottom: 1px soild #D8D4C9;
}

.commentid {
float: right;
font-size: 24px;
font-style: italic;
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
color: #000000;
}

.commentid a {
color: #000000;
text-decoration: none;
}

.post ul li {
padding: 0px;
font-weight: normal;
list-style: url(‘images/icon.gif’);
line-height: 1.5em;
}
.post ul li:hover {
padding: 0px;
font-weight: normal;
list-style: url(‘images/icon2.gif’);
line-height: 1.5em;
}

_________________________

index.php
________________________

<?php

include_once(‘gravatar.php’);

get_header();
?>
<div id=”substory-frame”>

<?php $wp_query = new WP_Query(‘order=DESC’); ?>
<?php query_posts(‘cat=20’.’&showposts=1′); // exclude the Announcements category ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”substory”>
<h2><?php _e(‘Feature’); ?></h2>
<h3 class=”storytitle” id=”post-<?php the_ID(); ?>”>” rel=”bookmark”><?php the_title(); ?></h3>
<div class=”storycontent”><?php the_content(__(‘(Read on …)’)); ?></div>
<div class=”meta”><?php edit_post_link(__(‘Edit This’)); ?></div>

<!– <?php trackback_rdf(); ?> –>

</div>

<?php comments_template(); ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

<div class=”substory” id=”left”>
<h2><?php _e(‘Articles’); ?></h2>
</div>
<?php query_posts(‘cat=2,3,13,15,16,17’.’&showposts=4′); // exclude the Announcements category ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”substory” id=”left”>
<h3 class=”storytitle” id=”post-<?php the_ID(); ?>”>” rel=”bookmark”><?php the_title(); ?></h3>
<div class=”storycontent”><?php the_content(__(‘(Read on …)’)); ?></div>
<div class=”meta”><?php edit_post_link(__(‘Edit This’)); ?></div>
<div class=”feedback”><?php wp_link_pages(); ?> <?php comments_popup_link(__(‘Comments (0)’), __(‘Comments (1)’), __(‘Comments (%)’)); ?>
</div>

<!– <?php trackback_rdf(); ?> –>

</div>

<?php comments_template(); ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

<div class=”substory” id=”right”>
<h2><?php _e(‘Announcements’); ?></h2>
</div>
<?php query_posts(‘cat=18’.’&showposts=15′); // Include the Announcements category ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”substory” id=”right”>
<h3 class=”storytitle” id=”post”>” rel=”bookmark”><?php the_title(); ?></h3>
<div class=”meta”><?php edit_post_link(__(‘Edit This’)); ?></div>
</div>

<!– <?php trackback_rdf(); ?> –>

<?php comments_template(); ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

</div>
<?php get_footer(); ?>