Foros del Web » Creando para Internet » CSS »

descuadre en googlechrome

Estas en el tema de descuadre en googlechrome en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2011, 09:31
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
descuadre en googlechrome

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>

Última edición por cuideru; 16/03/2011 a las 11:11
  #2 (permalink)  
Antiguo 16/03/2011, 11:43
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: descuadre en googlechrome

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.
  #3 (permalink)  
Antiguo 16/03/2011, 11:48
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: descuadre en googlechrome

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
  #4 (permalink)  
Antiguo 16/03/2011, 13:43
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: descuadre en googlechrome

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.
  #5 (permalink)  
Antiguo 16/03/2011, 14:36
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: descuadre en googlechrome

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

Etiquetas: googlechrome
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:56.