...

View Full Version : IE6 DIV overlap problem



takuhii
07-11-2008, 04:10 PM
I am having an issue with IE6, I have TWO divs placed next to each other, nothing fancy, just straight DIVS. These in turn are inside a DIV.

We'll call DIV1 left and DIV2 main... For some reason main wants to sit UNDERNEATH left. I cannot get main to move away from left, and it is driving me crazy, I just want them to sit next to each other.

Has anyone experienced this in IE6 before. UNFORTUNATELY I can't post the code, as I work for quite a large company, and this would be seen as leaking information.... :(

I've tried overflow: hidden and floating the divs and nothing works...

abduraooft
07-11-2008, 04:23 PM
Has anyone experienced this in IE6 before. UNFORTUNATELY I can't post the code, as I work for quite a large company, and this would be seen as leaking information....
No way to say something without seeing some code or a link, though have a look at http://bonrouge.com/2c-hf-fixed.php to see floated div in action.

jcdevelopment
07-11-2008, 04:23 PM
can you post some code that are related to the divs, and the html?


**EDIT: oops too slow, abduraooft beat me!

takuhii
07-15-2008, 12:41 PM
Here is the CSS



@charset "utf-8";
/* CSS Document */
#staticContent {
width:625px;
padding-right:15px;
float:right;
font-size:1.2em;
}

#staticContentMain ul.bullets {
margin:0 0 15px 20px;
list-style-type:disc;
}
#staticContentMain ol.bullets {
margin:0 0 15px 20px;
list-style-type:decimal;
}
#staticContentMain .bullets li {
margin:0.2em 0;
}
#staticContentMain ul.circles {
margin:0 0 15px 20px;
list-style-type: circle;
}
#staticContentMain .circles li {
margin:0.2em 0;
}

#staticContentMain ul.cslanding {
width: 625px;
margin: 0 0 15px 0;
display: block;
clear: both;
overflow: auto;
}

#staticContentMain .cslanding li {
display: block;
width: 195px;
background: url('/images/cs_listicon.gif') no-repeat left 30%;
padding-left: 10px;
height: 1.8em;
float: left;
}


#staticContentMain ul.arrows {
width: 625px;
margin: 0 0 15px 0;
display: block;
clear: both;
overflow: auto;
}

#staticContentMain .arrows li {
display: block;
width: 300px;
background: url('/images/cs_listicon.gif') no-repeat left 30%;
padding-left: 10px;
height: 1.8em;
float: left;
}


#staticContentMain h1 {
color: #09c;
font-size: 2.2em;
line-height: 2.2em;
padding: 0 0 5px 0 !important;
font-weight: bold;
}


#staticContentMain h2 {
font-size: 1.4em;
border-top: 2px solid #CCC;
line-height: 1.4em;
padding-top: 15px;
padding-bottom: 10px;
background-color: none;
}

#staticContentMain h2#subheader {
font-size: 1.4em;
border-top: 0 none white;
line-height: 1.1em;
padding-top: 5px;
padding-bottom: 10px;
}


.static #staticContentMain h4 {
color: #09c;
font-size: 1.1em;
font-weight: bold;
border-top: 0 none white;
line-height: 1.1em;
padding: 0 0 0 0;
}

.static #staticContentMain h4#linebreak {
color: #09c;
font-size: 1.1em;
font-weight: bold;
border-top: 2px solid #CCC;
line-height: 1.2em;
padding-top: 10px;
padding-bottom: 10px;
}


#staticContentMain table {
border: 1px solid #333;
padding: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
margin: 0 0 0 0;
border-collapse: collapse;
}

#staticContentMain td {
padding: 6px;
border: 1px solid #333;
background-color: #EFEFEF;
text-align: center;
}

#staticContentMain th {
padding: 6px;
background-color: #09c;
font-weight: bold;
border: 1px solid #333;
color: #fff;
text-align: center;
}




#staticContentMain #tvbg td {
padding: 0px;
border: 0px solid #333;
background-color: #EFEFEF;
}



