Foros del Web » Creando para Internet » CSS »

Problemas de colocacion IE8

 Estas en el tema de Problemas de colocacion IE8 en el foro de CSS en Foros del Web. Buenos días: Estoy teniendo un problema con CSS y además otro a mayores con IE8. El problema es que al cargar la página hay un ...
  #1 (permalink)  
Antiguo 16/09/2011, 04:15
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Pregunta Problemas de colocacion IE8
Buenos días:

Estoy teniendo un problema con CSS y además otro a mayores con IE8. El problema es que al cargar la página hay un div(el de la izquierda de todo que se descuadra):


Curiosamente, al darle a F5 en IE8 este problema se soluciona, pero se descuadra la tabla central:


llevo días con este problema y sigue dando la vara . A alguien se le ocurre alguna solución?

saludos y gracias!


EDIT: por cierto! en firefox, chrome y safari descuadra sólo el div de la izquierda. En opera lo pone todo bien
Última edición por jesusbg; 16/09/2011 a las 04:52 Razón: por cierto!
  #2 (permalink)  
Antiguo 16/09/2011, 06:52
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Problemas de colocacion IE8
Hola.

Está claro que es un error de maquetación xhtml/css. Mejor déjanos el código para echarle un vistazo y poder ayudarte.

Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 16/09/2011, 08:44
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Problemas de colocacion IE8
Bien:
el código de CSS sería(envio por partes que no cabe en 1 solo post):
Cita:
.textBox {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
border:1px solid #06704B;
}

#contenedor {
width:1000px;
text-align:center;
margin:auto;
overflow:hidden;
background:#BEEBDD;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}

#logo {
font-family:"Trebuchet MS";
margin-top:10px;
margin-left:8px;
margin-right:0px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:980px;
float: left;
background:#BEEBDD;
}
#contCategorias {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:200px;
background:#FFFFFF;
overflow:hidden;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}
#categoriasImg {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
width:180px;
background:#FFFFFF;
}
#categorias {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:180px;
background:#FFFFFF;
}
#categorias img {
margin-top:2px;
margin-left:0px;
margin-right:0px;
margin-bottom:2px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:85px;
height:85px;
border: 1px solid #000;
}

#central {
float:right;
margin-top:10px;
margin-left:0px;
margin-right:5px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:555px;
background:#FFFFFF;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}
#navegacionBar {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:10px;
padding-right:0px;
padding-bottom:0px;
width:510px;
border:1px solid #000;
text-align:left;
font-weight:bold;
color:#00A6D6;
background:#FFFFFF;
}

#navegacionDiv {
margin-top:0px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:520px;
overflow:hidden;
}

#navegacionDescsCat {
margin-top:10px;
margin-left:0px;
margin-right:8px;
margin-bottom:8px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
width:497px;
text-align:justify;
border:1px solid #000;
background:#FFFFFF

}
#navegacionDescsPrd {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
width:497px;
text-align:justify;
border:1px solid #000;
background:#FFFFFF
}
#navegacionDescsDet {
margin-top:10px;
margin-left:0px;
margin-right:8px;
margin-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
width:497px;
text-align:justify;
border:1px solid #000;
background:#FFFFFF
}
#navegacionCondPago {
margin-top:10px;
margin-left:0px;
margin-right:8px;
margin-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
width:497px;
text-align:justify;
border:1px solid #000;
background:#FFFFFF
}
#navegacionCarro {
margin-top:10px;
margin-left:0px;
margin-right:8px;
margin-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
width:497px;
text-align:center;
background:#FFFFFF
}
#navegacionElem {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:100px;
height:100px;
border:1px solid #000;
float:left;
}
#otros {
float:right;
margin-top:10px;
margin-left:0px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:200px;
background:#FFFFFF;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}

#otrosImg {
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
width:180px;
background:#FFFFFF;
}


#otrosElemento {
text-align:center;
margin-top:10px;
margin-left:25px;
margin-right:25px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:150px;
height:150px;
border: 1px solid #000000
}
#otrosElemento img {
text-align:center;
}


#navegacionDiv table {
font-family:arial;
font-size:12px;
table-layout:fixed;
border-collapse:collapse
}
#navegacionDiv th {
width:65px;
font-weight:bold;
border: 1px solid #000000
}
#navegacionDiv td {
width:65px;
border: 1px solid #000000
}

