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 ;).