#staticContentMain #tvbg th {
padding: 0px;
background-color: #09c;
border: 0px solid #333;
}





#staticContentMain td.tablesmall {
font-size: 0.8em;
text-align: left;
}


#staticContentMain td.left {
padding: 6px;
border: 1px solid #333;
background-color: #EFEFEF;
text-align: left;
}

#staticContentMain th.left {
padding: 6px;
background-color: #09c;
font-weight: bold;
border: 1px solid #333;
color: #fff;
text-align: left;
}

#staticContentMain th.red {
padding: 6px;
background-color: #C51010;
font-weight: bold;
border: 1px solid #333;
color: #fff;
text-align: left;
}

#staticContentMain table.nostyle {
padding: 0px;
border: 0px solid #000;
background-color: white;
}

#staticContentMain td.nostyle {
padding: 0px;
border: 0px solid #000;
background-color: white;
text-align: center;
font-size: 0.7em;
color: white;
}

#staticContentMain table.nostyleemail {
padding: 0px;
border: 0px solid #000;
background-color: white;
}

#staticContentMain td.nostyleemail {
padding: 0px;
border: 0px solid #000;
background-color: white;
text-align: left;
font-size: 0.7em;
color: #333;
}

#staticContentMain td.grey {
padding: 4px;
border: 0px solid #000;
border-bottom: 1px solid #666;
border-top: 1px solid #666;
background-color: #EFEFEF;
text-align: left;
}

#staticContentMain td.white {
padding: 4px;
border: 0px solid #000;
border-bottom: 1px solid #666;
border-top: 1px solid #666;
background-color: #FFF;
text-align: left;
}



#staticContentMain caption {
padding: 6px;
background-color: #09c;
text-align: center;
font-weight: bold;
font-size: 1.2em;
border-bottom: none;
border: 1px solid #333;
color: #fff;
}

#staticContentMain caption.red {
padding: 6px;
background-color: #C51010;
text-align: center;
font-weight: bold;
font-size: 1.2em;
border-bottom: none;
border: 1px solid #333;
color: #fff;
}

#staticContentMain caption#small {
padding: 6px;
background-color: #09c;
text-align: center;
font-weight: bold;
font-size: 1.1em;
border-bottom: none;
border: 1px solid #333;
color: #fff;
}

#staticContentMain #csbreadcrumb {
color: #666;
font-size: 1.1em;
padding: 0px 0 10px 0;
}

#staticContentMain #csbreadcrumb a {
color: #666;
padding: 0px 0 10px 0;
}

#staticContentMain #csbreadcrumb a:hover {
color: #09c;
}

#staticContentMain p {
color: #333;
font-size: 1.1em;
font-weight: normal;
}

#staticContentMain #smallprint {
color: #333;
font-size: 0.8em;
font-weight: normal;
}

#staticContentMain #smallprintwhite {
color: white;
font-size: 0.8em;
font-weight: normal;
}

#staticContentMain #h2style {
font-size: 1.4em;
color: #09C;
}

#staticContentMain div#smallitems {
margin-right: 10px;
float: left;
width: 290px;
}

#staticContentMain div#biggeritems {
width: 290px;
float: right;
margin-left: 10px;
}

#staticContentMain div#contact {
width: 500px;
margin-left: 10px;
text-align: left;
border: 1px solid #333;
background-color: #EFEFEF;
padding: 6px;
margin: 0px;
}

#staticContentMain div#aboutus {
width: 250px;
margin: 0 0 20px 20px;
margin-left: 20px;
float: right;
text-align: left;
border: 1px solid #333;
background-color: #EFEFEF;
padding: 6px;
}


/*******************************/
/* START: My CSS */
/*******************************/
#staticContentMain #catLaunchHead {
float: left;
background: url(/images/launchpromo_head.gif) no-repeat top left;
width: 626px;
height: 231px;
margin: 0;
padding: 0;
}

