Problema con la posición absoluta en ie7, div se mueve 10px hacia la derecha

He tenido un problema con la propiedad absoluta de mi posición en IE7. Mi div se mueve 10px a la derecha. A continuación está mi código. IE8 y 9 funciona bien. id menú es el div Im referente.Problema con la posición absoluta en ie7, div se mueve 10px hacia la derecha

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

Fuente

2011-02-24 andsien

Whichg div? Difícil de decir :) – Kyle

el que tiene un menú de identificación .. – andsien

Añadir position:relative a #center y luego left:0px a #menu.

Los elementos posicionados de forma absoluta se posicionan con relación a su elemento primario más cercano. Lo mejor es darle a los elementos que desea colocar las coordenadas izquierda/derecha y arriba/abajo para evitar resultados extraños como el que encontró.

Fuente

2011-02-24 06:25:11 Galen

@ Galen..gracias mucho galen. Ahora puedo seguir. Tristemente no puedo votar tu respuesta porque todavía tengo 11 reputación. Gracias de nuevo. – andsien

@mu es demasiado corto ... gracias, ya lo hice y el tuyo también. Gracias por tu tiempo. – andsien

@mu es demasiado corto ... así que solo puedo elegir una respuesta. Perdón por mi ignorancia =) – andsien

Debe especificar tanto la parte superior y posiciones a la izquierda y añadir position:relative a la matriz inmediata:

#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; 
}

Y un ejemplo vivo: http://jsfiddle.net/ambiguous/vRJMd/

El valor predeterminado left es auto y eso significa más o menos que el navegador puede hacer lo que crea que es sensato. Además, los elementos absolutamente posicionados se posicionan con respecto al antecesor más cercano con una posición que no es static (que probablemente sea <body> en su caso).

Fuente

2011-02-24 06:31:58

. Gracias, ambos galen han resuelto mi problema. Mi disculpa no puedo votar su respuesta porque todavía tengo 11 reputación. Gracias de nuevo. – andsien

Problema con la posición absoluta en ie7, div se mueve 10px hacia la derecha

Respuesta

Cuestiones relacionadas