descuadre en googlechrome

cuideru · #1 (**permalink**) 16/03/2011, 08:31

Hola, estoy haciendo una web en css y mediante condicionales he conseguido que se vea correctamente en Morzilla y Explorer, pero cuando la abro con GoogleChrome se mueve la barra de navegación. Hice una barra con puntos (imágenes) entre cada palabra.
Alguien tiene alguna sugerencia? no quería hacer una hoja nueva para chrome.
Os pongo el código:

Código:

<HTML>
<HEAD>

<STYLE type="text/css">

BODY{background:black;}


.contenedor{
	width:932;
	height:1024;
	background-image:url(../English/VidEng/FondoVidEngIndex.jpg);
	background-repeat:no repeat;
	margin-left:-466px;
	position:absolute; 
	top: 0px;
	left:50%;
}
.cajabarra{
	width:350;
	height:30;
	margin:305 0 0 54;
	padding-top:10;
	position:absolute;
}


#menu{
	list-style:none;
	margin:0 0 0 10;
	padding:0px;	
}

#menu li{
	margin:-2 4 0 0;
	padding:0;
	float:left;
}
#menu li a.enlace{ 
	height:21px;
	font-family: arial, helvetica;
	font-size:8pt;
	color:#CCCCCC;
	font-weight:bold;
	text-decoration:none;
}
#menu li a.enlace:hover{ 
	background-color: transparent;
	font-weight:bold;
	color:#FF0000;
	text-decoration:none;
}


</style>

<!--[if IE]>
<style>
	#menu{margin-top:8px;}
	#menu li{margin:3 4 0 0;}

	
</style>
<![endif]-->


</HEAD>

<body>

	<div class="contenedor">
			<div class="cajabarra">

				<ul id="menu">
					<li><a href="#" class="enlace">PERFIL</a></li>
					<li><img src="http://www.forosdelweb.com/f53/iconos/punto.jpg" width="10" height="21"></li>
					<li><a href="#" class="enlace">GALERÍA</a></li>
					<li><img src="http://www.forosdelweb.com/f53/iconos/punto.jpg" width="10" height="21"></li>
					<li><a href="#" class="enlace">LIBRO DE VISITAS</a></li>
					<li><img src="http://www.forosdelweb.com/f53/iconos/punto.jpg" width="10" height="21"></li>
					<li><a href="#" class="enlace">ENLACES</a></li>
				</ul>
			</div>
	</div>

</body>
</HTML>

Naahuel · #2 (**permalink**) 16/03/2011, 10:43

Mi teoría es que no has especificado unidad para las dimensiones y los márgenes:

.contenedor{
width:932;
height:1024;

width:350;
height:30;
margin:305 0 0 54;

y Google Chrome está siendo muy buenito y las está aplicando en px. Los demás navegadores no las interpretan.

Revisá todas las reglas con dimensiones y agregá las unidades correspondientes. Si las quitás a esas reglas, seguramente se verá casi igual en todos los navegadores.

dooplanillo · #3 (**permalink**) 16/03/2011, 10:48

Además de lo que ha dicho Naahuel, ya que no lo has especificado te recomiendo que siempre utilices un archivo reset.css. Tienes varios modelos por internet y te van a hacer la vida mucho más sencilla para que tu web se vea "lo más parecida" en todos los navegadores.

Un saludo

sanxuan · #4 (**permalink**) 16/03/2011, 12:43

Incluye siempre la etiqueta <!DOCTYPE> al principio del documento. De esa forma los navegadores saben qué tipo de HTML estás usando y te ahorrarás buena parte de las diferencias entre navegadores, especialmente con IE.

cuideru · #5 (**permalink**) 16/03/2011, 13:36

Gracias por la contestación, las pondré en práctica. Yo he encontrado una solución válida y la pongo por si a alguien le sirve en alguna ocasión.

Mi problema estaba en la barra de navegación. Tenía algo como:

PROFILE * GALLERY * GUESTBOOK

donde los asteriscos (puntos.jpg en mi caso) debían estar centrados verticalmente con las palabras. Puse los puntos como imáqenes y el problema estaba en el centrado vertical. Había conseguido que funcionara correctamente en Morzilla y Explorer, pero no en Chrome.

Lo he resuelto de esta manera:

en

Cita:

#menu li a.enlace{
height:21px;
font-family: arial, helvetica;
font-size:8pt;
color:#CCCCCC;
font-weight:bold;
text-decoration:none;
vertical-align: middle;
display: table-cell;

y he añadido a los condicionales:

Cita:

<!--[if IE]>
<style>
#menu li a.enlace{padding-top:3px;}
</style>

De esta manera he conseguido una alineación correcta en los tres navegadores.
Salu2