problema con el div que no mantiene su posicion

esaenz22 · #1 (**permalink**) 27/01/2010, 16:44

buenas de nuevo. tengo un problema. he colocado un div principal y dentro del div principal coloque divs de 2 columnas. un div para la izquierda y un div para la derecha. dentro del div izquierda coloque otro div que se llama buscador. en el div buscador coloque una imagen.

pero cuando al div buscador que he colocado la imagen, le puse margin-top y margin-left de 15px y 5px, en ie7 se muestra bien pero en firefox, el div no mantiene su posicion, es decir, el div izquierda que contiene el div buscador se desplaza hacia abajo.

aqui dejo los resultados.

en firefox.

en ie7.

este es mi css.

Código CSS:

Ver original#cuerpo{
    width:960px;
    height:328px;
    margin:0px auto;
}
 
#cuerpo_izquierda {
    width:200px;
    height:327px;
    float:left;
}
/*-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */*/
#cuerpo_derecha {
    width:754px;
    height:327px;
    float:right;
}
 
#buscador{
    width:200px;
    height:236px;
    background:url(../imagenes/pedazo1.jpg) no-repeat;  
}
 
#titulo_buscador{
    margin-top:15px;
    margin-left:5px;
}
 
.espacio4{
    width:200px;
    height:13px;
}

y este es mi codigo html.

Código HTML:

Ver original<div id="cuerpo">
    <div id="cuerpo_izquierda">
      <div id="buscador">
        <div id="titulo_buscador"><img src="imagenes/titulo_buscador.jpg" border="0"/></div>
        <br />
        <div id="grupos_electrogenos">Grupos electrogenos</div>
      </div>
      <div class="espacio4"></div>
      <div id="niveles_energia"> <img src="imagenes/pedazo2.jpg" border="0" /> </div>
    </div>
    <div id="cuerpo_derecha">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','754','height','327','src','swf/banner2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','swf/banner2' ); //end AC code
      </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="754" height="327">
        <param name="movie" value="swf/banner2.swf" />
        <param name="quality" value="high" />
        <embed src="swf/banner2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="754" height="327"></embed>
      </object>
      </noscript>
    </div>
  </div>

aque se debe que en ie7 se muestra bien, miestras que firefox se muestra lo contrario ?.

es por el tamaño de las imagenes ?.

que solucion puedo dar. hacer un hack css ?.

la verdad no domino mucho el tema de los hacks css.

me pueden ayudar en ello ?.

cristian_cena · #2 (**permalink**) 27/01/2010, 17:04

Te dejo una serie de links que apuntan a tu problema:

Cómo arreglar el modelo de caja CSS de Internet Explorer 5
Comentarios condicionales, filtros y hacks
CSS Differences in Internet Explorer 6, 7 and 8
hasLayout
Comentarios condicionales para IE
IE5-IE6 estandar con IE7.js

Saludos!

esaenz22 · #3 (**permalink**) 27/01/2010, 20:20

gracias por los enlaces cristian_cena. revisando el 2do enlace sobre Comentarios condicionales, filtros y hacks

estuve revisando las condicionales, coloque la condicion.

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if (gte IE 5) & (lt IE 8)]>
<link rel="stylesheet" type="text/css" href="css/estilos_teirsac.css">
<![endif]-->
 
<link rel="stylesheet" type="text/css" href="css/estilos_teirsac.css">
</head>
<body>
</body>
</html>

alli me esta diciendo que Este navegador es Internet Explorer 5 o cualquier versión más reciente que sea anterior a Internet .

mi consulta es. al momento de colocar la condicional con el css, se puede colocar despues de la condicion la etiqueta css ?.

es correcto asi ?.

Edito: otra consulta. consegui un menu hack css del blogger de unijimpe, quiero mostrar como este menu:

he modificado el menu hack css. modifique el div principal de la etiqueta <ul>.

Código CSS:

Ver originalul#navmenu-h {
    margin: 0;
    border: 0 none;
    padding: 22px 16px;
    width: 580px; /*For KHTML*/
    list-style: none;
    height: 15px;
    z-index:5;
}

modifique el padding como esta en la imagen que he mostrado. me muestra bien en ie7, ele firefox, pero en el ie6 no. es como si todo el div del menu se desplazara hacia abajo.

he colocado esta condicion del enlace que coloco usted cristian_cena.

Código CSS:

Ver originalul#navmenu-h {
    margin: 0;
    border: 0 none;
    [if IE 5.0] padding: 22px 16px;
    width: 580px; /*For KHTML*/
    list-style: none;
    height: 15px;
    z-index:5;
}

me salio bien en ie6, ie7 y en el firefox, pero parece que no ha reconocido el padding del menu <ul> como la imagen que he mostrado.

a que se debe que no reconoce el padding ?

saludos.

cristian_cena · #4 (**permalink**) 28/01/2010, 11:48

cito="
mi consulta es. al momento de colocar la condicional con el css, se puede colocar despues de la condicion la etiqueta css ?. es correcto asi ?."

Copia y pega el siguiente codigo y guardalo como "cualquier_nombre.html" verás que a través del uso de comentarios condicionales se crea código solo para IE.

Código HTML:

<!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" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
p{
color:black; 
margin:100px;
}
</style>


<!--[if IE]>
<style type="text/css">
p{
color:red; 
margin:0;
}
</style>
<![endif]-->


</head>
<body>

<p>solo se verá rojo en Internet Explorer</p>



<!--[if IE]>
<a href="/">Este enlace solo se verá en ie</a>
<![endif]-->



</body>
</html>

Es mejor que utilizes comentarios condicionales a que uses hacks, pues de esta forma generas codigo exclusivo para ie y tus hojas de estilos estarán limpias.

Cito="...
he colocado esta condicion del enlace que coloco usted (usted?

) cristian_cena.

ul#navmenu-h {
margin: 0;
border: 0 none;
[if IE 5.0] padding: 22px 16px;
width: 580px; /*For KHTML*/
list-style: none;
height: 15px;
z-index:5;
}
... "

Pues, hazlo así:

ul#navmenu-h {
margin: 0;
border: 0 none;
padding: 22px 16px;
width: 580px;
list-style: none;
height: 15px;
z-index:5;
}

Y luego incorporas el cc:


Sugerencia: Diseña para firefrox, y luego utiliza los comentarios condicionales para igualar tu diseño en IE

Saludos!

esaenz22 · #5 (**permalink**) 28/01/2010, 15:39

gracias por responder cristian_cena. olvide especificar que el menu en ie6 me muestra de esta manera.

creo que eso se debe al ul#navmenu-h.

Código CSS:

Ver originalul#navmenu-h {
margin: 0;
border: 0 none;
padding: 22px 16px;
width: 580px;
list-style: none;
height: 15px;
z-index:5;
}

porque me muestra de esa manera ?.

la condicion:

Código CSS:

Ver original<!--[if IE]> /*si quieres puedes buscar por versión de IE, fíjate en el enlace que te pasé*/
ul#navmenu-h {
padding: /*los valores que tu quieras*/;
}
<![endif]-->

lo coloco debajo del id ul#navmenu-h ?

saludos.

cristian_cena · #6 (**permalink**) 28/01/2010, 16:11

Cito="lo colo debajo del id ul#navmenu-h ?"

Claro, mientras que por un lado creas los estilos para todos los navegadores, por otro vas creando los estilos específicos para IE. Fíjate en este enlace te lo explican uno a uno.

Crea estilos especificos para ie6:



Por último y para exterminar tus dudas, mira el código fuente de este ejemplo creado por el usuario Kseso?

Saludos!

esaenz22 · #7 (**permalink**) 28/01/2010, 19:47

Por último y para exterminar tus dudas, mira el código fuente de este ejemplo creado por el usuario Kseso?

ya no quiere que siga preguntando ?.

bueno. gracias de todos modos.

saludos.

cristian_cena · #8 (**permalink**) 28/01/2010, 20:40

Cita:

Iniciado por esaenz22

ya no quiere que siga preguntando ?

Use el termino "exterminar" por la calidad del ejemplo de Kseso?.
No tengo problema en ayudarte esaenz22. Si tus dudas persisten, ya sabes, para eso está el foro.
Espero te haya sido util mi aporte.

Saludos!

esaenz22 · #9 (**permalink**) 28/01/2010, 20:42

entiendo. lo malinterprete mal.

cualquier consulta, lo pondre en el foro.

saludos.