Hola. espero puedan ayudarme! porque me estoy volviendo loco con esto!!!
Lo que sigue es algo muy raro, al menos para mí, que estoy tratando de arreglar desde hace 3 días.
El problema:
( solo en firefox 2, no he probado en el 3)
Despues de quitar código para ver simplemente el error, me ha quedado un menu sobre el lado izquierdo, y una columna sobre la derecha. Esta columna derecha, a veces aparece en la posición que debe y otras comienza a la altura de donde termina el menu de la izquierda. Es decir que cambia su posición "Y", a veces sí, a veces no.
Aquí se ve algo pequeño, pero es horrible estar desarrollando una pagina, donde el cliente entra y a veces ve todo desarmado.
He puesto todas las opciones del menu para que recarguen la pagina (error.html). Y es ahí donde se ve el error. Quizás haya que repetir la operación 10 o 20 recargas, hasta que PUM!!!! la caja, aparece más abajo, donde no debiera.
Por ejemplo, hagan click varias veces sobre la opcion del menú "alojamiento".
aquí pueden ver el error:
http://www.loharas.com/error/error.html
Por si les es más comodo, pongo abajo todo el código.
Una cosa más, si quito algunas opciones del menú, el error parece no repetirse. ¿Será que firefox no puede mantener un menu de muchas opciones????? no se.
( el menu lo hice en base a los que aparecen en
http://www.cssplay.co.uk )
a veces el error solo se reproducía luego de cerrar todo el firefox y volverlo a abrir.
bueno este es el código del error.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0014)about
:internet -->
<HEAD><TITLE>prueba</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=imagetoolbar content=no>
<style type="text/css">
<!--
.contenedor {
margin-left: auto;
margin-right: auto;
width: 1000px;
display:table;
}
#columna_izquierda {
float: left;
width: 143px;
}
#columna-derecha {
float: right;
width: 160px;
height: 100px;
background-color: #00FF00;
}
.menu {
FONT-SIZE: 10px;
WIDTH: 135px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
POSITION: relative;
HEIGHT: 235px;
z-index: 100;
}
.menu UL LI A {
DISPLAY: block;
FONT-SIZE: 10px;
WIDTH: 133px;
COLOR: #000000;
LINE-HEIGHT: 19px;
HEIGHT: 20px;
TEXT-ALIGN: left;
background-color: #CCCCCC;
}
.menu UL LI A:visited {
DISPLAY: block;
FONT-SIZE: 10px;
WIDTH: 133px;
LINE-HEIGHT: 19px;
HEIGHT: 20px;
TEXT-ALIGN: left;
background-color: #CCCCCC;
}
.menu UL {
LIST-STYLE-TYPE: none;
}
.menu UL LI {
FLOAT: left; MARGIN-RIGHT: 1px; POSITION: relative;
}
.menu UL LI UL {
DISPLAY: none;
}
/* specific to non IE browsers */
.menu UL LI:hover A {
COLOR: #FFFFFF;
background-color: #999999;
}
.menu UL LI:hover UL {
DISPLAY: block; LEFT: 144px; WIDTH: 134px; POSITION: absolute; TOP: 0px;
}
.menu UL LI:hover UL LI A.hide {
BACKGROUND: #cccccc; COLOR: #000;
}
.menu UL LI:hover UL LI A:hover {
COLOR: #FFFFFF;
background-color: #999999;
}
.menu UL LI:hover UL LI:hover A {
COLOR: #FFFFFF;
background-color: #999999;
}
.menu UL LI:hover UL LI:hover A.hide {
WIDTH: 134px;
}
.menu UL LI:hover UL LI UL {
DISPLAY: none
}
.menu UL LI:hover UL LI A {
DISPLAY: block;
WIDTH: 134px;
COLOR: #000;
}
.menu UL LI:hover UL LI:hover UL {
DISPLAY: block; LEFT: 145px; COLOR: #000; POSITION: absolute; TOP: 0px;
}
.menu UL LI:hover UL LI:hover UL LI A {
DISPLAY: block; BACKGROUND: #cccccc; WIDTH: 134px; COLOR: #000;
}
.menu UL LI:hover UL LI:hover UL LI A:hover {
BACKGROUND: #999999; COLOR: #fff;
}
-->
</style>
</head>
<body>
<div class="contenedor">
<div id="columna_izquierda">
<DIV class=menu>
<UL>
<LI><A class=hide href="error.html">La ciudad</A>
<UL>
<LI><A href="error.html">Como llegar</A></LI>
<LI><A href="error.html">Estadísticas</A></LI>
</UL>
</LI>
<LI><A class=hide href="error.html">Alojamiento</A>
<UL>
<LI><A href="error.html">Hoteles</A></LI>
<LI><A href="error.html">Aparts Hotel</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Donde comer</A>
<UL>
<LI><A href="error.html">Recomendados</A></LI>
<LI><A href="error.html">Confiterías</A></LI>
</UL>
</LI>
<LI><A class=hide href="error.html">Inmobiliarias</A>
</LI>
<LI><A class=hide href="error.html">Viajes y Turismo</A>
<UL>
<LI><A href="error.html">Agencias de Turismo</A></LI>
<LI><A href="error.html">Rent a car</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Agenda de Eventos</A>
<UL>
<LI><A href="error.html">Recitales-Teatro</A></LI>
<LI><A href="error.html">Deportivos</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Oferta Educativa</A>
<UL>
<LI><A href="error.html">Institutos Terciarios</A></LI>
<LI><A href="error.html">Idiomas</A></LI>
<LI><A href="error.html">Academias</A></LI>
<LI><A href="error.html">Capacitación</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Salud</A>
<UL>
<LI><A href="error.html">Centros de Salud</A></LI>
<LI><A href="error.html">Obras Sociales</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Entretenimientos</A>
<UL>
<LI><A href="error.html">Discos</A></LI>
<LI><A href="error.html">Pubs</A></LI>
<LI><A href="error.html">Bares</A></LI>
<LI><A href="error.html">Casinos</A></LI>
<LI><A href="error.html">Cybers y juegos</A></LI>
<LI><A href="error.html">Bowling</A></LI>
<LI><A href="error.html">Pools</A></LI>
<LI><A href="error.html">Cines</A></LI>
</UL>
</LI>
<LI><A class=hide
href="error.html">Links de interes</A>
</LI>
</UL>
</DIV>
</div>
<div id="columna-derecha"> </div>
</div>
</body>
</html>
gracias, espero puedan ayudarme.