Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    Milton Keynes, UK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 DIV overlap problem

    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...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    can you post some code that are related to the divs, and the html?


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

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    Milton Keynes, UK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the CSS

    Code:
    @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;
    Code:
    <!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>
    Last edited by takuhii; 07-15-2008 at 11:46 AM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Attached Thumbnails Attached Thumbnails IE6 DIV overlap problem-cf.jpg   IE6 DIV overlap problem-cf2.jpg  
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jul 2005
    Location
    Milton Keynes, UK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •