Foros del Web » Creando para Internet » CSS »

caja que cambia posicion Y aleatoriamente, en firefox 2.0

Estas en el tema de caja que cambia posicion Y aleatoriamente, en firefox 2.0 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/12/2008, 09:30
 
Fecha de Ingreso: noviembre-2008
Mensajes: 270
Antigüedad: 9 años, 1 mes
Puntos: 1
caja que cambia posicion Y aleatoriamente, en firefox 2.0

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&iacute;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&iacute;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&oacute;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">&nbsp;</div>


</div>

</body>
</html>


gracias, espero puedan ayudarme.
  #2 (permalink)  
Antiguo 28/12/2008, 10:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: caja que cambia posicion Y aleatoriamente, en firefox 2.0

Hola Maue75
Por partes:
1º: procura escribir preferentemente en minúsculas tu código.
2º) las opciones de 2º nivel (la ciudad--> "cómo llegar" y "estadísticas") se despliegan demasiado a la derecha, con lo que desaparecen antes de alcanzarlos con el ratón:
Solución:
Cambia en el css:
Cita:
.menu UL LI:hover UL {
DISPLAY: block; LEFT: 93px; WIDTH: 134px; POSITION: absolute; TOP: 0px;
}
3º Tienes cantidad de código repetido. Sólo como muestra:
Cita:
#columna_izquierda {error.html (línea 9)
display:inline;
float:left;
}

#columna_izquierda {error.html (línea 19)
float:left;
width:143px;
}
************
#columna_izquierda {error.html (línea 9)
float:left;
width:143px;
}

#columna_izquierda {error.html (línea 19)
float:left;
width:143px;
}
Solución:
Límpia y simplifica el css.

Y sobre la maquetación, yo cambiaría a:
colocar 'columna_izquierda' dentro de columna_derecha' y flotarla a la izquierda.
'columna_derecha' otorgarle un border-left ligéramente mayor a la anchura de la columna_izquierda' (exactamente, su anchura más la separación que quieras mantener entre ambas columnas) y flotarla a la derecha y con una anchura de...


Pero ahora que recuerdo, el esquema lo tiene muy bien hecho Mikmoro en esta página y guarda en tus favoritos esta dirección. Te ahorrarás muchas búsquedas y quebraderos de cabeza

Mira la forma tan limpia de su código (css+html), creo que podrás adaptarlo perfectamente a tu página.

Cualquier duda al respecto, por aquí andaremos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/12/2008, 15:23
 
Fecha de Ingreso: noviembre-2008
Mensajes: 270
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: caja que cambia posicion Y aleatoriamente, en firefox 2.0

Ahi he realizado las correcciones que me sugeriste kseso, aunque no he podido ver bien el tema de las repeticiones de código.

Estoy trabajando con 3 columnas de la siguiente manera:
div contenedor
div col_izquierda float left
/div

div col_derecha float right
/div

div_centro margin left, para separarse de la col izquierda
/div

/div


Podría tratar de modificar la maquetación hacia el ejemplo que mencionaste, quizás con eso el problema se solucione. Voy a ver si puedo hacerlo. El ejemplo que mencionas trabaja con 2 columnas, así que voy a tratar de transformarlo para 3 columnas.
  #4 (permalink)  
Antiguo 29/12/2008, 19:02
 
Fecha de Ingreso: noviembre-2008
Mensajes: 270
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: caja que cambia posicion Y aleatoriamente, en firefox 2.0

Kseso, finalmente modifique la forma de maquetar el sitio, y el problema desapareció.

Modifique esta maquetación anterior:
div .class contenedor
div columna_izquierda float left
/div

div columna_derecha float right
/div

div columna_central
/div
/div


por esta:

div #contenedor
div #contenedor_derecha float right
div .class columna_izquierda float left
/div

div .class columna_central float left
/div

div .class columna_derecha float right
/div
/div
/div


Son casi iguales pero parece que la segunda es más robusta.
Aclaro que la primera es la que ví mencionadas en algunos sitios como la ideal para formatos de 3 columnas. Incluso en el link que mencionaste, araudi.net.

Ahora, es increíble lo suceptible que pueden ser algunos elementos a como maquetamos el sitio. Es para volverse loco!.


Bueno, gracias por los concejos kseso, finalmente me dieron resultado.
  #5 (permalink)  
Antiguo 30/12/2008, 06:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: caja que cambia posicion Y aleatoriamente, en firefox 2.0

10-4 Maue75

Me alegra que mis sugerencias ayudaran a que tú solito lo hayas arreglado.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 04:56.