#staticContentMain #catLaunchHead p {
padding-left: 22px;
padding-top: 170px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
width: 430px;
}

#staticContentMain #catLaunchHead a {
color: #FFF;
font-weight: bold;
}

#staticContentMain #catLaunchwowHead {
float: left;
background: url(/images/launchpromo_wowhead.gif) no-repeat top left;
text-indent: -9999px;
width: 626px;
height: 86px;
margin: 0;
padding: 0;
}

#staticContentMain #catLaunchwowOffers {
float: left;
margin: 0;
width: 626px;
padding: 0px 22px 0px 21px;
background: url(/images/launchpromo_wowbg.gif) repeat-y;
}

#staticContentMain #catLaunchwowOffers ul {
margin: 0;
padding: 0;
list-style: none;
}

#staticContentMain #catLaunchwowOffers li {
margin: 0;
padding: 0;
display: inline;
}

#staticContentMain #catLaunchwowOffers a {
float: left;
margin: 0;
padding: 0;
}

#staticContentMain #catLaunchwowOffers a span {
float: left;
display: block;
margin: 0;
padding: 0;
text-indent: -9999px;
}

/* IE5-Mac fix \*/
#staticContentMain #catLaunchwowOffers a span { float: none; }
/* End IE5-Mac Fix */

#staticContentMain #catLaunchwowFooter {
display: block;
float: left;
background: url(/images/launchpromo_wowfoot.gif) no-repeat;
width: 626px;
height: 34px;
margin: 0;
padding: 0;
}

#staticContentMain #moreChoiceHead {
display: block;
float: left;
background: url(/images/launchpromo_morechoicehead.gif) no-repeat top left;
text-indent: -9999px;
width: 626px;
height: 86px;
margin: 0;
padding: 0;
}

#staticContentMain #moreChoice {
margin: 0;
padding: 0px 22px 0px 21px;
float: left;
width: 626px;
background: url(/images/launchpromo_morechoicebg.gif) repeat-y;
}

#staticContentMain #moreChoice ul {
margin: 0;
padding: 0;
list-style: none;
}

#staticContentMain #moreChoice li {
margin: 0;
padding: 0;
display: inline;
}

#staticContentMain #moreChoice a {
float: left;
margin: 0;
padding: 0;
}

#staticContentMain #moreChoice a span {
float: left;
display: block;
margin: 0;
padding: 0;
text-indent: -9999px;
}

#staticContentMain #moreChoiceFooter {
display: block;
float: left;
background: url(/images/launchpromo_morechoicefoot.gif) no-repeat;
width: 626px;
height: 34px;
margin: 0;
padding: 0;
}

#staticContentMain #collectionsHead {
display: block;
float: left;
background: url(/images/launchpromo_collectionshead.gif) no-repeat top left;
text-indent: -9999px;
width: 626px;
height: 55px;
margin: 0;
padding: 0;
}

#staticContentMain #collections {
float: left;
margin: 0;
padding: 0 34px 0 34px;
width: 626px;
background: url(/images/launchpromo_collectionsbg.gif) repeat-y;
font-family: Arial, Helvetica, sans-serif;
}

#staticContentMain #collections ul {
margin: 0;
padding: 0;
list-style: none;
}

#staticContentMain #collections li {
margin: 0;
padding: 0;
}

#staticContentMain #collections h3 {
border: none;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: bold;
color: #F00;
}

#staticContentMain #collections p {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: bold;
color: #09C;
width: 557px;
}

#staticContentMain #collections img {
margin: 0;
padding: 0;
border: none;
margin-top: 6px;
margin-bottom: 10px;
}

#staticContentMain #collections img.last {
margin: 0;
padding: 0;
border: none;
margin-top: 6px;
}

#staticContentMain #collections a {
margin: 0;
padding: 0;
}

#staticContentMain #collectionsFooter {
display: block;
float: left;
background: url(/images/launchpromo_collectionsfoot.gif) no-repeat;
width: 626px;
height: 36px;
margin: 0;
padding: 0;
}