#navegacionCarro table {
font-family:arial;
font-size:12px;
table-layout:fixed;
border-collapse:collapse
}
#navegacionCarro th {
font-weight:bold;
border: 0px solid #000000;
text-align:right;
}
#navegacionCarro td {
border: 0px solid #000000;
text-align:left;
}

#navegacionDiv td.color {
cursor: pointer;
background-color: #87CEEB;
}
#navegacionDiv td.color2 {
cursor: pointer;
background-color: #DDA0DD;
}

#navegacionBar A:link {
text-align:left;
font-weight:bold;
text-decoration:none;
color:#00A6D6;
}
#navegacionBar A:visited {
text-align:left;
font-weight:bold;
text-decoration:none;
color:#00A6D6;
}
#navegacionBar A:hover {
text-align:left;
font-weight:bold;
text-decoration:none;
color:#00A6D6;
}
#navegacionBar A:active {
text-align:left;
font-weight:bold;
text-decoration:none;
color:#00A6D6;
}
  #4 (permalink)  
Antiguo 16/09/2011, 08:45
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Problemas de colocacion IE8
y el de la pagina:
y la página:
Cita:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<INCLUDES DE CSS Y JS>
</head>
<body>
<div id="contenedor">
<div id="logo" align="left">
<table>
<tr>
<td rowspan="2" width="450"><a href="index.php">IMG</a></td>
<td width="250">IMG</td>
<td rowspan="2">
FORMULARIO
</td>
</tr>
<tr>
<td>IMG</td>
</tr>
</table>
</div>
<div id="otros">
<form name="frmProductos" action="./util/actProductoActivo.php" method="post">
<div id="otrosImg">

</div>
<?php
BUCLE PARA CARGAR n DIVS ?>
<div id="otrosElemento">

</div>
<?php
FIN BUCLE
}
?>
</form>
</div>
<div id="central">
<div id="navegacionBar">
BARRA DE NAVEGACION
</div>
<div id="navegacionDiv">
<div id="navegacionCarro">
<?php
SI EXISTE UN ELEMENTO ACTIVO {?>
<form name="frmConfirmarPedido" method="post" action="./util/actAddLineaPedido.php" enctype="multipart/form-data">
<table width="100%">
<tr>
<th><?=$nombre?></th>
<th>Cantidad:</th>
<td><input type="text" name="txtCantidadProducto" size="2" class="textBox"/></td>
</tr>
<tr>
<th>Frente</th><td colspan="2" align="left"><input type="file" name="imgFrenteProducto" id="imgFrenteProducto" class="textBox"/></td>
</tr>
<tr>
<th>Reves</th><td colspan="2" align="left"><input type="file" name="imgRevesProducto" id="imgRevesProducto" class="textBox"/> </td>
</tr>
</table>
Datos de env&iacute;o<br>
<table width="100%">
<tr>
<th>Direccion</th>
<td><input type="text" name="txtDireccionConfirmarPedido" value="<?=$_SESSION["pedido"]->get_direccion();?>" class="textBox"/></td>
</tr>
<tr>
<th>Poblacion</th>
<td align="left"><input type="text" name="txtPoblacionConfirmarPedido" value="<?=$_SESSION["pedido"]->get_poblacion();?>" class="textBox"/></td>
</tr>
<tr>
<th>Provincia</th>
<td><input type="text" name="txtProvinciaConfirmarPedido" value="<?=$_SESSION["pedido"]->get_provincia();?>" class="textBox"/></td>
</tr>
<tr>
<th>C&oacute;digo postal</th>
<td><input type="text" name="txtCPConfirmarPedido" value="<?=$_SESSION["pedido"]->get_codigo_postal();?>" class="textBox"/></td>
</tr>
</table>
<a href="#" onclick="comprobarFrmPedido()" onmouseover="imgAnhadir.src='./imgp/anhadir2.gif';" onmouseout="imgAnhadir.src='./imgp/anhadir.gif'">
<img name="imgAnhadir" src="./imgp/anhadir.gif" border="0">
</a>
</form>
</div>
<?php
}?>
</div>
</div>
<div id="contCategorias">
<div id="categoriasImg">
<img src="./imgp/categorias.png">
</div>
<div id="categorias">
<form name="frmMenuNavegacion" action="./util/actMenu.php" method="post">
<input type="hidden" name="idIndex" id="idIndex">
<table border="0">
<?php
$i=0;
BUCLE PARA CARGAR EL DIV DE LA IZQUIERDA ?>
<td>
<a href="#" onclick="ver(<?=$id;?>)">
<img src="./imgCats/<?=$id;?>.jpg" WIDTH="100" height="100" alt="<?=$nombre;?>" border="0" >
</a>
</td>
<?php
FIN BUCLE
}?>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 16/09/2011, 08:46
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Problemas de colocacion IE8
3er mensaje:

Gracias por la ayuda :)
  #6 (permalink)  
Antiguo 17/09/2011, 16:39
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Problemas de colocacion IE8
Mañana le echo un vistazo y te digo :) Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #7 (permalink)  
Antiguo 18/09/2011, 11:05
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años
Puntos: 37
Respuesta: Problemas de colocacion IE8
Ok, veamos. Como te había dicho hay errores de maquetación html/css. Primero te cuento por encima y luego mira tú mismo el código.

Tienes 3 capas (#contCategorias , #central y #otros). Ese es el orden en el que deben ser mostradas. En cambio, en tu html primero vemos la capa #otros, luego #central y por último #contCategorías.

En tu css, la capa #contCategorias no tenía float, y las otras 2 lo tenían a la derecha. Lo ordenado sería flotar las 3 capas a la izquierda.

Entonces, los cambios más significativos:

1) En el html, cambiamos de lugar la capa #otros pasándola a donde está #contCategorias, y ésta al lugar de #otros.

2) En el CSS, flotamos las 3 capas a la izquierda, respetando los márgenes y, en la primera (#contCategorias), dándole un margin-left para que no quede totalmente pegada a la izquierda del div contenedor.

3) Las medidas no están bien repartidas, por lo que en IE la última capa se desplazará a la siguiente línea. Para evitar esto habría que hacer los cálculos pertinentes (eso te lo dejo a ti) o, un apaño chapucero, aumentar el ancho del div contenedor unos 20px más.


Referente a la tabla, no he mirado como está hecha, pero lo dejamos para más tarde si es que aún necesitas ayuda.

Ahora el código que tienes que modificar:

Código HTML: 
Ver original
  1. <body>
  2. <div id="contenedor">
  3. <div id="logo" align="left">
  4. <table>
  5. <tr>
  6. <td rowspan="2" width="450"><a href="index.php">IMG</a></td>
  7. <td width="250">IMG</td>
  8. <td rowspan="2">
  9. FORMULARIO
  10. </td>
  11. </tr>
  12. <tr>
  13. <td>IMG</td>
  14. </tr>
  15. </table>
  16. </div>
  17. <div id="contCategorias">
  18. <div id="categoriasImg">
  19. <img src="./imgp/categorias.png">
  20. </div>
  21. <div id="categorias">
  22. <form name="frmMenuNavegacion" action="./util/actMenu.php" method="post">
  23. <input type="hidden" name="idIndex" id="idIndex">
  24. <table border="0">
  25. <td>
  26. <a href="#" onClick="ver(<?=$id;?>)">
  27. <img src="./imgCats/<?=$id;?>.jpg" WIDTH="100" height="100" alt="" border="0" >
  28. </a>
  29. </td>
  30. </table>
  31. </form>
  32. </div>
  33. </div>
  34.  
  35. <div id="central">
  36. <div id="navegacionBar">
  37. BARRA DE NAVEGACION
  38. </div>
  39. <div id="navegacionDiv">
  40. <div id="navegacionCarro">
  41. <form name="frmConfirmarPedido" method="post" action="./util/actAddLineaPedido.php" enctype="multipart/form-data">
  42. <table width="100%">
  43. <tr>
  44. <th><?=$nombre?></th>
  45. <th>Cantidad:</th>
  46. <td><input type="text" name="txtCantidadProducto" size="2" class="textBox"/></td>
  47. </tr>
  48. <tr>
  49. <th>Frente</th><td colspan="2" align="left"><input type="file" name="imgFrenteProducto" id="imgFrenteProducto" class="textBox"/></td>
  50. </tr>
  51. <tr>
  52. <th>Reves</th><td colspan="2" align="left"><input type="file" name="imgRevesProducto" id="imgRevesProducto" class="textBox"/> </td>
  53. </tr>
  54. </table>
  55. Datos de env&iacute;o<br>
  56. <table width="100%">
  57. <tr>
  58. <th>Direccion</th>
  59. <td><input type="text" name="txtDireccionConfirmarPedido" value="" class="textBox"/></td>
  60. </tr>
  61. <tr>
  62. <th>Poblacion</th>
  63. <td align="left"><input type="text" name="txtPoblacionConfirmarPedido" value="" class="textBox"/></td>
  64. </tr>
  65. <tr>
  66. <th>Provincia</th>
  67. <td><input type="text" name="txtProvinciaConfirmarPedido" value="" class="textBox"/></td>
  68. </tr>
  69. <tr>
  70. <th>C&oacute;digo postal</th>
  71. <td><input type="text" name="txtCPConfirmarPedido" value="" class="textBox"/></td>
  72. </tr>
  73. </table>
  74. <a href="#" onClick="comprobarFrmPedido()" onMouseOver="imgAnhadir.src='./imgp/anhadir2.gif';" onMouseOut="imgAnhadir.src='./imgp/anhadir.gif'">
  75. <img name="imgAnhadir" src="./imgp/anhadir.gif" border="0">
  76. </a>
  77. </form>
  78. </div>
  79. <?php
  80. }?>
  81. </div>
  82. </div>
  83. <div id="otros">
  84. <form name="frmProductos" action="./util/actProductoActivo.php" method="post">
  85. <div id="otrosImg">
  86.  
  87. </div>
  88. <div id="otrosElemento">
  89.  
  90. </div>
  91. </form>
  92. </div>
  93.  
  94. </div>
  95. </body>
  96. </html>


