Log in

View Full Version : Layout issue in IE6



robx1971
11-14-2007, 06:09 PM
The site I am design looks fine in FF but not in IE6. The right column is not showing up in IE for some reason. Here is the code. I am behind a firewall, so unfortunately I can not provide a link to the site.

HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #2.2- (Fixed-Fixed)</title>
<style type="text/css" media="all">@import "master.css";</style>

<script src="equalcolumns.js" type="text/javascript"></script>

</head>


<body>
<div id="maincontainer">

<div id="header"><div class="innertube">
<h1>&nbsp;</h1>
</div></div>

<div id="main-nav">
<ul id="solidblockmenu" >
<li><a href="index.html">Home</a></li>
<li><a href="#">About B.E.R.T. </a></li>
<li><a href="#">News</a></li>
<li><a href="#">Training &amp; Events </a></li>
</ul>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><p><span class="cap">W</span>elcome to the Regional Building Operations (RBO) Building Emergency Response Team (B.E.R.T.) website. This site will provide you with information concerning the B.E.R.T. Program.</p>
<p align="left"><span class="cap">T</span>he Building Emergency Response Team (B.E.R.T.) program helps train people to be better prepared to respond to emergency situations in their communities. When emergencies occur, B.E.R.T. members can give critical support to first responders, provide immediate assistance to victims, and organize spontaneous volunteers at a disaster site. B.E.R.T. members can also help with non-emergency projects that help improve the safety of RBO facilities.</p>
<img src="images/fireext1.gif" width="228" height="212" /></div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube">
<h2>Facility Specific Information:</h2>
<form id="form1" name="form1" method="post" action="">
<select name="select">
<option value="100losrobles.html">100 So. Los Robles</option>
<option value="ip.html">Independence Park</option>
<option value="csc1.html">California Service Center 1</option>
</select>
<input type="submit" name="Submit" value="GO" />
</form>
<hr />

<h2>Did you know?</h2>
<p> Treat minor burns with cool water or cool compress. If there is blistering, seek referral for evaluation of injury. Antiseptic sprays containing Benzocaine may provide temporary relief. For large burns, go to emergency facility.</p>
</div>

</div>

<div id="footer">
<div id="altnav">
<a href="#">Home </a> -
<a href="#">About B.E.R.T. </a> -
<a href="#">News</a> -
<a href="#">Training &amp; Events </a></div>
SCAL Regional Building Operations </div>

</div>
</body>
</html>


CSS:

body {
margin:0;
padding:0;
line-height: 1.5em;
background-image: url(images/bkgrd-black.jpg);
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
}

b {font-size: 110%;}
em {color: red;}

#maincontainer {
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#header {
background: #ffffff
url(images/header.jpg);
height: 90px; /*Height of top section*/
}

#header h1 {
margin: 0;
padding-top: 15px;
}

/* ########################## Start Navigation Menu ########################## */
#main-nav {
background:#FFFFFF;
height: 39px;
clear:both;
}

#solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: #9999CC url(images/blockdefault.gif) center center repeat-x;
}

#solidblockmenu li{
display: inline;
}

#solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

#solidblockmenu li a:visited{
color:#FFCC00;
}

#solidblockmenu li a:hover, .solidblockmenu li .current{
color:#FFCC00;
background: transparent url(images/blockactive.gif) center center repeat-x;
}

/* ################ End Navigation Menu ######################*/

#contentwrapper {
float: left;
width: 100%;
background:#FFFFFF;
}

#contentcolumn {
margin-right: 200px; /*Set right margin to RightColumnWidth*/
line-height: 18px;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#rightcolumn h2 {
padding-bottom: 15px;
font-weight:bold;
font-size:12px;
}

#rightcolumn p {
margin: 0;
padding: 0;
padding-bottom: 15px;
font-size:15px;
line-height:18px;
}


#footer {
clear: left;
width: 100%;
background:#990000;
color:#FFCC00;
text-align: center;
padding: 4px 0;
}

#footer a {
color:#FFFFFF;
text-decoration: none;
}

#footer a:hover {
color:#FFCC00;
}

#footer #altnav {
width: 350px;
float: right;
text-align: right;
}

.innertube {
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.cap {
font-size: 18px;
font-weight: bold;
}


Thank you, Rob