/*******************************/
/* END: My CSS */
/*******************************/


and here is the HTML;


<!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>Untitled Document</title>
</head>

<body>
<div id="staticContentMain">
<div id="LaunchHead">
<p>Pick up your bargains today <a href="#">Enter competition now.</a></p>
</div>
<div id="LaunchwowHead"><a href="#">See all our new deals</a></div>
<div id="LaunchwowOffers">
<ul>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer1.gif) no-repeat top left; width: 582px; height: 134px;"><span>From Only &#163;xxx.xx</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer1_seeall.gif) no-repeat top left; width: 582px; height: 20px;"><span>See all xxxx</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer2.gif) no-repeat top left; width: 293px; height: 133px;"><span>HALF PRICE - Only &#163;xxx.xx</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer3.gif) no-repeat top left; width: 289px; height: 133px;"><span>Only &#163;xxx.xx</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer2_seeall.gif) no-repeat top left; width: 293px; height: 17px;"><span>See all xxx</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_wowoffer3_seeall.gif) no-repeat top left; width: 289px; height: 17px;"><span>See all xxx</span></a></li>
</ul>
</div>
<div id="LaunchwowFooter"></div>
<div id="moreChoiceHead">Even more choice</div>
<div id="moreChoice">
<ul>
<li><a href="#" style="background: url(/images/Launchpromo_morechoice1.gif) no-repeat top left; width: 293px; height: 106px;"><span>products</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_morechoice2.gif) no-repeat top left; width: 289px; height: 106px;"><span>products</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_morechoice3.gif) no-repeat top left; width: 293px; height: 112px;"><span>products online</span></a></li>
<li><a href="#" style="background: url(/images/Launchpromo_morechoice4.gif) no-repeat top left; width: 289px; height: 112px;"><span>products online</span></a></li>
</ul>
</div>
<div id="moreChoiceFooter"></div>
<div id="collectionsHead"></div>
<div id="collections">
<ul>
<li>
<h3>New</h3>
</li>
<li>
<p>High quality</p>
</li>
<li><a href="#"><img src="/images/Launchpromo_premColl.gif" alt="" width="557" height="107" /></a></li>
</ul>
<ul>
<li>
<h3>Make a Difference</h3>
</li>
<li>
<p>It’s easy for all of us to make a difference</p>
</li>
<li><a href="#"><img src="/images/Launchpromo_ecoColl.gif" alt="" width="557" height="107" /></a></li>
</ul>
<ul>
<li>
<h3>Computers</h3>
</li>
<li>
<p>We have a product to suit your needs and budget</p>
</li>
<li><a href="#"><img src="/images/Launchpromo_compColl.gif" alt="" width="557" height="107" /></a></li>
</ul>
<ul>
<li>
<h3>Value</h3>
</li>
<li>
<p>essential items for less.</p>
</li>
<li><a href="#"><img src="/images/Launchpromo_valColl.gif" alt="" width="557" height="107" class="last" /></a></li>
</ul>
</div>
<div id="collectionsFooter"></div>
</div>
</body>
</html>

abduraooft
07-15-2008, 01:10 PM
Look at the attached images, this is what I see in IE and is the same as that FF

It'd be more useful if you post a link to your page, as we don't have those images

takuhii
07-15-2008, 04:26 PM
I'm afraid I can't give you a link to the page as it is on a closed server for now.

The images included are inconsiquential, as I am adamant this is a CSS fault, unfortunately I can't see for looking, if you put the CSS into the HTML you should see what I see, but I am guessing the code for the LHS I am having problems with is also missing, this seems to be getting very over-complicated becuase I can't provide you with the code.

This is the problem I am encountering, unfortunately I am the only one who know CSS where I work, and there is NO ONE to ask for help if I get stuck...

It doesn't help that some cowboy outift coded up the BASIC CSS for our site, which prevents us, 9 times out of 10, from elaborating on it... :(

thanks for your help guys, but I'll figure something out...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum