Opera display problem

[nch]

I have the following web page working for IE6 (almost- except the perfect alignment of the Campus connect img) and Firefox 1.7.

http://wsdev.colostate.edu/cwis116/admmock/

It does not render properly in Opera 8.0. How can I fix it so that is consistent in the 3 browsers.

Also, how can I lock the left navigation menu, so that it does not increase or get altered in position for larger fonts.

CSS:-
body {
background-color :#003300;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}

A:LINK, A:VISITED {
background-color : transparent;
color : #003300;
font-weight : bold;
text-decoration : none;
}

A:HOVER {
background-color : #003300;
color : #FFFFFF;
}


.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}

/*div{
font-size: xx-small;
border: 0px;
margin: 0px;
outline : 0px;
padding: 0px;
}*/

.xxsmall{
font-size: xx-small;
}
#logo { height:85px; width:760px; border:0; vertical-align : bottom;}

#mainleftnav {
position:absolute; top:85px;height:250px; width:218px; float : left;
}

#mainnavlist
{
color: white;
background: #030;
border-bottom: 0.2em solid #030;
border-right: 0.2em solid #030;
padding: 0 1px;
margin-left: 0px;
margin-top : 1.5em;
margin-bottom : 0px;
margin-right : 0px;
width: 26.5em;
font: normal 0.8em arial, Verdana, sans-serif;
}

#mainnavlist li
{
list-style: none;
margin: 0px;
font-size: 1.47em;
}

#mainnavlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #040;
border-width: 1px;
border-style: solid;
/*border-color: #5bd #035 #068 #6cf;*/
border-color : #393 ;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#mainnavlist a#current { border-color: #5bd #035 #068 #f30; }

#mainnavlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}

#mainnavlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 15.4em;

/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}


