PDA

View Full Version : right content div dropping below left content in IE6



robcoles
Feb 16th, 2010, 12:41 AM
http://www.blueplanetbuildings.com.au/health.html
Right content div is dropping below left content div in IE6
Below is relevent css and html page example
Would appreciate help as tried lots of adjustments
Rob

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blue Planet Buildings HEALTH</title>
<script src="scripts/SpryMenuBar.js" type="text/javascript"></script>
<link href="scripts/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="scripts/blueplanet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="Javascript" src="scripts/blueplanet.js"></script>
</head>
<body onload="MM_preloadImages('images/logo.gif')">
<div id="wrapper">
<div id="top-nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="media.html">MEDIA</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="privacy.html">PRIVACY</a></li>
</ul>
</div>
<!-- end top-nav -->
<div id="header"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo','','images/logo.gif',1)"><img src="images/logo.gif" alt="Blue Planet Buildings logo" name="logo" width="170" height="140" border="0" id="logo" /></a>
<h1>Blue Planet Buildings</h1>
<h2>A revolutionary patented product - flat packed, solar powered and modular
building, quick and easy to erect anywhere, a real spark of ingenuity.</h2>
</div>
<!-- end header -->
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="product.html">PRODUCT<br />
FEATURES</a>
<ul>
<li><a href="key-features.html">KEY FEATURES</a></li>
<li><a href="design.html">DESIGN</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="market.html">MARKET <br />
SECTOR</a>
<ul>
<li><a href="industry.html">INDUSTRY</a>
<ul>
<li><a href="mining.html">MINING</a> </li>
<li><a href="construction.html">CONSTRUCTION</a></li>
<li><a href="rural.html">RURAL</a></li>
<li><a href="commercial.html">COMMERCIAL OFFICE</a></li>
</ul>
</li>
<li><a href="government.html">GOVERNMENT &amp; NGO </a>
<ul>
<li><a href="education.html">EDUCATION</a> </li>
<li><a href="defence.html">DEFENCE</a></li>
<li><a href="health.html">HEALTH</a></li>
<li><a href="emergency.html">EMERGENCY HOUSING</a></li>
<li><a href="custodial.html">CUSTODIAL</a></li>
<li><a href="remote.html">REMOTE HOUSING</a></li>
</ul>
</li>

</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="environment.html">ENVIRONMENTAL<br />
CREDENTIALS</a>
<!-- <ul>
<li><a href="solar.html">SOLAR</a></li> <li><a href="water.html">WATER</a></li>
</ul>-->
</li>
<li><a class="MenuBarItemSubmenu" href="about.html">ABOUT<br />
BLUE
PLANET </a>
<ul>
<li><a href="about.html">OUR VISION</a></li>
<li><a href="about.html">CERTIFICATION</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="design.html">DESIGN &amp;<br />
MANUFACTURE</a>
<!-- <ul>
<li><a href="engineering.html">ENGINEERING</a></li>

</ul> -->
</li>
<li><a class="MenuBarItemSubmenu" href="sales.html">SALES &amp;<br />
DELIVERY</a>
<ul>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</li>
</ul>
<!-- end ul -->
</div>
<!-- end nav -->
</div>
<!-- end wrapper -->
<div id="content-wrap">
<div id="content">
<div id="left-cont">

<div class="panel-2col">
<h1 class="main">HEALTH</h1>
<p>In today’s fast changing health facilties, Blue Planet Buildings can offer short or long term solutions.</p>
<p> Whether you’re looking for emergency hospitals in remote locations or permanent units - buildings can be customised to reflect the needs of the Health Industry’s requirements. </p>
<p>Be it offices or medical triage facilities, Blue Planet Buildings has the flexibility to provide a modular unit that can be added to without increasing cost.</p>
<p><img src="images/pics/beach.jpg" alt="health" /></p>
</div>
<!-- end panel-2col-->
<div class="panel">
<h2 class="grad-back1"><a href="market.html">MARKET SECTORS</a></h2>
</div>
<!-- end panel-->
<div class="panel">
<h2 class="grad-back1"><a href="product.html">FEATURES</a></h2>
</div>
<!-- end panel-->

</div><!-- end left-cont -->
<div id="right-cont">
<div class="panel">
<h2 class="grad-back1">OUR AIM</h2>

<p>To lower the overall carbon foot print. </p>
<p>To generate individual energy needs using in-built solar power. </p>
<p>To reduce transportation costs with the flat pack design (6 to a truck). </p>


</div>
<!-- end panel-->
<div class="panel">
<h2 class="grad-back1">WE ACHIEVE THIS BY </h2>

<p>Increasing size without increasing cost through adding to our modular units.<br />
<br />
Pre-installing power and plumbing within the panels to your specifications, i.e toilets, sinks and showers.</p>
</div>
<!-- end panel-->
</div>
<!-- end right-cont -->
<p class="clear-both"></p>
</div>
<!-- end content -->

<div id="footer" class="clear-both">All Content Copyright &copy; 2009 Blue Planet Buildings (Part of the Ottery Group Pty Ltd) | Web <a href="http://www.drawtheline.com.au" target="_blank">Draw the Line</a> &copy; 2009 </div>
<!-- end footer -->
</div>
<!-- end content-wrap -->

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


