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, 14:19
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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 ametconsectetur adipiscing elitVivamus consequat cursus diam sit amet auctorMaecenas hendrerit adipiscing molestieDonec eget condimentum quamPhasellus sit amet velit lectussit amet consequat quamAliquam sit amet est diamvitae iaculis tortorAenean varius porta nequenec condimentum enim aliquet sit ametNunc nec tellus duised euismod urnaNulla tincidunt nisl nec est egestas non scelerisque neque ullamcorperNam turpis justofringilla sed eleifend idplacerat nec anteNam vel lorem magnanon elementum metusSed egestas ultrices viverraDonec nulla esttempus sit amet adipiscing utplacerat id arcuDonec ut urna quis ipsum suscipit lobortis ut sed sapienMaecenas et ipsum enimnec euismod felisNulla ut sodales justoUt rhoncus ullamcorper urnaet sagittis nibh pellentesque etUt libero tortorconvallis a tristique amolestie nec turpisUt in est duiAliquam mollis nisl at libero faucibus at ultricies lorem dignissimNunc tincidunt leo id orci blandit ac blandit eros sagittis.</p>

<
p>Praesent diam estimperdiet id aliquet necporttitor non massaMauris convallis ante nec enim tempor interdumMauris sodales euismod nuncvitae venenatis quam sollicitudin non. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos himenaeosSed eu felis velitac lacinia semEtiam egestas nibh quis est porttitor eget sagittis lacus dignissimIn tincidunt augue non leo blandit dictumCras semper placerat diam sagittis bibendumIn sed dui at velit elementum pellentesqueInteger tincidunt varius risusut euismod est egestas etMorbi commodo vehicula sapiennon dignissim nisl rutrum nec.</p>

<
p>Morbi at lorem nec orci aliquet scelerisque eu in erosNullam ac neque ligulased viverra leoCurabitur at dolor quis ipsum pulvinar gravidaProin euismod nisl id leo congue convallisFusce fermentumdiam vitae tempus placeratmetus velit laoreet turpissed congue neque eros vel quamMaecenas ultricies lectus sed nulla molestie faucibusSuspendisse aliquam magna eu lacus commodo suscipitDonec et magna id lectus sollicitudin faucibus sit amet a nullaVestibulum mauris nullapretium non congue etcongue sit amet urnaNulla id gravida elitSuspendisse potentiAenean nec felis purusac ullamcorper elitCras ut bibendum nulla.</p>

<
p>Sed vel lorem non ante tincidunt pharetraAenean at nisi nequea tempus nequeEtiam aliquet quam ut elit laoreet aliquetAliquam eu libero augueSuspendisse odio nislscelerisque sed molestie sediaculis ac nisiProin et lacus semIn augue maurisconsectetur vel faucibus euelementum eu semMauris velit justocondimentum id imperdiet eualiquam vitae maurisVestibulum pellentesque tincidunt suscipitCras dolor dolorlaoreet in pulvinar utvulputate vitae nisiVestibulum pulvinar accumsan nulla nec eleifendDuis semper nulla eget felis consequat blanditPhasellus velit maurisultrices quis interdum atscelerisque at odioNulla malesuada adipiscing magna eget pharetraSuspendisse nisl semadipiscing id gravida egetmollis a elitDuis magna ipsumaliquet in imperdiet velsagittis in mauris.</p>

<
p>Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos himenaeosVestibulum varius pretium quam a dictumMaecenas sit amet lorem velitMorbi scelerisque convallis eros in portaNullam malesuada augue arcuut pulvinar justoNam nulla duisagittis a vulputate inpellentesque nec nislAliquam vitae dolor nec erat adipiscing pulvinarFusce gravida lobortis nunc auctor luctusMauris lacinia pretium faucibusMorbi nec magna et turpis interdum iaculis ac vitae augueSuspendisse malesuadaneque vel dignissim pretiumdiam diam interdum nislvitae 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</apodrá 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, 14:44
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
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, 17:23
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 17:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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, 17:36
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 17:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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, 17:58
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 18:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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, 18:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 18:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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, 18:46
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 19:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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, 10:31
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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, 14:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 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, 14:55
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
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




La zona horaria es GMT -6. Ahora son las 15:16.