Foros del Web - Ver Mensaje Individual - div medio desaparece al ponerse sobre un enlace (ie)

agamino · #3 (**permalink**) 17/10/2007, 09:18

Hola

Parece que tengo la solución a tu problema, he metido el pie dentro del container y he realizado un cambio al estilo del pie para conservar el estilo del borde.

Espero que te sirva:

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">
<!--

#contenedor {
    border: 1px solid #999999;
    height: 410px;
    width: 760px;
    background-color: #FFFFFF;
    text-align: center;
    margin:0 auto 0 auto;
    height: auto ! important;
}
#cabecera {
    background-color: #000000;
    height: 50px;
    width: 760px;
}
#menu {
    background-color: #E4E4E4;
    height: 20px;
    width: 760px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
}
#botones {
    background-color: #F2F2F2;
    height: 40px;
    width: 760px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
}
body {
    text-align: center;
    background-color: #EBEBEB;
}
#pie {
    background-color: #E4E4E4;
    height: 20px;
    width: 760px;
    text-align: center;
    margin:0 auto 0 auto;
    /*border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #999999;*/
    border-top: 1px solid #999999;
}
#menu_con {
    width:160px;
    float:left;
    border-right-width: 1px;
    border-right-style: dashed;
    border-right-color: #999999;
}
#conte_in {
    width:590px;
    float:right;
}
#contenido {
    height: auto ! important;
    overflow: hidden;
}
/*Zona menú superior*/

#menu {
    font: 70% "Verdana", Arial, Helvetica, sans-serif;
}

#menu ul, li {
    list-style-type: none;
    padding-top: 1px;
}

#menu ul {
    margin: 0;
    padding: 0;
}

#menu li {
    float: left;
}

#menu a {
    text-decoration: none;
    color: #8D8D8D;
    /*background: #F0F7FC;*/
    display: block;
    text-align: center;
    border: 1px solid #ffffff;
    border-width: 0px 1px 0px 0;
    padding-top: 2px;
    padding-right: 15px;
    padding-bottom: 3px;
    padding-left: 15px;
}


#menu a.primero {
    /*border-left: 5px solid #ACCFE8;
    background-image: url(../img/bsobre.jpg);
    background-repeat: repeat-x;*/
    color: #000000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #F3A101;
}

#menu a:hover {
    color: #000000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #F3A101;
}

/*Zona menú botones*/

#botones {
    font: 70% "Verdana", Arial, Helvetica, sans-serif;
}

#botones ul, li {
    list-style-type: none;
    padding-top: 1px;
}

#botones ul {
    margin: 0;
    padding: 0;
}

#botones li {
    float: right;
}

#botones a {
    text-decoration: none;
    color: #8D8D8D;
    /*background: #F0F7FC;*/
    display: block;
    text-align: center;
    border: 1px solid #ffffff;
    border-width: 0px 1px 0px 0;
    padding-top: 2px;
    padding-right: 15px;
    padding-bottom: 3px;
    padding-left: 15px;
}


#botones a.primero {
    /*border-left: 5px solid #ACCFE8;
    background-image: url(../img/bsobre.jpg);
    background-repeat: repeat-x;*/
    color: #000000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #F3A101;
}

#botones a:hover {
    color: #000000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #F3A101;
}
-->
</style>
</head>

<body>
    <div id="contenedor">

        <div id="cabecera">
        </div>

        <div id="menu">
            <ul>
                <li><a href="menu1.php" class="primero">menu1</a></li>
                <li><a href="menu1.php">menu1</a></li>
                <li><a href="menu1.php">menu1</a></li>
                <li><a href="menu1.php">menu1</a></li>
                <li><a href="menu1.php">menu1</a></li>
            </ul>
        </div>

        <div id="botones">
            <ul>
                <li><a href="menu.php"><img src="img/nuevocon.gif" alt="nuevocon" width="48" height="48" border="0" /></a></li>
                <li><a href="menu.php" class="primero"><img src="img/nuevocon.gif" alt="nuevocon" width="48" height="48" border="0" /></a></li>
            </ul>
        </div>

        <div id="contenido">
            <div id="menu_con">
                <br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                asd<br />
                <br />
            </div>

            <div id="conte_in">
                asd<br />
                asas<br />
                asas<br />
            </div>

        </div>

        <div id="pie">
        </div>
    </div>

</body>
</html>