Foros del Web » Creando para Internet » HTML »

Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?

 Estas en el tema de Distorsión entre IE y demas navegadores, ¿cómo lo soluciono? en el foro de HTML en Foros del Web. Hola a todos, hoy me ha pasado lo que menos me esperaba, que se viese bien en IE y que se vea mal en los ...
  #1 (permalink)  
Antiguo 08/08/2009, 13:19
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Hola a todos, hoy me ha pasado lo que menos me esperaba, que se viese bien en IE y que se vea mal en los demás navegadores.

Observen.

Miren mi index:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="robots" content="noindex" />

<title>v2 BetaConsolas.Com</title>

<link rel="stylesheet" type="text/css" href="styles/general.css" title="" media="" />
</head>
<body>

<div id="cabecera"><img src="images/logo.gif" alt="Logo de BetaConsolas"></div>
<div id="navegacion">
<a href="#" class="enlace-navegacion">Portada</a> |
<a href="#" class="enlace-navegacion">Consolas</a> |
<a href="#" class="enlace-navegacion">Juegos</a> |
<a href="#" class="enlace-navegacion">Servicios</a> |
<a href="#" class="enlace-navegacion">Foro</a> |
<a href="#" class="enlace-navegacion">Contacta</a> |</div>
<div id="contenido">

<div id="principal">
<h1>Bienvenido a BetaConsolas.Com v2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consequat cursus diam sit amet auctor. Maecenas hendrerit adipiscing molestie. Donec eget condimentum quam. Phasellus sit amet velit lectus, sit amet consequat quam. Aliquam sit amet est diam, vitae iaculis tortor. Aenean varius porta neque, nec condimentum enim aliquet sit amet. Nunc nec tellus dui, sed euismod urna. Nulla tincidunt nisl nec est egestas non scelerisque neque ullamcorper. Nam turpis justo, fringilla sed eleifend id, placerat nec ante. Nam vel lorem magna, non elementum metus. Sed egestas ultrices viverra. Donec nulla est, tempus sit amet adipiscing ut, placerat id arcu. Donec ut urna quis ipsum suscipit lobortis ut sed sapien. Maecenas et ipsum enim, nec euismod felis. Nulla ut sodales justo. Ut rhoncus ullamcorper urna, et sagittis nibh pellentesque et. Ut libero tortor, convallis a tristique a, molestie nec turpis. Ut in est dui. Aliquam mollis nisl at libero faucibus at ultricies lorem dignissim. Nunc tincidunt leo id orci blandit ac blandit eros sagittis.</p>

<p>Praesent diam est, imperdiet id aliquet nec, porttitor non massa. Mauris convallis ante nec enim tempor interdum. Mauris sodales euismod nunc, vitae venenatis quam sollicitudin non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eu felis velit, ac lacinia sem. Etiam egestas nibh quis est porttitor eget sagittis lacus dignissim. In tincidunt augue non leo blandit dictum. Cras semper placerat diam sagittis bibendum. In sed dui at velit elementum pellentesque. Integer tincidunt varius risus, ut euismod est egestas et. Morbi commodo vehicula sapien, non dignissim nisl rutrum nec.</p>

<p>Morbi at lorem nec orci aliquet scelerisque eu in eros. Nullam ac neque ligula, sed viverra leo. Curabitur at dolor quis ipsum pulvinar gravida. Proin euismod nisl id leo congue convallis. Fusce fermentum, diam vitae tempus placerat, metus velit laoreet turpis, sed congue neque eros vel quam. Maecenas ultricies lectus sed nulla molestie faucibus. Suspendisse aliquam magna eu lacus commodo suscipit. Donec et magna id lectus sollicitudin faucibus sit amet a nulla. Vestibulum mauris nulla, pretium non congue et, congue sit amet urna. Nulla id gravida elit. Suspendisse potenti. Aenean nec felis purus, ac ullamcorper elit. Cras ut bibendum nulla.</p>

