3 Replies Latest reply on Mar 28, 2010 7:28 AM by webdzine09

    divs overlapping in IE 6 and 7, other browsers ok

    webdzine09 Level 1

      Ah, the age-old problem.

      My page renders ok in Firefox and other browsers, just not IE6 and 7. I have a flash slideshow placed in an absolute positioned div, but it seems to be in the correct place. The nav, header and special divs are piling up on the right side. I am a beginner and still grasping the floats and clear floats idea. Not sure if that is the issue. Any help would be appreciated. Thanks.

      http://www.pennyhillfurnishings.com/windowtreatments/windowtreatments.html

        • 1. Re: divs overlapping in IE 6 and 7, other browsers ok
          John Waller Adobe Community Professional & MVP

          Try changing the CSS

           

          #wrapperwt {
          width: 920px;
          border: 1px dotted #900;
          font-family: Georgia, "Times New Roman", Times, serif;
          margin: 10px auto 0px;
          background: #FFF url(../fabricrightside.jpg) repeat-y right;
          z-index: 10;
          height: 715px;
          position: relative;

          }

           

          #windowall {
          height: 510px;
          width: 529px;
          margin-top: 165px;
          margin-left: 230px;
          padding-top: 10px;
          padding-left: 2px;
          position: absolute;

          top: 0;

          left: 0;
          vertical-align: top;
          background: #FFF;
          z-index: 50;
          margin-right: 0px;
          }

           

          Since the entire position: absolute element is removed from the normal flow of the page, position: absolute needs coordinates (top, right, bottom, left - top and left/right are normally enough since the div expands to contain the content) to work as intended.

           

          Top and left are relative to the first parent container on the page which has a position other than the default of static - in this case div#wrapperwt since we've added position: relative to that rule.

           

          If there is no "position-other-than-static" rule in the CSS, then absolute positioning starts relative to the <body> of the document (top LHS of the browser window) which sometimes leads to unintentional layout results.

          • 2. Re: divs overlapping in IE 6 and 7, other browsers ok
            webdzine09 Level 1

            Thank you so much for explaining this John. I am off to make the corrections.

            • 3. Re: divs overlapping in IE 6 and 7, other browsers ok
              webdzine09 Level 1

              Worked like a charm, page renders in all browsers ok. Thank you again for the explanation, it was very helpful.