Tema: Distorsión entre IE y demas navegadores, ¿cómo lo soluciono?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/08/2009, 13:19
Avatar de Distriker
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.