Foros del Web » Creando para Internet » CSS »

Diferencias entre IE y Chrome

Estas en el tema de Diferencias entre IE y Chrome en el foro de CSS en Foros del Web. Que tal gente!, soy nuevo en el tema de CSS y estoy empezando a armar mi primera web usando esta herramienta, antes que nada, el ...
  #1 (permalink)  
Antiguo 02/05/2009, 09:04
Avatar de Artemix  
Fecha de Ingreso: marzo-2009
Mensajes: 141
Antigüedad: 15 años, 1 mes
Puntos: 0
Diferencias entre IE y Chrome

Que tal gente!, soy nuevo en el tema de CSS y estoy empezando a armar mi primera web usando esta herramienta, antes que nada, el codigo:

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
.thrColAbsHdr #container{ 
	position: relative;
	width: 1000px;
	background:#EBDABE;
	margin: 0 auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

.thrColAbsHdr #header {
	height:69px;
	background: #423A3A;
	padding-top: 10px;
} 

.thrColAbsHdr #menu {
	position: absolute;
	top: 115px;
	left: 0px;
	width: 211px;
	padding:0px;
}

.thrColAbsHdr #lista{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #211919
	text-align: Left;
}

.thrColAbsHdr #lista li{
	padding-bottom:10px;
	list-style-position:outside;
}

.thrColAbsHdr #lista a { 
	padding: 3px 10px;
}

.thrColAbsHdr #lista a:link, .thrColAbsHdr  #lista a:visited{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #211919;
	padding:0px;
	text-decoration: none;
	text-align:left;
}

.thrColAbsHdr #lista a:hover{
	border-bottom-style:solid;
	border-bottom-width:thin:
	border-bottom-color:#000;
}

.thrColAbsHdr #imagenes {
	position: absolute;
	top: 115px;
	right: 0;
	width: 160px;
	padding: 15px 10px 15px 20px;
}
.thrColAbsHdr #mainContent {
	margin-top: 0px;
	margin-right: 250px;
	margin-left: 250px;
	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
} 
.thrColAbsHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

.thrColAbsHdr #navlist li{
	display: inline;
	list-style-type: none;
	margin-left:12px;
}

.thrColAbsHdr #navlist a { 
	padding: 0px;
}

#navlist a:link, #navlist a:visited{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #C8B496;
	background-color: #211919;
	border-width:thin;
	border-style: solid;
	border-color:#BE8C4B;
	padding: 2px 25px 2px 25px;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
}

.thrColAbsHdr #navlist a:hover{
	color: #FFFF9D;
}

.thrColAbsHdr #navcontainer { 
	position: relative;
	background: #A23A3A;
	height: 30px;
	width:1000px;
}

.thrColAbsHdr ul#navlist {
	position:absolute;
	white-space: nowrap;
	margin-left: 45px;
	margin-top: 5px;
	height:20px;
	width:1000px;
}
--> 
</style></head>

<body class="thrColAbsHdr">

<div id="container">
  <div id="header">
  <img border="0" src="img/logo.gif"><img border="0" src="img/midimg.gif"/><img border="0" width=541px height=69px src="img/midbkg.gif"/></div>
  

  <div id="navcontainer">
    <ul id="navlist">
      <li><a href="#">YOUR LINK</a></li>
	  <li><a href="#">YOUR LINK</a></li>
	  <li><a href="#">YOUR LINK</a></li>
	  <li><a href="#">YOUR LINK</a></li>
	  <li><a href="#">YOUR LINK</a></li>
  	  <li><a href="#">YOUR LINK</a></li>
    </ul>
  </div>
  
  <div id="menu">
    <ul id="lista">
      <li><a href="#">HOME</a></li>
      <li><a href="#">QUIENES SOMOS</a></li>
      <li><a href="#">SERVICIO PARA EMPRESAS</a></li>
      <li><a href="#">JUBILACIONES Y PENSIONES</a></li>
      <li><a href="#">TRAMITES<br/>
      ADMINISTRATIVOS-JUDICIALES</a></li>
      <li><a href="#">CALCULOS PREVISIONALES</a></li>
      <li><a href="#">LEYES DE JUBILACIONES Y PENSIONES</a></li>
      <li><a href="#">DECRETOS DE JUBILACIONES Y PENSIONES</a></li>
      <li><a href="#">NOTICIAS</a></li>
      <li><a href="#">CONTACTENOS</a></li>
    </ul>
  </div>
  
  
  <div id="imagenes">
    <h3>imagenes Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #imagenes --></div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>
