Problem with position absolute in ie7, div moves 10px to the right

19,000

Solution 1

Add position:relative to #center and then left:0px to #menu.

Absolutely positioned elements are positioned relative to their closest positioned parent. It's best to give the items you want to position a left/right and top/bottom coordinate to prevent weird results like the one you found.

Solution 2

You should specify both the top and left positions and add position:relative to the immediate parent:

#center {
    float: left;
    width: 300px;
    height: 500px;
    background-color: green;
    position:relative;
}
#menu { 
    width: 300px;
    height: 45px;
    background-color: pink;
    position: absolute;
    z-index: 1000;
    top: 100px;
    left: 0;
}

And a live example: http://jsfiddle.net/ambiguous/vRJMd/

The default left is auto and that more or less means that the browser can do whatever it thinks is sensible. Also, absolutely positioned elements are positioned with respect to the nearest ancestor with a position that is not static (which is probably <body> in your case).

Share:
19,000
drexsien
Author by

drexsien

Updated on June 04, 2022

Comments

  • drexsien
    drexsien about 2 years

    ive got a problem on my position absolute property on IE7. My div moves 10px to the right. Below is my code. IE8 and 9 works fine. id menu is the div Im referring.

    <!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" />
    <style type="text/css">
    body{margin: 0 0 0 0; padding: 0 0 0 0;}
    #holder{width: 400px; height: 500px; margin: 0 auto;}
    #left{float: left; width: 50px; height: 500px; background-color: red;}
    #center{float: left; width: 300px; height: 500px; background-color: green;}
    #right{float: left; width: 50px; height: 500px; background-color: red;}
    #header{width: 300px; height: 70px; background-color: yellow;}
    #gal-holder{width: 280px; height: 70px; margin: 0 auto;}
    #gallery{width: 280px; height: 410px; background-color: orange;}
    #button{width: 400px; height: 45px; background-color: red; margin: 0 auto;}
    #menu{width: 300px; height: 45px; background-color: pink; position: absolute; z-index: 1000; top: 100px;}
    #content{width: 380px; height: 200px; margin: 0 auto; background-color: blue; padding: 10px; color: #fff;}
    #clear{height: 10px;}
    </style>
    </head>
    <body>
    <div id="holder">
        <div id="left"></div>
        <div id="center">
            <div id="header"></div>
            <div id="menu"></div>
            <div id="gal-holder">
                <div id="clear"></div>
                <div id="gallery"></div>
                <div id="clear"></div>
            </div>
        </div>
        <div id="right"></div>
    </div>
    <div id="button"></div>
    <div id="content">Sample text</div>
    </body>
    </html>
    
  • drexsien
    drexsien over 13 years
    @Galen..thank you very much galen. Now i can move on. Sadly i cant vote your answer coz i still have 11 reputation. Thanks again.
  • drexsien
    drexsien over 13 years
    .thanks, both you galen have solved my problem. My apologizes i cant vote of your answer coz i still have 11 reputation. Thank again.
  • drexsien
    drexsien over 13 years
    @ mu is too short...thanks, already done it and yours too. Thanks for your time.
  • drexsien
    drexsien over 13 years
    @mu is too short..ok so i can only choose one answer. Sorry for my ignorance. =)