Hola gente
Tengo un problema con la alineación de unas imágenes en una página que estoy creando, el problema es que en firefox la página se ve perfecta, pero en chrome, netscape, opera y safari las imágenes se ubican mal.
Los códigos (en versión resumida) son:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>Mi pagina</title>
</head>
<body>
<div id="contenedor">
<img class="cabecera" src="images/cabecera.png" alt="cabecera">
<img class="logo" src="images/logo.png" alt="logo">
<div id="lateral">
<p>este es el div lateral</p>
</div>
<img class="oficina" src="images/oficina.jpg" alt="oficina">
<div id="botonera">
<p>acá van los botones</p>
</div>
<div id="texto">
<h1>Acá va texto</h1>
</div>
</div>
</body>
</html>
En tanto que la hoja de estilo es:
Código HTML:
/* CSS Document */
html,body {
height:100%;
margin-top : 1px;
margin-right : 1px;
margin-bottom : 1px;
margin-left : 1px;
background-color : #050C81;
background-attachment : fixed;
background-position : top center;
font-family : "Times New Roman", serif;
}
p {
text-align : center;
}
h1 {
text-align : center;
background: orange;
padding-left : 250px
}
h2 {
text-align : left;
font-weight : bold;
padding-left : 280px
}
h4 {
text-align : left;
padding-left : 350px
}
img.cabecera {
position : absolute;
float : right;
width : 780px;
height : 213px;
z-index : 4;
}
img.logo {
max-width : 100%;
max-height : 213px;
float : left;
margin-top : 30px;
}
img.oficina {
position: absolute;
margin-top : 10%;
margin-left : 16%;
z-index : 3;
}
#contenedor {
overflow: hidden;
width: 450px;
border: 1px;
background: #03097F;
padding: 10px;
z-index : 1;
}
#lateral {
float : left;
max-width : 100%;
max-height : 213px;
background-color : #03097F;
}
#botonera{
position : absolute;
width : 250px;
height : 400px;
background-color : #83848E;
margin-top : 210px;
margin-left : 1px;
z-index : 5;
}
#texto {
position : absolute;
margin-top : 210px;
margin-left : 1px;
padding-top : 130px;
z-index : 2;
background-color : #FCF803;
width : 100%;
height : 150%;
}
El problema radica en que chrome, netscape, y opera, la img.cabecera se alinea a la izquierda (a pesar de que es float-right) y me oculta la img.logo.
En tanto que en safari además me mueve también la img.oficina despalzandola hacia la derecha.
He probado varias cosas que estuve viendo en internet pero no logro hacer que las cosas funcionen bien.
¿En que le estoy errando?
Desde ya gracias por la ayuda...