Hola Rafa,
Rafa García escribió:
Buenas a todos; tengo un problema y por mas que testeo no le encuentro
la solucion; tengo una plantilla css en la que dos de las divisiones las
posiciono en absoluto (fecha y busqueda). Firefox y Opera para Windows
me las muestran correctamente pero explorer 6 las hace desaparecer.
Hace poco envié dos mails seguidos por un problema similar con las cajas
posicionadas en IE. Uno lo resolví con ayuda de Inti Castro y otro aún
está esperando a que me haga de paciencia para volver a entrentarlo.
En el hilo del problema resuelto comenté que, aparentemente, el bug
afecta a un div con position: absolute que se encuentre antes de divs
con float: left | right. Variando el width o poniéndole margin negativo
a las cajas flotadas logramos que la caja posicionada reaparezca.
Sin embargo, en tu caso no funcionó esa solución, así que toda la
explicación anterior podés atribuirla a que hoy me levanté escribidor.
Lo que hice fue editar tu código y modificar algunas cosas. En
principio, puse #fecha y #busqueda dentro de #cabecera (así se sienten
contenidos y no desaparecen). Y de paso, eliminé o reemplacé un par de
divs que me parecieron innecesarios.
En Firefox la fecha queda un poco más abajo, pero no creo que sea
problema corregirlo.
Bueno, aquí va el código editado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Eurowin TuWeb+ Plantilla 04</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #eee;
background-image: url(imagenes/fondo_plantilla04_2.gif);
background-repeat: repeat-x;
}
#contenedor {
font-size: 1.1em;
margin: 43px 0;
padding: 0;
width: 760px;
background-color: #FFFFFF;
}
#cabecera {
width: 760px;
float: right;
background-color: #FFFFFF;
height: 120px;
background-image: url(imagenes/carretera_plantilla04.jpg);
}
#fecha {
color: #000000;
position: absolute;
left: 10px;
top: 17px;
}
#busqueda {
color: #000000;
position: absolute;
left: 400px;
top: 15px;
margin: 0px;
padding: 0px;
}
#busqueda input {
width: 200px;
margin-right: 5px;
margin-left: 5px;
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-size: 10px;
color: #4F6781;
background-color: #ECECEC;
border: 1px solid #CCCCCC;
padding-left: 2px;
padding-right: 2px;
}
#busqueda a:link, #busqueda a:visited {
text-decoration: none;
color: #CCCCCC;
}
#busqueda a:hover {
text-decoration: underline;
color: #FFCC00;
}
#menu {
background-color: #FFFFFF;
float: left;
width: 255px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
#menu a:link, #menu a:visited {
color: #666666;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
text-decoration: none;
}
#menu a:active {
color: #006699;
text-decoration: none;
}
#menu ul.menuempresa {
list-style-type: none;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
#menu ul.menuempresa li {
font-weight: bold;
padding: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #790000;
}
#menu ul.menuempresa li a {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
height: 100%;
display: block;
}
#menu ul.menuempresa li a:hover {
color: #003366;
background-color: #ECECEC;
}
#login {
background-color: #FFFFFF;
color: #FFFFFF;
float: left;
clear: left;
width: 190px; /*el cuadro original tiene 240 px de ancho*/
height: 170px;
margin-left: 10px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 30px;
padding-top: 60px;
padding-right: 20px;
padding-bottom: 10px;
background-image: url(imagenes/postitentero_plantilla04.gif);
background-repeat: no-repeat;
background-position: top;
}
/*#fondologin {
background-color: #666666;
width: 200px;
height: 100%;
}*/
#cuerpo {
position: relative;
width: 500px;
float: right;
/*clear: both; Aqui peta el tema*/
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
/*border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;*/
}
#cuerpo_texto {
margin: 20px;
}
#pie {
background-color:#ECECEC;
color: #333333;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
width: 760px;
text-align: center;
bottom: 0px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #006699;
}
#pie p {
margin-top: 5px;
margin-bottom: 5px;
}
-->
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div class="logo_izquierda"><!--<img src="" width=150
height=100>-->Aqui va el logo</div>
<p id="fecha">Miercoles, 30 de Noviembre de 2004</p>
<form id="busqueda">
Buscar en su web<input name="" type="text">
<a href="#">Buscar >> </a>
</form>
</div>
<div id="menu">
<ul class="menuempresa">
<!--menu con un máximo de diez elementos-->
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
<div id="login">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Mauris euismod pharetra magna.
</div>
</div>
<!--<div id="login">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
euismod pharetra magna. In accumsan wisi sit amet lectus. Curabitur sit
amet est. Ut ipsum turpis, interdum eu, viverra sit amet, tristique non,
dolor. Integer molestie, risus sit amet commodo tincidunt, lectus ligula
eleifend tortor, eget feugiat nibh enim ac diam. Curabitur dui. In
dapibus, mi quis hendrerit mollis, mi eros placerat odio, quis faucibus
metus mauris at elit. Pellentesque nonummy. Suspendisse non mauris.
Quisque condimentum. Sed ultricies erat non neque. Aenean ac mauris.
Maecenas lorem libero, consectetuer id, vestibulum sed, commodo ac,
augue. Vestibulum mauris purus, eleifend in, suscipit eu, gravida et,
leo. Cras ac justo. Fusce rhoncus consequat est. Maecenas at elit nec
risus consequat faucibus. Curabitur malesuada ligula sed dui tincidunt
sagittis. Curabitur eget diam. Pellentesque ut diam sed felis imperdiet
iaculis.
</div>-->
<div id="cuerpo">
<div id="cuerpo_imagen"><img src="imagenes/coche500.jpg" width="500"
height="200"></div>
<div id="cuerpo_texto">
<!--<h1>Presentación</h1>-->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse adipiscing. Quisque molestie elit a urna. Sed ac diam at mi
porttitor posuere. Phasellus vestibulum tempus lacus. Phasellus nibh.
Vivamus ut est et lorem dapibus venenatis. Donec scelerisque viverra
leo. Aliquam erat volutpat. Nulla adipiscing justo a odio. Curabitur
eros. Proin sit amet nulla non nunc commodo gravida. Mauris ut risus
bibendum pede fringilla posuere. Pellentesque ligula leo, interdum et,
iaculis eu, malesuada et, sapien. Curabitur erat risus, porta ac,
gravida sed, venenatis vel, lacus. Pellentesque sollicitudin. Maecenas
eget tellus vitae eros congue varius. Nulla sed urna aliquam nunc cursus
scelerisque. Mauris eros. Etiam in elit.</p>
<p>Sed aliquet, ipsum sed accumsan molestie, lacus dolor pharetra
purus, id semper magna nunc vitae velit. Donec nunc lectus, mollis eu,
pulvinar in, sodales nec, neque. Sed nec nisl. Aliquam sagittis posuere
velit. Donec vestibulum, erat vel consectetuer condimentum, velit nibh
tempus risus, vitae cursus quam orci aliquet felis. Nulla lorem.
Phasellus eu enim gravida odio fermentum ultricies. Aenean erat quam,
convallis vel, vehicula sit amet, sodales et, ligula. Integer at diam.
Aenean scelerisque. Nam volutpat fringilla wisi. .0
Pellentesque molestie ultrices est. Nullam quam odio, laoreet at,
sagittis in, faucibus adipiscing, elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse adipiscing. Quisque molestie elit a urna. Sed ac diam at mi
porttitor posuere. Phasellus vestibulum tempus lacus. Phasellus nibh.
Vivamus ut est et lorem dapibus venenatis. Donec scelerisque viverra
leo. Aliquam erat volutpat. Nulla adipiscing justo a odio. Curabitur
eros. Proin sit amet nulla non nunc commodo gravida. Mauris ut risus
bibendum pede fringilla posuere. Pellentesque ligula leo, interdum et,
iaculis eu, malesuada et, sapien. Curabitur erat risus, porta ac,
gravida sed, venenatis vel, lacus. Pellentesque sollicitudin. Maecenas
eget tellus vitae eros congue varius. Nulla sed urna aliquam nunc cursus
scelerisque. Mauris eros. Etiam in elit.</p>
<p>Sed aliquet, ipsum sed accumsan molestie, lacus dolor pharetra
purus, id semper magna nunc vitae velit. Donec nunc lectus, mollis eu,
pulvinar in, sodales nec, neque. Sed nec nisl. Aliquam sagittis posuere
velit. Donec vestibulum, erat vel consectetuer condimentum, velit nibh
tempus risus, vitae cursus quam orci aliquet felis. Nulla lorem.
Phasellus eu enim gravida odio fermentum ultricies. Aenean erat quam,
convallis vel, vehicula sit amet, sodales et, ligula. Integer at diam.
Aenean scelerisque. Nam volutpat fringilla wisi. .0
Pellentesque molestie ultrices est. Nullam quam odio, laoreet at,
sagittis in, faucibus adipiscing, elit.</p>
</div>
</div>
<div id="pie">
<p>Su empresa está inscrita en el Registro Mercantil de Balaguer Folio
:12 Tomo :1 Seccion :1 Hoja :3º Inscripción :3º</p>
<p><strong>Su empresa</strong> - CIF. - Polígon Industrial - 25001
Mollerussa (Lleida) ESPAÑA - Tel. 973123456 - Fax. 973456784 -
[EMAIL PROTECTED]</p>
<p><a href="" target="_blank"
onClick="javascript:window.open('proteccion_datos.php','cabecera',
'width=450,height=300, scrollbars=yes');return false;">Protección de
datos</a></p>
</div>
</div>
</body>
</html>
--
Camilo Kawerín
27Sur comunicación & diseño
http://www.27sur.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