<p>Sed vel lorem non ante tincidunt pharetra. Aenean at nisi neque, a tempus neque. Etiam aliquet quam ut elit laoreet aliquet. Aliquam eu libero augue. Suspendisse odio nisl, scelerisque sed molestie sed, iaculis ac nisi. Proin et lacus sem. In augue mauris, consectetur vel faucibus eu, elementum eu sem. Mauris velit justo, condimentum id imperdiet eu, aliquam vitae mauris. Vestibulum pellentesque tincidunt suscipit. Cras dolor dolor, laoreet in pulvinar ut, vulputate vitae nisi. Vestibulum pulvinar accumsan nulla nec eleifend. Duis semper nulla eget felis consequat blandit. Phasellus velit mauris, ultrices quis interdum at, scelerisque at odio. Nulla malesuada adipiscing magna eget pharetra. Suspendisse nisl sem, adipiscing id gravida eget, mollis a elit. Duis magna ipsum, aliquet in imperdiet vel, sagittis in mauris.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum varius pretium quam a dictum. Maecenas sit amet lorem velit. Morbi scelerisque convallis eros in porta. Nullam malesuada augue arcu, ut pulvinar justo. Nam nulla dui, sagittis a vulputate in, pellentesque nec nisl. Aliquam vitae dolor nec erat adipiscing pulvinar. Fusce gravida lobortis nunc auctor luctus. Mauris lacinia pretium faucibus. Morbi nec magna et turpis interdum iaculis ac vitae augue. Suspendisse malesuada, neque vel dignissim pretium, diam diam interdum nisl, vitae mollis nisi mi vel tellus. </p>

</div>
<div id="sidebar-right" class="parte-lateral">

<div id="buscador">
<h2 class="tit-right">Buscar</h2>

<form>
<div id="texto-a-buscar"><input type="text" name="Criterio de busqueda"></div>
<div id="boton-de-busqueda"><input type="image" src="images/buscar.gif" with="53" height="15"></div>
<div class="radio"><input type="radio" name="opcion1" value="1">Buscar en la web</div>
<div class="radio"><input type="radio" name="opcion2" value="2">Buscar en Google</div>
</form>

</div>
<div id="registrarse">
<h2 class="tit-right">Registro</h2>
<p>Si se <a href="#">registra con nosotros</a> podrá obtener bastantes ventajas</p>
<p>Pulsa aquí para registrarte (aquí pondre una aplicación dinámica que despliege
el formulario de registro.</p>

</div>
<div id="informacion">
<h2 class="tit-right">Información</h2>
<ul>
<li><a href="#">Nuestro objetivo</a></li>
<li><a href="#">Participantes de nuestro equipo</a></li>
</ul>
</div>
</div>

<div id="pie"><p>Copyright © BetaConsolas.Com 2009</p></div>

</div>


</body>
</html> 
Mi CSS:

Código css: 
Ver original
  1. body {
  2. color : #666666 ;
  3. background : #C0D9D9 url(../images/fondo.gif) repeat ;
  4. margin : 20px 0px 20px 0px ;
  5. font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif ;
  6. text-align: center ; 
  7. float: center ;
  8. }
  9.  
  10. #cabecera {
  11. width: 700px ;
  12. heigth: 106px ;
  13. }
  14.  
  15. #navegacion {
  16. background: #F5F4C3 url(images/fondo-navegacion.gif) ;
  17. border-top : 1px solid #cccccc;
  18. border-bottom : 1px solid #cccccc; 
  19. padding : 3px 10px 5px 10px;
  20. width: 710px ;
  21. }
  22.  
  23. a.enlace-navegacion, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
  24. color: #494E6B;
  25. }
  26.  
  27. a.enlace-navegacion:visited {
  28. color: #494E6B ;
  29. }
  30.  
  31. a.enlace-navegacion:active {
  32. color: #3F7DE3;
  33. }
  34.  
  35. a.enlace-navegacion:focus {
  36. color: #494E6B ;
  37. }
  38.  
  39. a.enlace-navegacion:link {
  40. color: #494E6B ;
  41. }
  42.  
  43. a.enlace-navegacion:hover {
  44. color: #3F7DE3;
  45. }
  46.  
  47. /*Contenido*/
  48.  
  49. #contenido {
  50. text-align: left ;
  51. width: 700px ;
  52. margin: auto ;
  53. background-color: #FFFFFF ;
  54. }
  55.  
  56. #principal {
  57. width: 470px ;
  58. margin-left: 8px ;
  59. padding: 12px 0px 10px 0px ;
  60. background-color: #ffffff ;
  61. float: left ; 
  62. }
  63.  
  64. h1 {
  65. font-size: 14px ;
  66. }
  67.  
  68. /*Sidebar-right*/
  69.  
  70. #sidebar-right {
  71. width: 200px ;
  72. background: #6495ed ;
  73. border: 0px 0px 1px 1px ;
  74. border-style: solid ;
  75. border-color: #cccccc ;
  76. float: right ;
  77. }
  78.  
  79. .tit-right {
  80. background-color:#68729E ;
  81. font-weight: normal ;
  82. font-size:8pt ; 
  83. letter-spacing: 1.5px ;
  84. padding: 7px 3px 7px 8px ;
  85. margin: 0px 0px 8px 0px ;
  86. text-transform : uppercase ;
  87. }
  88.  
  89. .parte-lateral {
  90. padding: 5px 4px 13px 10px ;
  91. }
  92.  
  93. input {
  94. font-size: 9px ;
  95. }
  96.  
  97. #buscador form {
  98. margin: 0px 0px 0px 0px ;
  99. }
  100.  
  101. #texto-a-buscar {
  102. float: left ;
  103. }
  104.  
  105. #texto-a-buscar input {
  106. width: 100px ;
  107. }
  108.  
  109. #boton-de-busqueda {
  110. padding-top: 3px ;
  111. padding-left: 115px ;
  112. }
  113.  
  114. #boton-de-busqueda input {
  115. border: 0px none ;
  116. }
  117.  
  118. .radio {
  119. clear: both ;
  120. }
  121.  
  122. #informacion ul {
  123. list-style: none ;
  124. margin : 5px 10px 0px 0px ;
  125. padding: 0px 0px 0px 4px ; 
  126. }
  127.  
  128. #informacion li {
  129. padding-left: 15px ;
  130. background: transparent url('../images/li.gif') scroll 0 2px no-repeat;
  131. margin: 2px ;
  132. }
  133.  
  134. /* Pie */
  135.  
  136. #pie {
  137. clear: both ;
  138. color: #cccccc ;
  139. text-align: right ;
  140. border-top: 1px solid ;
  141. margin: 10px 10px 0px 10px ;
  142. padding-bottom: 10px ;
  143. }

