Foros del Web » Creando para Internet » CSS »

Diferentes estilos en navegadores distintos

Estas en el tema de Diferentes estilos en navegadores distintos en el foro de CSS en Foros del Web. Hola a todos. Tengo cierto problema a la hora de visualizar una web en diferentes navegadores. Si lo hago, por ejemplo, en Chrome, el resultado ...
  #1 (permalink)  
Antiguo 19/07/2012, 21:03
 
Fecha de Ingreso: septiembre-2010
Mensajes: 13
Antigüedad: 13 años, 6 meses
Puntos: 0
Diferentes estilos en navegadores distintos

Hola a todos. Tengo cierto problema a la hora de visualizar una web en diferentes navegadores. Si lo hago, por ejemplo, en Chrome, el resultado es éste:



Pero si lo veo con IE, el resultado es el siguiente:



Se observa que los tamaños son distintos, como que el IE está más alargado y con las capas más grandes y el Chrome más recogido (que es como me gustaría que se viese). Además, no sé si se apreciará en la foto por ser tan pequeñas, pero las imágenes en Chrome se ven bien, pero en otros navegadores como IE o Firefox se ven con peor calidad.

El código que he utilizado ha sido el siguiente:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<title>Pagina prueba</title>
<!--<link rel="shortcut icon" href="http:/objetos/icono.ico">-->
<link rel="stylesheet" href="style-index.css" type="text/css" media="all"/>
<!--[if IE]>
<link rel="stylesheet" href="style-ie.css" type="text/css" media="all">
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

</head>

<body>

<div id="header"></div>

<div id="content">

<div id="column-left">

</div>

<ul id="top">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>	
</ul>

<div id="column-center">

</div>


<div id="column-right">

	<h3>Noticias</h3>
	<ul>

		<li>
			<img src="images/Kanye West.jpg" width="150px" alt="img"/>
			<p></p>
		</li>
		<li>
			<img src="images/Kanye West.jpg" width="150px" alt="img"/>
			<p></p>
		</li>
		<li>

	</ul>
</div>

</div>

</body>
</html> 
Código:
* {margin:0px ; padding:0px ; border: 0px;}
ul{list-style:none;}
img{border: 0px;}

a { text-decoration:none; color: #99cccc}
a:link { text-decoration:none }
a:visited { text-decoration:none }
a:hover { text-decoration:underline }
a:active{ text-decoration:none }


body {
	font-family: Dotum,Century Gothic, Arial;
	background-color: #f2ecec;
}

/*------------------------------------------*/

#header{
	background-color: #6E6E6E;
	width: 100%;
	height: 40px;
}

#content{
	border-bottom: 5px solid black;
	overflow: hidden;
}

#top{
	float: left;
	width: 960px;
	margin: 20px 0px 0px 40px;
	padding-bottom: 5px;
	border-bottom: 1px solid #b3b3b3;
	background-color: green;
}

#top ul{
	width: 504px;
	margin: 50px 0px 0px 0px;
}

#top li{
	width: 120px;
	height: 120px;
	float: left;
}


#column-left{
	float: left;
	width: 200px;
	height: 500px;
	background-color: yellow;
}

#column-center{
	float: left;
	width: 550px;
	height: 300px;
	margin: 20px 0px 0px 40px;
	background-color: blue;
}


#column-right{
	float: left;
	width: 400px;
	margin: 20px 0px 0px 10px;
	overflow: hidden;
}

#column-right ul{
	width: 400px;
	margin: 0px 0px 0px 0px;
}

#column-right ul li{
	float: left;
	width: 400px;
	margin: 0px 0px 15px 0px;
	z-index: 1;
}

#column-right ul li p{
	float: left;
	width: 240px;
	height: 100px;
	margin: 0px 0px 0px 10px;
	background-color: red;
}

#column-right img{
	float: left;
	width: 150px;
}
Perdonadme si la pregunta es muy básica, pero estoy aprendiendo a programar. Cualquier comentario o consejo acerca del código, ajeno a la pregunta será bien recibido, ya que me imagino que tendrá muchos fallos, porque como he dicho, soy bastante novato.

