[Ovillo] Problema con capa position:absolute en IE6

Mon, 05 Oct 2009 08:39:26 -0700 

Hola,

Me está dando unos problemas la cabecera de una Web y no soy capaz de 
dar con la solución. La estrucutra que tengo es la siguiente. Tengo una 
capa contenedor donde aplico el ancho de la Web y la centro. A 
continuación tengo un encabezado h1 con un texto, después una capa 
id="cabecera" y dentro de esta capa tengo una imagen con el logo de la 
empresa enlazada a la página de inicio flotada a la derecha y un texto 
que también está flotado a la derecha. El caso es que dentro de esta 
misma capa tengo una lista ul con diferentes funcionalidades que quiero 
colocar en la parte derecha de la Web, para ello le he puesto al ul 
position:absolute; y me funciona en todos los navegadores menos en IE6. 
Sin embargo si lo primero que pongo es la lista ul con las 
funcionalidades justo antes del h1 se ve correctamente es como si se 
ocultara por detrás de la capa cabecera o contenidor, he probado con el 
z-index pero nada ¿sabéis que es lo que puede estar pasando? Os pego el 
código para que os hagáis una idea mejor:

HTML:

<div id="contenedor">
        <h1 id="h1cabecera">Título de la Web></h1>
       
        <div id="cabecera">
            <a href="index.php" title="Ir a la página de inicio"><img 
src="imagenes/logo.gif" alt="Logotipo" class="logo" /></a>
            <p class="oculto"><a href="#contcentral" title="saltar 
men&uacute;" accesskey="i">Saltar men&uacute;</a></p>
            <div id="txtcab"><p>Bienvenido a mi página Web</p></div>
          
           
            <ul id="funcionalidades">
                <li id="finicio"><a href="index.php" title="Ir a la 
p&aacute;gina de inicio" accesskey="i">Inicio</a></li>
                <li id="fcontacta"><a href="contacta.php" title="Ir a la 
p&aacute;gina de contacto" accesskey="c">Contacta</a></li>
                <li id="fmapaweb"><a href="mapaweb.php" title="Ir a la 
página Mapa Web" accesskey="m">Mapa Web</a></li>
                <li id="frecomendar"><a href="recomendar-amigo.php?id=<? 
echo $id; ?>&amp;url=<? echo $urlamig; ?>" title="Recomendar a un amigo" 
accesskey="r">Recomendar a un amigo</a></li>
            </ul>
       </div>

CSS:

#contenedor {
    width:60em; margin:auto; text-align:left;
}

h1#h1cabecera {
    color:#FFF; font-size:0.63em; line-height:1.80em; text-align:center; 
font-weight:normal; margin:0;
}

#cabecera {
    text-align:left; position:relative;
}

img.logo {
    display:block; float:left; margin:17px 0 0 20px; border:0;
}

div#txtcab {
    float:left; margin:29px 0 0 57px; width:30em;
}

#txtcab p {
    font-size:0.63em; color:#902444; margin:0;
}

ul#funcionalidades {
    margin:0; padding:0; border:0; list-style-type:none; 
position:absolute; top:73px; right:40px; z-index:500;
}

#funcionalidades li {
    display:block; float:left; width:1.56em; height:1.38em; 
background-color:#E5CCD3; text-indent:-99999em; margin:0 3px 0 0;
}

#funcionalidades li a:link, #funcionalidades li a:visited, 
#funcionalidades li a:hover {
    display:block; float:left; width:1.56em; height:1.38em;
}

Un saludo,

Nacho


_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a