Fallos que hay en otros navegadores, la cabecera y la navegación, se ven descuadrados, y el borde de la sidebar derecha está demasiado grueso, todavía me queda crear la sidebar izquierda, pero prefiero terminar con este problema primero.

¿Cómo puedo solucionar esto?

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #2 (permalink)  
Antiguo 08/08/2009, 13:44
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 15 años
Puntos: 4
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
en realidad ese diseno lo lograrias usando un div para el header un elemento ul para la barra de navegacion y otro div grande contenido dentro 2 divs derecho articulos y el de la isquierda para el sidebar luego al final un div para el footer

si quieres un layout de 1 header 3 columnas y un footer asi lo consiges

<div id="header">
</div>
<ul id="navbar"> <!-- con esto es suficiente para la barra de navegacion -->
</ul>
<div id="principal">
<div id="izquierda">
</div>
<div id="centro">
</div>
<div id="derecha">
</div>
</div>
<div id="footer">
</div>


luego en el css lo primero es resetear los estilos * {margin:0;padding:0;} o usar algun reset CSS, puedes colocar ese fondo azul en todo el area de la pagina con esto

html {background:url(/images/rutaimagen.png);}

el ancho lo puedes poner al body para no estar poniendo a todos los elementos

body {
width:750px;
margin:0 auto;
}

luego adentro los divs debes saber como colocarlos [defines el ancho de cada div y usas floatsy para el footer le pones clear both hay muchas mas tecnicas que clear both pero bueno es lo mas usado]:) cualquier cosa estare por aqui
  #3 (permalink)  
Antiguo 08/08/2009, 16:23
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Pero veamos, yo me quiero quedar con lo que tengo, y lo que quiero saber es algo para solucionar ese dichoso problema con el header, la navegación y la sidebar.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #4 (permalink)  
Antiguo 08/08/2009, 16:28
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Hola Distriker
Tú ya eres suficientemente veterano en el foro como para saber que text-aling no sirve para centrar cajas
Modifica:
Cita:
#cabecera {
margin:0 auto;
width:700px;
}
#navegacion {
background:#F5F4C3 url(images/fondo-navegacion.gif) repeat scroll 0 0;
border-bottom:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
margin:0 auto;
width:700px;