Y los cambios en el CSS:

Código CSS: 
Ver original
  1. #contenedor {
  2. width:1022px;
  3. text-align:center;
  4. margin:auto;
  5. overflow:hidden;
  6. background:#BEEBDD;
  7. box-shadow: 2px 2px 5px #999;
  8. -webkit-box-shadow: 2px 2px 5px #999;
  9. -moz-box-shadow: 2px 2px 5px #999;
  10. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
  11. filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
  12. }
  13.  
  14. #contCategorias {
  15. float: left;
  16. margin-top:10px;
  17. margin-left:8px;
  18. margin-right:8px;
  19. margin-bottom:10px;
  20. padding-top:0px;
  21. padding-left:0px;
  22. padding-right:0px;
  23. padding-bottom:0px;
  24. width:200px;
  25. background:#FFFFFF;
  26. overflow:hidden;
  27. box-shadow: 2px 2px 5px #999;
  28. -webkit-box-shadow: 2px 2px 5px #999;
  29. -moz-box-shadow: 2px 2px 5px #999;
  30. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
  31. filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
  32. }
  33.  
  34. #central {
  35. float:left;
  36. margin-top:10px;
  37. margin-left:0px;
  38. margin-right:5px;
  39. margin-bottom:10px;
  40. padding-top:0px;
  41. padding-left:0px;
  42. padding-right:0px;
  43. padding-bottom:0px;
  44. width:555px;
  45. background:#FFFFFF;
  46. box-shadow: 2px 2px 5px #999;
  47. -webkit-box-shadow: 2px 2px 5px #999;
  48. -moz-box-shadow: 2px 2px 5px #999;
  49. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
  50. filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
  51. }
  52.  
  53. #otros {
  54. float:left;
  55. margin-top:10px;
  56. margin-left:12px;
  57. margin-right:8px;
  58. margin-bottom:10px;
  59. padding-top:0px;
  60. padding-left:0px;
  61. padding-right:0px;
  62. padding-bottom:0px;
  63. width:200px;
  64. background:#FFFFFF;
  65. box-shadow: 2px 2px 5px #999;
  66. -webkit-box-shadow: 2px 2px 5px #999;
  67. -moz-box-shadow: 2px 2px 5px #999;
  68. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
  69. filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
  70. }


Te recomiendo intentar siempre estructurar lo mejor posible el código y cuanta más semántica, mejor. Lo mismo con el CSS. Un código bien ordenado es más fácil de leer, de modificar y de comprender. Y también será más tenido en cuenta por los robots de los buscadores.

Un saludo.


pd: He quitado el código php para poder visualizarlo correctamente en mi navegador.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #8 (permalink)  
Antiguo 19/09/2011, 02:46
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Problemas de colocacion IE8
muchas gracias, me pongo ahora mismo a ver si hago que funcione. Lo de los floats así me lo recomendaron en esta página, que se colocaban mal antes.

Lo dicho, me pongo ahora :)

muchas gracias opr la ayuda
  #9 (permalink)  
Antiguo 19/09/2011, 04:08
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Problemas de colocacion IE8
Tenías razon con lo de la colocación :)

Lo que si, no se que pasa con las tablas. Fallan todas en IE8 en mayor o menor medida

Etiquetas: colocacion, ie8
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:34.