Un saludo y gracias de antemano ;).
  #2 (permalink)  
Antiguo 20/07/2012, 09:11
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Diferentes estilos en navegadores distintos

no tienes zoom en IE?
  #3 (permalink)  
Antiguo 20/07/2012, 12:00
Avatar de Oscar_Hidro  
Fecha de Ingreso: septiembre-2011
Ubicación: Aguascalientes, Mexico.
Mensajes: 200
Antigüedad: 12 años, 5 meses
Puntos: 25
Respuesta: Diferentes estilos en navegadores distintos

Que tal @Fonsiman, bienvenido al diseño web. A partir de ahora verás que cualquier cosa que quieras hacer, no se verá de igual manera en los navegadores, y peor aún, cosas que no funcionarán como es debido en IE

Pero que no cunda el pánico. Para todo hay alternativas y todo se puede hacer y hacerlo funcionar para todos los navegadores.

Dependiendo de que es lo que vayas necesitando, te irás dando cuenta que alternativas tienes que buscar.

En este caso en particular existe la opción de los llamados "hacks" para ie.

Simplemente se trata de insertar en tu css lo siguiente:

Código CSS:
Ver original
  1. #div{
  2.       width:500px;  // Pixeles de largo
  3.       height:300px; // Pixeles de ancho
  4.       *height:200px; // Pixeles de ancho para IE 7 y versiones anteriores
  5. }

Si te fijas, nada más es cuestión de repetir la propiedad con un asterisco(*) antes, para que ese atributo sea nada mas para los exploradores de IE7 y versiones anteriores. Te dejo un link para que investigues mas acerca de esto:

http://www.racotecnic.com/2010/02/cs...-opera-safari/

  #4 (permalink)  
Antiguo 20/07/2012, 16:00
 
Fecha de Ingreso: septiembre-2010
Mensajes: 13
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Diferentes estilos en navegadores distintos

Muchas gracias a ambos. @memoadian, no, no tengo zoom en IE, es más, en Firefox se ve de forma muy similar a IE.

@Oscar_Hidro, agradezco tu bienvenida y tu ayuda. De hacks ya había leído, pero lo que realmente me raya es lo que he dicho antes, que en Firefox se ve parecido a IE, cuando normalmente (si no me equivoco) Firefox y Chrome tampoco suelen dar muchos problemas en ese aspecto. Pero lo que de verdad me raya es que la calidad de las imágenes que pongo es mucho peor en Firefox e IE.

Que yo sepa ésto no tiene que ver con poner un hack, si me equivoco, por favor, decídmelo. De todas formas, muchas gracias por todo!
  #5 (permalink)  
Antiguo 23/07/2012, 00:31
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 1 mes
Puntos: 57
Respuesta: Diferentes estilos en navegadores distintos

Hola Fonsiman, que tal.

Lo que tu necesitas en un Reset CSS. Y tiene que ser la primera hoja de estilos a la que hagas referencia en tu pagina web y a partir de ahi empezar a crear tu reglas ya es una buena practica al momento de maquetar y aplicar estilo.

Con una reset.css aseguras que tu diseño desde el principio se vea lo mas parecido en todos los navegadores con pocas opciones alternas y evitar el uso de hacks que no pasan la validación.

Para HTML5 yo ocupo el siguiente html5-reset.css.

Los reset's css anteriormente citados son ejemplos no determinantes en todo diseño o maquetacion, ya que tu mismo puedes crear uno propio pero sirven para saber lo que debes tener en cuenta al momento de realizar diseños web.

Es necesario aclarar que el uso de un reset.css puede ser útil en caso de que tus reglas css no sobre-escriben todos los valores que el navegador tiene por defecto ya que si se trata de un diseño web cuyo css termina por sobre-escribir todas los valores que adquieren los elementos presentes de un documento html, el la hoja de reset termina por ser innecesario.

Te dejo un par de artículos al respecto:
- Si al reset.css
- No al reset.css

Última edición por gebremswar; 23/07/2012 a las 00:42

Etiquetas: chrome, distintos, estilos, hover, html, imagenes, navegadores, tamaño, fondo
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 07:23.