</body>
</html>
Como veran esta en sus comienzos la web.

El tema basicamente es el siguiente, usando Chrome la navlist donde estan los botones-links que dicen "YOUR LINK" aparecen centrados, sin embargo usando IE7 aparecen hacia la izquierda... segun lei se debe a que estos browsers utilizan diferentes renderizadores, uno usa el Safari (Chrome) y el IE ni idea, usara otro.

Bueno, esa es una de las diferencias que me "han quedado" luego de investigar lo mas posible el codigo CSS.

Gracias por todo!

(Cualquier consejo sera desde ya bienvenido, he tenido problemas tambien con el posicionamiento, si me quieren tirar un tip sobre eso tambien les agradeceria :) )

Pd.: Tuve que sacar lo del HTML porque soy nuevo y no me deja poner enlaces, pero desde luego que eso esta puesto.
  #2 (permalink)  
Antiguo 03/05/2009, 13:24
 
Fecha de Ingreso: mayo-2009
Mensajes: 7
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Diferencias entre IE y Chrome

dejo respuesta aclarando que tengo pocos conociimentos de html y css...


has probando ponerle un "align" al div?, es decir:

Código:
  <div id="navcontainer" align="center">

bueno probe usando el codigo que dejaste y agregando eso que te digo ( align="center") si me salio centrado en la pagina, pero de hecho me sale centrado lo ponga o no .. que extrano no jeje

Saludos
  #3 (permalink)  
Antiguo 04/05/2009, 07:24
Avatar de Artemix  
Fecha de Ingreso: marzo-2009
Mensajes: 141
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Diferencias entre IE y Chrome

A mi me pasa lo mismo pero usando un renderizador Safari, IE siempre me lo muestra hacia la izquierda..

Igual no importa, como no tengo mucho tiempo por desgracia para poner en funcionamiento la web tuve que optar por agarrar algo ya prearmado y modificarlo a mi gusto, asi que ahora esta todo perfectamente estructurado.

No era lo que queria, pero al menos ahora funciona, pronto lo subo a la red y posteo a ver que les parece :)
  #4 (permalink)  
Antiguo 04/05/2009, 07:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: Diferencias entre IE y Chrome

