De donde sale este margen?

falonpla · #1 (**permalink**) 05/02/2007, 23:52

Tengo el siguiente código:

XHTML:

Código PHP:

      <body> 
        <div id="envoltorio"> 
            <div id="cabecera"> 
            </div> 
            <div id="botonera"> 
            <div id="fot"> 
            <img src="fotino.jpg" width="189" height="56" alt="blablablablabla" /> 
            </div> 
            <div id="flash"> 
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="direccionweb#version=6,0,29,0" width="566" height="56"> 
  <param name="movie" value="menu.swf" /> 
  <param name="quality" value="high" /> 
  <embed src="menu.swf" quality="high" pluginspage="direccionweb" type="application/x-shockwave-flash" width="566" height="56"></embed> 
</object> 
            </div> 
            </div> 
            <div id="contenedor"> 
                <div id=izda> 
                </div> 
                <div id=decha> 
                </div> 
                <div id=centro> 
                </div> 
            </div> 
            <div id="pie"> 
                blablablabla 
            </div> 
        </div> 
    </body> 
</html>

CSS

Código PHP:

  body { 
    text-align:center; 
    margin:0px; 
    background-image: url(Tornp2.png); 
} 
img { 
    border:none; 
} 
#envoltorio { 
    width:756px;  
    margin:0px auto;  
    border-left:5px solid #000000;  
    border-right:5px solid #000000; 
} 
#cabecera {  
    width:756px;  
    height:157px;  
    background-image:url(fondocab.png) 
} 
#botonera { 
    width: 756px; 
    height: 56px; 
} 
#fot { 
    width: 189px; 
    height: 56px; 
    float: left; 
} 
#flash { 
    width: 566px; 
    height: 56px; 
    float: right; 
} 
#contenedor { 
    width: 756px; 
    height: 500px; 
} 
#izda { 
    width:189px;  
    height:500px;  
    float:left;  
    background-color:#CCCCCC 
} 
#decha { 
    width:180px;  
    height:500px;  
    float:right;  
    background-color:#CCCCCC 
} 
#centro { 
    margin-left:189px;  
    margin-right:180px;  
    height:500px 
} 
#pie { 
    clear:both;  
    text-align:center 
}

En Firefox se visualiza la página sin problemas, pero en el explorer me aparece un margen entre la capa botonera y la capa contenedor. He probado también quitandole el float right a la capa flash y poniendole un margen del mismo tamaño que la capa fot, lo cual tambien me funciona en firefox, pero en explorer me salta el menu flash a la linea siguiente, en vez de quedarse en linea con la foto que va a su izquierda. Alguien puede decirme que estoy haciendo mal? Gracias.

Ruben_JD · #2 (**permalink**) 06/02/2007, 15:09

IE tiende a colocar su propios margenes. Te podria servir este cometario para que solo IE lo ejecute:
<div id="fot">
<img src="fotino.jpg" width="189" height="56" alt="blablablablabla" />
</div>
también revisa este: http://www.webmasterlibre.com/2006/0...c2%a1y-valido/

falonpla · #3 (**permalink**) 06/02/2007, 16:35

Gracias por la respuesta Rubén. He leido el post del enlace que me has puesto, y he agregado tu código, pero sigue apareciendo el dichoso margen. Hay alguna otra forma de solucionar esto?

Mikmoro · #4 (**permalink**) 06/02/2007, 17:09

No sé si tu problema es con IE6, pero la cosa es que con ese códifo en IE6 no va a funcionar porque con

<!--[if lt IE 6]> dices "si es menor que IE6" (lt = <).

Prueba a ver con:

<!--[if IE]>

Ya nos contarás.

Mikel.

falonpla · #5 (**permalink**) 06/02/2007, 23:40

Ahora sí, gracias Mikel. Cada vez le tengo más tirria al explorer. Otra pregunta, que sería más correcto?, poner ese codigo en el head de mi documento, o enlazar a otra hoja de estilos css específica para el IE.

Por cierto, como se hace para agregar puntos de reputación a otros usuarios del foro?

Thanks !!

Mikmoro · #6 (**permalink**) 07/02/2007, 04:08

No estoy seguro de qué se considera más correcto, pero sí te diré lo que me parece más práctico: si tienes muy poco código que cambiar para IE (una o dos clases), yo lo pondría en la cabecera; si tienes bastante más código, lo pondría en una hoja de estilo espcial externa. Más que nada por limpieza visual del código.

También hay algo fundamental: ¿esa variación para explorer será para esa página o para todo el sitio? Porque si es para todo un sitio, sin duda te merece la pena hacerlo en una hoja externa y cargarla en cada html, pero si es sólo para esa, se lo pones a ella y listo. Como digo es mi opinión.

Igual alguien nos dice qué se considera más correcto.

Mikel.

Ruben_JD · #7 (**permalink**) 07/02/2007, 13:54

Hola falonpla, el codigo lo puse ahi solo para que veas donde estaba el error (llamemosle asi al IE) más acerca de los comentarios condicionales, hacks:http://www.quirksmode.org/css/contents.html, tambien puedes colocar el codigo en un style interno entre los head si es pequeño y si es el unico cambio, igual al ejemplo o en otro css que es lo mejor si tu sitio no se ve correctamente en IE, puedes llamar a este nuevo codigo ccs_ie.css o algo asi.
Un pequeño consejo, para que des cuenta de cual es el error en este caso cuanto espacio de margen hay, coloca un background-color: lime, fucsia ...etc a los div, colores que te permirtan ver donde esta el error y cual puede ser la solucion.
Espero que sea util.

y con respecto a la reputacion en la parte superior derecha de cada mensaje hay un icono de una balanza ala derecha del numero de mensaje, ahi puedes apoyar a los integrantes del foro, en los cuales tu podras confiar en sus respuestas.
Gracias.