div medio desaparece al ponerse sobre un enlace (ie)

haven · #1 (**permalink**) 17/10/2007, 05:10

Hola buenas, tengo este código, en principio funciona bien en firefox pero en explorer al ponerme encima de un menu1 el div se repliega, alguien sabe a que puede deberse esto?

Código HTML:

<!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;
}
#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" id="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" id="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>

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

Un salaludo

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

Bueno, le he estado echando un vistazo rápido y probando algunas cosas. En principio me he fijado en que después de replegarse el contenido, si pasas el ratón por encima del botón inactivo de la derecha se vuelve a desplegar, aunque supongo que ya te habrías dado cuenta.

Por cierto, el id primero está duplicado, prueba a utilizar una clase.

Luego lo intentaré otra vez, si consigo algo te lo haré saber.

Un saludo.

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>

haven · #4 (**permalink**) 17/10/2007, 10:17

gracias agamino, funciona perfectamente, anteriormente habia puesto el pie dentro pero no lo podía posicionar, je, eso antes de realizar los últimos cambios, aunque es curioso lo que hacía, la verdad, y si, si me habia dado cuanta de que al ponerme encima de un menú se recogia y sobre el otro menú se extendia, jaja, vaya cosas extrañas.

Un saludo y gracias