#content-wrap {
background-color: #EEEEEE;
height: 100%;
width: 100%;
background-image: url(../images/h-back.jpg);
background-repeat: no-repeat;
background-position: 0px 20px;
}
#content {
text-align: left;
height: 90%;
width: 830px;
margin-right: auto;
margin-left: auto;
padding-top: 28px;
padding-bottom: 40px;
padding-left: 18px;
top: 0px;
background-position: -20px 20px;
background-image: url(../images/h-back.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
}

#movie {
padding-bottom: 20px;
width: 520px;
height: 400px;
}




.main {
color: #FFFFFF;
padding-bottom: 18px;
}
#left-cont, #right-cont {
float: left;
display: inline;
}


#left-cont {
width: 546px;
}
#right-cont {
width: 273px;
}


#footer {
color: #000000;
text-align: center;
height: 15px;
width: 828px;
padding-top: 8px;
font-size: 90%;
background-color: #DFE1E3;
bottom: auto;
margin-right: auto;
margin-left: auto;
padding-bottom: 6px;
padding-right: 10px;
padding-left: 10px;
}
.panel-2col {
height: auto;
margin-bottom: 0px;
padding-bottom: 10px;
padding-top: 0px;
}
.panel-2col p, .panel-2col h2, .panel-2col ul {
padding-right: 18px;
}
.panel-2col img {
padding-top: 10px;
padding-bottom: 10px;
}
h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 130%;
letter-spacing: .1em;
padding-bottom: 18px;
padding-top: 1px;
margin-bottom: 2px;
line-height: 130%;
}
h2 {
font-size: 120%;
font-weight: bold;
color: #0F1341;
letter-spacing: .1em;
padding-top: 4px;
padding-bottom: 8px;
margin-bottom: 2px;
padding-left: 6px;
}
h3 {
font-size: 118%;
font-weight: bold;
color: #26479E;
padding-top: 2px;
padding-bottom: 4px;
line-height: 130%;
font-style: oblique;
}
h1 a, h2 a {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #AAAAAA;
color: #292F7B;
}
h3 a {
color: #26479E;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #AAAAAA;
}
strong {
color: #0F1341;
letter-spacing: .1em;
}
em {
font-weight: bold;
color: #26479E;
}
.panel {
float: left;
height: auto;
width: 257px;
margin-right: 16px;
margin-bottom: 14px;
background-color: #DFE1E3;
background-image: url(../images/panelbot.gif);
background-repeat: no-repeat;
background-position: right bottom;
padding-bottom: 35px;
}
.panel p {
width: auto;
padding-top: 8px;
padding-right: 10px;
padding-left: 8px;
}
.panel ul {
margin-left: 5px;
}
.panel img {
padding-top: 5px;
padding-bottom: 5px;
}
/* class */


.clear-right {
clear: right;
}
p {
line-height: 140%;
color: #0F1341;
padding-bottom: 3px;
padding-top: 3px;
}
#content-wrap ul {
line-height: 140%;
padding-left: 15px;
padding-top: 8px;
padding-bottom: 0px;
list-style-position: outside;
list-style-image: url(../images/button.png);
list-style-type: none;
color: #0F1341;
}
#content-wrap li {
padding-bottom: 6px;
}
#content-wrap li a:link, #content-wrap p a:link {
padding-bottom: 3px;
color: #0F1341;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F5F5F6;
}
a:visited {
color: #2E5AA3;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #3D93CF;
}
.clear-left {
clear: left;
}
.clear-both {
clear: both;
}

.grad-back {
background-image: url(../images/panelback.jpg);
background-repeat: repeat-y;
display: block;
padding-top: 8px;
padding-bottom: 8px;
background-position: left top;
}
.grad-back1 {
background-image: url(../images/panelbackgr.jpg);
background-repeat: repeat-y;
display: block;
padding-top: 8px;
padding-bottom: 8px;
background-position: left top;
}
.grad-back2 {
background-image: url(../images/panelback2.jpg);
background-repeat: repeat-y;
display: block;
padding-top: 7px;
padding-bottom: 5px;
background-position: right top;
}

VIPStephan
Feb 16th, 2010, 01:12 AM
From a short glimpse at it it looks like the image in the left column is two pixels wider than the space inside the paragraph allows. IE 6 wrongly expands elements whose content is larger than their own dimensions which makes the left column two pixels too wide and hence the right column drop below the left one because space doesn’t suffice at the right. Make the image two pixels narrower and it should work (of not then try three pixels).

robcoles
Feb 16th, 2010, 02:54 AM
Hi vipstephen
I took all those images out of paragraphs. But i don't think this is the problem because the home page has a flash movie 10 pixels narrower and still right content is dropping below.
http://www.blueplanetbuildings.com.au/index.html
Is it a IE bug I need to identify and fix?
I increased width of content div (is a fixed width) - no improvement
I could try reducing content panels, images inside the left and right content divs what do you think?
much appreciate your help
regards rob

VIPStephan
Feb 16th, 2010, 12:59 PM
OK, I looked at it in IE 6 and I don’t see the right column dropping down. :confused: Did you fix it yet?

robcoles
Feb 16th, 2010, 09:32 PM
Thankyou VIPstephen
I took your advice took images out of the paragraphs and also have hidden any overflow just in case. I don't have easy access to IE6 (I'm on Mac) which is a bit of a problem! How long will it be before we can ignore 6??!! Your advice saved the day as you found the needle in the haystack.
regards Rob