#mainnavlist a:hover, #mainnavlist a#current:hover
{
background: #050;
/*border-color: #069 #6cf #5bd #fc0;*/
border-color : #093 #393 #393 #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#mainnavlist a:active, #mainnavlist a#current:active
{
background: #030;
/* border-color: #069 #6cf #5bd white;*/
border-color : #093 #393 #393 white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#rightsection {float:right; height : 480px;width :192px; background-color : #669966;
border-bottom : medium ridge #DDC642 ; }

#rightnavcontainer ul
{
position : relative;
top : 60px;
margin-left: 18px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align : center;
font-size: 8pt;
font-weight :500;
}

#rightnavcontainer a
{
display: block;
padding: 3px;
width: 136px;
background-color: #030;
color : #DDC642;
border-bottom: 1px solid #eee;
}

#rightnavcontainer a:link, #navlist a:visited
{
color: #DDC642;
text-decoration: none;
}

#rightnavcontainer a:hover
{
background-color: #e8d980;
color: #003300;
}


#search { position : relative; top : 0px; width : 192px; background-color : #003300; color : #DDC642; margin:0px; padding:0px; border:0px;}


input.azsearch {
margin-left:0px;
border: black 1px solid;
font-size: 8pt;
color : #003300;
}

input.azsubmit {
width:22px;
border: black 1px solid;
font-size: 7pt;
background-color : #DDC642;
}

#address { position : relative; top : 150px; text-align:center; color:#003300; }

#main_content {width:568px; height:480px; float:left; background-color:#efe4a6;
border-bottom : medium ridge #DDC642 ; }

#visit_campus_bg { float:right; width:350px; height:250px; background-repeat : no-repeat;color:#fff; }

#connect_img { position:absolute; top:338px;width:568px; height:230px; background-repeat : no-repeat;}
#connect { text-align:center; position:relative; top:80px; }

.clear { clear:both; }

#footer { text-align:center; background:#fff; margin:0 auto; width:100%;}

Code:-
<html>
<head>

<link rel="stylesheet" type="text/css" href="adm_display_test.css" media="screen" />

<style type="text/css">
.tooltip A:hover {
background-color: #040; text-decoration: none;
}
.tooltip .toolbox A:hover span{
display: block! important; background:white; border: black 1px solid; color: black; position: absolute; width : 120px; z-index:100;
}
</style>
<title>Colorado State University Office of Admissions</title>
</head>

<body>
<div class="pageBorder">

<img src="http://wsdev.colostate.edu/cwis116/admmock/images/head_trial5.jpg" id="logo" alt="Office of Admissions" usemap="#m_head_trial5" />

<map name="m_head_trial5" id="m_head_trial5">
<area shape="rect" coords="611,0,760,77" href="http://www.colostate.edu" title="Colorado State University Homepage" alt="Colorado State University Homepage" />
<area shape="rect" coords="7,50,246,71" href="http://wsdev.colostate.edu/cwis116/admmock" title="Admissions Home Page" alt="Admissions Home Page" />
</map>

<div id="rightsection">
<div id="search">
<form id="search_a_z" method="get" action="http://search.colostate.edu/keywords_tracker/keywords_tracker.asp">

<div class="azsearch" style="margin-left:10px;">Search CSU:
<input type="text" id="keywords1" value="" class="azsearch" />

<input type="submit" value="Go" class="azsubmit" /></div>
</form>

<form method="get" action="http://search.colostate.edu/keywords_tracker/keywords_tracker.asp">
<div class="azsearch"style="margin-left:10px;" >Search Admissions:
<input type="text" id="keywords2" value="" class="azsearch"/>

<input type="submit" value="Go" class="azsubmit" /></div>
</form>
</div>

<div id="rightnavcontainer">
<ul>
<li><a href="http://admissions.colostate.edu/visit/index.shtml">Visit Campus</a></li>
<li><a href="http://wsdev.colostate.edu/cwis116/admmock/dsp_apply.cfm">Apply</a></li>
<li><a href="http://admissions.colostate.edu/eforms/moreinfo.shtml">Get on our Mailing List</a></li>
<li><a href="http://admissions.colostate.edu/eforms/moreinfo.shtml">Contact Us</a></li>
<li><a href="http://admissions.colostate.edu/eforms/moreinfo.shtml">RAMS on the ROAD</a></li>
<li><a href="http://www.connect.colostate.edu" onclick="window.open (this.href, 'child'); return false">CAMpus Connection</a></li>
</ul>
</div>
<div id="address">
<strong>Office of Admissions<br />
Colorado State University<br />
8020 Campus Delivery<br />
Fort Collins, CO 80523-8020<br />
(970) 491-6909</strong>
</div>

</div> <!--- end of rightnav --->

<div id="main_content">

<div id="visit_campus_bg">
<img src="images/sprucehall.jpg" width="350" height="250" id="sprucehall" usemap="#m_sprucehall" alt="Visit Campus" style="border:0px;" />
<map name="m_sprucehall" id="m_sprucehall">
<area shape="rect" coords="0,0,350,250" href="http://admissions.colostate.edu/visit" onclick="window.open (this.href, 'child'); return false" title="Visit Campus" alt="Visit Campus" />
</map>

</div>
<ul id="mainnavlist" >
<li>
<a href="http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm" >Future Freshmen</a></li>
<li>
<a href="http://wsdev.colostate.edu/cwis116/admmock/dsp_trn.cfm" >Transfer Students</a></li>
<li>
<a href="http://wsdev.colostate.edu/cwis116/admmock/dsp_intl.cfm">International Students</a></li>
<li>
<a href="http://admissions.colostate.edu/">Returning Students</a></li>
<li>
<a href="http://graduateschool.colostate.edu/">Graduate Students</a></li>
<li>
<a href="http://admissions.colostate.edu/">Parents</a></li>
<li>
<a href="http://admissions.colostate.edu/">High School Counselors</a></li>
<li class="tooltip">
<a href="http://admissions.colostate.edu/">Non-degree students</a></li>
</ul>

<div id="connect_img">

<img src="images/campus3.jpg" width="568" height="230" style="border:0px;" id="campus" alt="Student profiles, photo gallery and videos" usemap="#m_campus" />

<map name="m_campus" id="m_campus">
<!--- <area shape="rect" coords="0,0,568,300" href="http://connect.colostate.edu" alt="Student profiles, photo gallery and videos" title="Student profiles, photo gallery and videos" alt="Student profiles, photo gallery and videos" target="_new"/> --->
<area shape="poly" coords="0,0,568,0,568,230,0,230,0,0" href="http://connect.colostate.edu" onclick="window.open (this.href, 'child'); return false" alt="Student profiles, photo gallery and videos" title="Student profiles, photo gallery and videos" />
</map>
</div>
</div>

<div class="clear"></div>

<cfinclude template="footer.cfm">
</div>
</body>
</html>

[Fang]

Wrap a <div> around the floated divs

      </map>
<div>   <!-- begin-->
    <div id="rightsection">
.
.
.
  </div>

</div> <!-- end -->
      <div class="clear"></div>

[nch]

Thanks. That worked.