a.enlace-navegacion:link {
color:#494E6B;
line-height:25px;
margin:5px;
}
Pero para los enlaces crea una lista (ul/li) como te dice Adriancito

Para el borde, utiliza la forma abreviada si lo quieres uniforme:
Cita:
border:2px solid #CCCCCC;

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 08/08/2009, 16:36
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Cita:
Iniciado por kseso? Ver Mensaje
Hola Distriker
Tú ya eres suficientemente veterano en el foro como para saber que text-aling no sirve para centrar cajas
Modifica:
Pero para los enlaces crea una lista (ul/li) como te dice Adriancito

Para el borde, utiliza la forma abreviada si lo quieres uniforme:



Un saludo
Lo siento KSeso, se me habrá colado por algún despiste

Muchas gracias, he analizado tu codigo y reemplazado correctamente en mi codigo y todo ya me va bien, exeptuando el dicho borde del sidebar que se ve mayor en Firefox y demás navegadores que no sean IE.

Por cierto, ¿por qué li y ul para el menú de navegación de arriba?

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #6 (permalink)  
Antiguo 08/08/2009, 16:52
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
¿Y por qué un 'p' para los párrafos de texto?
Porque es la etiqueta indicada para ello, ¿verdad?
Pues para conjuntos de elementos "afines" presentados de forma conjunta y uniforme estás las listas (ul | ol | dl ) depende de la naturaleza de los elementos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 08/08/2009, 16:58
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Ok, gracias Kseso?

Una cosa, para que no se cree una linea arriba y otra abajo cuando pongo el Ul/li, ¿hay alguna forma de evitarlo?

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #8 (permalink)  
Antiguo 08/08/2009, 17:24
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Cita:
Iniciado por Distriker Ver Mensaje
exeptuando el dicho borde del sidebar que se ve mayor en Firefox y demás navegadores que no sean IE.
Prueba con lo que te dice kseso?:

border: 1px solid #ccc;
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 08/08/2009, 17:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Eso ya lo tenía y lo sigo teniendo Mik.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #10 (permalink)  
Antiguo 08/08/2009, 17:39
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
No, Distriker, tienes puesto:
Cita:
border-color:#CCCCCC;
border-style:solid;
y tienes que borrar esas dos líneas y poner lo comentado:
border: 1px solid #ccc;
Haz la prueba y en vez de #ccc, por el valor #000 para que lo veas.

¿Me permites una sugerencia?
Cambia el fondo del body, esas diagonales son matadoras. O al menos 'fijalo':
background:#C0D9D9 url(../images/fondo.gif) repeat fixed;

Saludos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 08/08/2009, 17:46
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Lo siento señores por ser tan testarudo, me confundo con otras cosas, lo siento, ya está, solucionado.

Gracias.

Por cierto, KSeso, ¿me recomiendas algún otro fondo? (Web de Consolas)

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #12 (permalink)  
Antiguo 08/08/2009, 18:10
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Cita:
Iniciado por Distriker Ver Mensaje
Lo siento señores por ser tan testarudo, me confundo con otras cosas, lo siento, ya está, solucionado.

Gracias.

Por cierto, KSeso, ¿me recomiendas algún otro fondo? (Web de Consolas)

Saludos
Bueno es saber de tu cabezonería
Tan importante es la temática como el conjunto de la página a la hora de elegir un fondo.
Pero ya te digo, esas diagonales con esos colores al subir y bajar la página pueden causar epilepsia
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 09/08/2009, 09:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Cita:
Iniciado por kseso? Ver Mensaje
Bueno es saber de tu cabezonería
Tan importante es la temática como el conjunto de la página a la hora de elegir un fondo.
Pero ya te digo, esas diagonales con esos colores al subir y bajar la página pueden causar epilepsia

Jeje, espero que no todos me conoscan por mi cabezonería

Una cosa, epilepsia..., xD.

Oye, ¿pero me recomiendas algo?

Circulos

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #14 (permalink)  
Antiguo 09/08/2009, 13:04
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 10 meses
Puntos: 361
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Hola:

¿Y un degradado?

Saludos.
  #15 (permalink)  
Antiguo 09/08/2009, 13:55
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 1 mes
Puntos: 23
Respuesta: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

¿Y un degradado?

Saludos.

Quien sabe, lo mas seguro es que le meta un degradado.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
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:52.