problema con alineación de imágenes flotantes enchrome

catanzaro99 · #1 (**permalink**) 11/01/2014, 16:23

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

pzin · #2 (**permalink**) 12/01/2014, 05:56

Cita:

Iniciado por catanzaro99

se alinea a la izquierda (a pesar de que es float-right)

Tendrá que ver con que tiene definida una posición absoluta.

catanzaro99 · #3 (**permalink**) 12/01/2014, 16:10

Hola pzin

Lamentablemente no es ese el problema, fué una delas primeras modificaciones que hice, probé con position : relative; pero no conseguí alinear la imagen a la derecha, el problema es que solo logro ver bien la página en firefox.
Ahora puse las imágenes en sendos div que alinee a derecha he izquierda, pero no como flotantes.
Igualmente gracias por tu respuesta...