Foros del Web » Creando para Internet » CSS »

div medio desaparece al ponerse sobre un enlace (ie)

Estas en el tema de div medio desaparece al ponerse sobre un enlace (ie) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/10/2007, 05:10
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 22 años, 1 mes
Puntos: 2
div medio desaparece al ponerse sobre un enlace (ie)

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
__________________
asp, php, .net, adaptandose a las necesidades
  #2 (permalink)  
Antiguo 17/10/2007, 09:10
Avatar de agamino  
Fecha de Ingreso: octubre-2007
Ubicación: Badajoz, España
Mensajes: 8
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: div medio desaparece al ponerse sobre un enlace (ie)

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.
  #3 (permalink)  
Antiguo 17/10/2007, 09:18
Avatar de agamino  
Fecha de Ingreso: octubre-2007
Ubicación: Badajoz, España
Mensajes: 8
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: div medio desaparece al ponerse sobre un enlace (ie)

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>
  #4 (permalink)  
Antiguo 17/10/2007, 10:17
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 22 años, 1 mes
Puntos: 2
Re: div medio desaparece al ponerse sobre un enlace (ie)

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
__________________
asp, php, .net, adaptandose a las necesidades
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:31.