Home/ Questions/Q 6945047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:23:08+00:00

Having difficulties with ie7 bug involving absolute positioning. Have tried a few solutions without

  • 0

Having difficulties with ie7 bug involving absolute positioning. Have tried a few solutions without luck. All the divs are supposed to be centred but as you can see in ie7, the white box divs float off to the right!

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><html>
     <head>
      <title></title>
      <style>
    html, body { text-align: center; width: 100%; background-color: #3E5269; }
    .wrapper-gallery { position: relative; margin-left: auto; margin-right: auto; width: 1600px; overflow: hidden; top: 0px; left: 0px; min-height:1000px; height:auto !important; height:1000px; }
    .wrapper-gallery img { width: 1600px; height: 1000px; }
    .wrapper-gradient { background-image: url(images/bgd_gradient.png); background-repeat: repeat-x; background-position: left bottom; max-width: 1600px; width: 1600px; min-width: 1600px; height: 250px; position: absolute; height:250px; position:absolute; bottom:0px; left:0px; z-index: 999; }
    .wrapper { position: absolute; top: 0; width: 100%; /*visibility: hidden;*/zoom:1;}
    #pagewidth { width: 960px; margin: 0 auto; text-align: left; position: relative; zoom:1;}
    #header { width: 100%; height: 138px; position: relative;zoom:1; }

    .wrapper, #pagewidth { border: 1px solid #fff;}
    .wrapper-gradient, .wrapper-gallery { border: 1px solid #000;}
      </style>
     </head>
     <body>
       <div class="wrapper-gallery">wrapper-gallery
        <div class="wrapper-gradient">wrapper-gradient</div>
       </div>
    <!-- end .wrapper-gallery -->
       <div class="wrapper">wrapper
        <div id="pagewidth">pagewidth
         <div id="header">header
         </div>
        </div>
       </div>
      </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not 100% sure what you’re going for layout-wise, but here is my shot– I basically just moved the “wrapper” div above the “wrapper-gallery” div in the HTML, and then tweaked the z-indexes a bit. Also removed the superfluous opening tag you had in there. Hope this helps.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style>
        html, body
        {
            text-align: center;
            width: 100%;
            background-color: #3E5269;
        }
        .wrapper-gallery
        {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 1600px;
            overflow: hidden;
            top: 0px;
            left: 0px;
            min-height:1000px;
            height:auto !important;
            height:1000px;
            z-index: 0;
        }
        .wrapper-gallery img
        {
            width: 1600px;
            height: 1000px;
        }
        .wrapper-gradient
        {
            background-image: url(images/bgd_gradient.png);
            background-repeat: repeat-x;
            background-position: left bottom;
            max-width: 1600px;
            width: 1600px;
            min-width: 1600px;
            height: 250px;
            position: absolute;
            bottom:0px;
            left:0px;
            z-index: 1;
        }
        .wrapper
        {
            position: absolute;
            top: 0;
            width: 100%;
            /*visibility: hidden;*/
            zoom:1;
            z-index: 2;
        }
        #pagewidth
        {
            width: 960px;
            margin: 0 auto;
            text-align: left;
            position: relative;
            zoom:1;
        }
        #header
        {
            width: 100%;
            height: 138px;
            position: relative;
            zoom:1;
        }

        .wrapper, #pagewidth { border: 1px solid #fff;}
        .wrapper-gradient, .wrapper-gallery { border: 1px solid #000;}
    </style>
    </head>
    <body>
        <div class="wrapper">wrapper
            <div id="pagewidth">pagewidth
                 <div id="header">header
                 </div>
            </div>
        </div>
        <div class="wrapper-gallery">wrapper-gallery
            <div class="wrapper-gradient">wrapper-gradient</div>
        </div>
        <!-- end .wrapper-gallery -->
    </body>
    </html>
    • 0