no tienes un dtd definido y veo que también hay cosas en la lista de menús que se pueden simplificar, modifique un poco tu código comparalo con el tuyo y ve si es lo que quieres:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. <!--
  7. *{ margin:0; padding:0;}
  8. body  {
  9.     font: 100% Verdana, Arial, Helvetica, sans-serif;
  10. }
  11. .thrColAbsHdr #container{
  12.     position: relative;
  13.     width: 1000px;
  14.     background:#EBDABE;
  15.     margin: 0 auto;
  16.     text-align: left; /* this overrides the text-align: center on the body element. */
  17. }
  18.  
  19. .thrColAbsHdr #header {
  20.     height:69px;
  21.     background: #423A3A;
  22.     padding-top: 10px;
  23. }
  24.  
  25. .thrColAbsHdr #menu {
  26.     position: absolute;
  27.     top: 115px;
  28.     left: 0px;
  29.     width: 211px;
  30.     padding:0px;
  31. }
  32.  
  33. .thrColAbsHdr #lista{
  34.     font-family: Tahoma, Geneva, sans-serif;
  35.     font-size: 12px;
  36.     color: #211919
  37.     text-align: Left;
  38. }
  39.  
  40. .thrColAbsHdr #lista li{
  41.     padding-bottom:10px;
  42.     list-style-position:outside;
  43. }
  44.  
  45. .thrColAbsHdr #lista a {
  46.     padding: 3px 10px;
  47. }
  48.  
  49. .thrColAbsHdr #lista a:link, .thrColAbsHdr  #lista a:visited{
  50.     font-family: Tahoma, Geneva, sans-serif;
  51.     font-size: 11px;
  52.     color: #211919;
  53.     padding:0px;
  54.     text-decoration: none;
  55.     text-align:left;
  56. }
  57.  
  58. .thrColAbsHdr #lista a:hover{
  59.     border-bottom-style:solid;
  60.     border-bottom-width:thin;
  61.     border-bottom-color:#000;
  62. }
  63.  
  64. .thrColAbsHdr #imagenes {
  65.     position: absolute;
  66.     top: 115px;
  67.     right: 0;
  68.     width: 160px;
  69.     padding: 15px 10px 15px 20px;
  70. }
  71. .thrColAbsHdr #mainContent {
  72.     margin-top: 0px;
  73.     margin-right: 250px;
  74.     margin-left: 250px;
  75.     padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
  76. }
  77. .thrColAbsHdr #footer {
  78.     padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
  79.     background:#DDDDDD;
  80. }
  81. .thrColAbsHdr #footer p {
  82.     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
  83.     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
  84. }
  85.  
  86. .thrColAbsHdr #navcontainer {
  87.     position: relative;
  88.     background: #A23A3A;
  89.     height: 30px;
  90.     width:100%;
  91. }
  92. .thrColAbsHdr #navcontainer ul{
  93.     list-style:none;
  94.     text-align:center;
  95. }
  96. .thrColAbsHdr #navcontainer ul li{
  97.     display: inline;
  98.     margin-left:12px;
  99. }
  100.  
  101. .thrColAbsHdr #navcontainer a {
  102.     padding: 0px;
  103. }
  104.  
  105. #navcontainer a:link, #navcontainer a:visited{
  106.     font-family: Tahoma, Geneva, sans-serif;
  107.     font-size: 12px;
  108.     color: #C8B496;
  109.     background-color: #211919;
  110.     border-width:thin;
  111.     border-style: solid;
  112.     border-color:#BE8C4B;
  113.     padding: 2px 25px 2px 25px;
  114.     text-align:center;
  115.     text-decoration:none;
  116.     font-weight:bold;
  117. }
  118.  
  119. .thrColAbsHdr #navlist a:hover{
  120.     color: #FFFF9D;
  121. }
  122.  
  123. -->
  124. </style></head>
  125.  
  126. <body class="thrColAbsHdr">
  127.  
  128. <div id="container">
  129.   <div id="header">
  130.   <img border="0" src="img/logo.gif" /><img border="0" src="img/midimg.gif" /><img border="0" width="541" height="69" src="img/midbkg.gif"/></div>
  131.  
  132.  
  133.   <div id="navcontainer">
  134.     <ul>
  135.       <li><a href="#">YOUR LINK</a></li>
  136.       <li><a href="#">YOUR LINK</a></li>
  137.       <li><a href="#">YOUR LINK</a></li>
  138.       <li><a href="#">YOUR LINK</a></li>
  139.       <li><a href="#">YOUR LINK</a></li>
  140.       <li><a href="#">YOUR LINK</a></li>
  141.     </ul>
  142.   </div>
  143.  
  144.   <div id="menu">
  145.     <ul id="lista">
  146.       <li><a href="#">HOME</a></li>
  147.       <li><a href="#">QUIENES SOMOS</a></li>
  148.       <li><a href="#">SERVICIO PARA EMPRESAS</a></li>
  149.       <li><a href="#">JUBILACIONES Y PENSIONES</a></li>
  150.       <li><a href="#">TRAMITES<br/>
  151.       ADMINISTRATIVOS-JUDICIALES</a></li>
  152.       <li><a href="#">CALCULOS PREVISIONALES</a></li>
  153.       <li><a href="#">LEYES DE JUBILACIONES Y PENSIONES</a></li>
  154.       <li><a href="#">DECRETOS DE JUBILACIONES Y PENSIONES</a></li>
  155.       <li><a href="#">NOTICIAS</a></li>
  156.       <li><a href="#">CONTACTENOS</a></li>
  157.     </ul>
  158.   </div>
  159.  
  160.  
  161.   <div id="imagenes">
  162.     <h3>imagenes Content</h3>
  163.     <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
  164.     <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  165.   <!-- end #imagenes --></div>
  166.   <div id="mainContent">
  167.     <h1> Main Content </h1>
  168.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
  169.     <h2>H2 level heading </h2>
  170.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  171.     <!-- end #mainContent --></div>
  172.   <div id="footer">
  173.     <p>Footer</p>
  174.   </div>
  175. </div>
  176. </body>
  177. </html>

es necesario que utilices dtd, si no muchas de las cosas que pongas no funcionarán.
una cosa más, ahora ya no te sale la barra de scroll que te salía en configuración de 1024
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 05/05/2009, 08:53
Avatar de Artemix  
Fecha de Ingreso: marzo-2009
Mensajes: 141
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Diferencias entre IE y Chrome

Gracias willy, voy a ver las modificaciones que hiciste asi aprendo sobre mis errores.

Edit.: Ahora veo a que te referis con el DTD, lo saque porque no me permite poner links en mis posts aun, pero en el html original si esta.

Última edición por Artemix; 05/05/2009 a las 08:59
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 09:50.