Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema -muy- molesto con IE

Estas en el tema de [SOLUCIONADO] Problema -muy- molesto con IE en el foro de CSS en Foros del Web. Bueno, como todos sabemos, el IE muchas veces nos causa muchos dolores de cabeza.. En Chrome y FF, mi sitio se ve correctamente, pero en ...
  #1 (permalink)  
Antiguo 02/03/2011, 08:41
 
Fecha de Ingreso: julio-2006
Mensajes: 254
Antigüedad: 11 años, 5 meses
Puntos: 0
[SOLUCIONADO] Problema -muy- molesto con IE

Bueno, como todos sabemos, el IE muchas veces nos causa muchos dolores de cabeza..
En Chrome y FF, mi sitio se ve correctamente, pero en IE, ¡las barras laterales se ven por debajo del contenido!
Codigo HTML:
Código HTML:
Ver original
  1. <div align="center" id="global"> <div id="banner"><img src="/img/banner/simula2slogan.png" width="500" height="100" /></div>  
  2.   <div id="control">
  3.      
  4.       <? if(isset($_COOKIE['MM_Username'])) { require("./modulos/control.php");} else { require("./modulos/controln.php"); }; ?>
  5. </div>
  6.   <div id="cuerpo">  
  7.   <p><br />
  8.     <br />
  9.   </p>
  10.   <p>&nbsp;</p>
  11.   <p>&nbsp;</p><br /><br />
  12. <div id="menu">      <? require("./modulos/menu.php");
  13.  
  14. ?></div>
  15.  <div class="curved" id="izquierda">    <? if(isset($_COOKIE['MM_Username'])) { require("./modulos/izquierda.php");} else { require("./modulos/izquierdan.php"); }; ?>
  16.    
  17.  </div>
  18.  <div class="curved"id="derecha"> <? if(isset($_COOKIE['MM_Username'])) { require("./modulos/derecha.php");} else { require("./modulos/derechan.php"); }; ?>  
  19.  
  20.  </div>
  21.  <div id="contenido"><!-- TemplateBeginEditable name="contenido" -->
  22.    <p style="text-align: left">&nbsp;</p>
  23.  <!-- TemplateEndEditable --></div>
  24.  
  25.   </div>
  26.   <div class="curved" id="copy">      <? require("./modulos/copy.php"); ?></div>
  27. </div>
Código CSS:
Código CSS:
Ver original
  1. <style type="text/css">
  2. body,td,th {
  3.     font-family: Verdana, Geneva, sans-serif;
  4.     font-size: 12px;
  5.     color: #FFF;
  6. }
  7. body {
  8.     background-color: #333 !important;
  9.  
  10. }
  11. a:link {
  12.     color: #F00;
  13.     font-weight: bold;
  14.     text-decoration: underline;
  15. }
  16. a:visited {
  17.     text-decoration: underline;
  18. }
  19. a:hover {
  20.     text-decoration: none;
  21. }
  22. a:active {
  23.     text-decoration: underline;
  24. }
  25. #global {
  26.     width:1024px;
  27.     margin:auto;
  28.     background-color: #333;
  29.    
  30. }
  31. #banner {
  32.     float: left;
  33.     width: 500px;
  34.     height:110px;
  35. }
  36. #control {
  37.     float:right;
  38.     width:500px;
  39.     height:110px;
  40.     border: 1px dashed #F00;
  41.  
  42. }
  43. #cuerpo {
  44.     width: 1024px;
  45.     margin:auto;
  46.        
  47. }
  48. #contenido {
  49.     width: 660px;
  50.     margin-right: 150px;
  51.     margin-left: 192px;
  52.        
  53. }
  54. #copy {
  55.     height: 20px;
  56.     width: 1024px;
  57.     background:#000;
  58. }
  59. #menu {
  60.     height: 26px;
  61.     width: 768px;
  62.     border: 2px dotted #999;
  63.     margin:auto;
  64. }
  65. #izquierda {
  66.     float: left;
  67.     width: 170px;
  68.     background-color: #666;
  69.     border: 1px solid #666;
  70.     -moz-border-radius: 10px;
  71.     -webkit-border-radius: 10px;
  72.     padding: 10px;
  73.     height: 1000px;
  74.     margin-top: 5px;
  75. }
  76. #derecha {
  77.     float: right;
  78.     width: 150px;
  79.     background-color:#666;
  80.     border: 1px solid #666;
  81.     -moz-border-radius: 10px;
  82.     -webkit-border-radius: 10px;
  83.     padding: 10px;
  84.     height: 1000px;
  85.     margin-top: 5px;
  86. }
  87. .curved {
  88. -moz-border-radius: 15px; /* Firefox */
  89. -webkit-border-radius: 15px; /* Safari and Chrome */
  90. border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  91.  
  92. behavior: url(border-radius.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
  93. }
  94. .titulo {
  95.     text-align: left;
  96. }
  97. .contenido {
  98. }
  99. </style>

Solucioné el problema modificando los anchos, se ve que IE los interpreta un poco mal las posiciones..

Última edición por lauchalp95; 02/03/2011 a las 09:16
  #2 (permalink)  
Antiguo 02/03/2011, 13:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: [SOLUCIONADO] Problema -muy- molesto con IE

La mayor parte de las diferencias que se aprecian entre IE y otros exploradores suelen venir de no utilizar la etiqueta <!DOCTYPE> para definir el tipo de documento HTML.
Otra medida muy saludable es validar el código HTML y CSS en http://validator.w3.org/unicorn
Cuando aparecen errores, cada navegador los interpreta a su manera, pudiendo ofrecer resultados distintos. Seguir los estándares del w3c es la mejor garantía de éxito.
Otras diferencias aparecen por permitir que sea el navegador quien decida algunas propiedades por defecto. Si damos valores a esas propiedades en nuestro CSS, las diferencias desaparecen.
Tan solo hay algunas pocas diferencias entre navegadores que no se correspondan con ninguno de los problemas anteriores.
  #3 (permalink)  
Antiguo 02/03/2011, 15:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [SOLUCIONADO] Problema -muy- molesto con IE

A mayores:
Publique el html generado, no el programado.
Identifique los div´s por su nombre de clase o id que les haya dado.
Y si tiene la página en línea, un enlace a la misma nunca está de más para reproducir el problema. Que hay veces que los estilos heredados también influyen.

P.D.: debería evitar el "align center", "p" vacíos y "br"´s para lograr las separaciones. Use márgenes, padding´s y demás propiedades.
  #4 (permalink)  
Antiguo 02/03/2011, 15:36
 
Fecha de Ingreso: julio-2006
Mensajes: 254
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: [SOLUCIONADO] Problema -muy- molesto con IE

Gracias a los dos, tomaré sus sugerencias!

Etiquetas: molesto, solucionado
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




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