Foros del Web » Creando para Internet » CSS »

Problemas Firefox/Explorer

Estas en el tema de Problemas Firefox/Explorer en el foro de CSS en Foros del Web. Bueno, lo típico, algo que hice se ve bien en Firefox y mal en Explorer (a veces es al revés). Así se ve el menú ...
  #1 (permalink)  
Antiguo 02/07/2006, 14:12
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Problemas Firefox/Explorer

Bueno, lo típico, algo que hice se ve bien en Firefox y mal en Explorer (a veces es al revés). Así se ve el menú en Firefox:



Y así en Explorer:



La cruz está puesta de fondo y por más cambios que hago no consigo que se vea igual on los dos navegadores. Este sería el código para cada tabla (en las imágenes se ven 2 tablas):

Código HTML:
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="archives">
<tr>
<td class="desc">
<h3><span></span><a href="#">Este es el link</a></h3>
<div></div>
</td>
</tr>
</table> 
Y este el código CSS:

Código HTML:
.archives .desc H3 {position:relative; padding-left:20px; padding-top:5px; padding-bottom:5px; margin:0px; font-size:12px; font-weight:normal; border-bottom:1px solid #fc3; background:#ffffcc;}
.archives .desc H3 A {position:relative;}
.archives .desc H3 SPAN {display:block; position:absolute; left:0px; top:0px; width:18px; height:18px; padding:0px; margin:0px; background:url(wii-araoff.gif) no-repeat center; cursor:pointer; z-index:10;}
.archives .desc DIV {display:none; padding:5px; border-bottom:1px solid #fc3;}
.archives .open DIV {display:block;}
.archives .open H3 SPAN {background:url(wii-araon.gif) no-repeat center;}
A ver si alguien sabe darme una explicación porque no entiendo a qué se debe el problema, muchas gracias por anticipado y si necesitais más datos pedirlos por favor.

PD: la URL a la web no la pongo para que no piensen que hago spam, pero si hace falta ver la web decídmelo, gracias.

PD2: me he quedado de piedra al darle a "vista previa" y que me saliera un mensaje de "sólo puedes poner enlaces después de 15 mensajes"... ¿entonces, cómo pido ayuda si no puedo poner ni un par de imágenes? ¿de qué hablo esos 15 mensajes, de videojuegos? Si yo sólo quiero un poco de ayuda...

Así que he cambiado los enlaces a las imágenes y hay que poner la URL bien para que se vean, gracias y perdón si eso molesta, pero si no lo hago nadie podrá ver cuál es el problema...

Última edición por Wii-Fi; 03/07/2006 a las 16:49
  #2 (permalink)  
Antiguo 02/07/2006, 15:31
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
no entiendo.. para que pones una tabla para simular una lista?? eso se debería hacer asi:
Código:
.list {
list-style-image: url('crucecita.jpg');
}

<ul class="list">
    <li><a href="#">Posts archivados</a></li>
    <li><a href="#">Lo mas destacado</a></li>
</ul>
ademas usar posiciones absolutas dentro de relativas en explorer tiene muchos bugs q ya ni me acuerdo de tantos q son...
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 02/07/2006, 16:26
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Hola carajodida (je, je, qué nombre más guapo), gracias por contestar!

Verás, lo de usar tablas tiene su explicación: entre las etiquetas div va texto que está oculto y cuando pinchas sobre el enlace, el texto que está entre la eiquetas a, el div se vuelve visible, para que me entiendas es como un desplegable, y al pinchar se muestra el texto y al volver a pinchar se oculta (esto lo hago con javascript, claro). También cuando se despliega el texto la crucecita cambia, por eso en la css hay dos gifs distintos usados como fondo...

Con estas imágenes lo verás mejor, son de una captura con Firefox y las cruces se ven donde quiero, aquí está cerrado:



Y aquí está abierto:



Espero que ahora se entienda mejor, todo funciona muy bien, nunca he tenido problemas pero al entrar ayer con el Explorer vi que las cruces no están donde yo pensaba, a ver si alguien sabe cómo solucionarlo sin tocar el código de las tablas...

Nuevamente pido perdón a los moderadores por las URLs a las imagenes, pero es que si no nadie podrá ayudarme. Y son a imágenes que he subido a imageshack así que no hay enlaces a ningún sitio ni nada, perdón si molesta...

Gracias!

Última edición por Wii-Fi; 03/07/2006 a las 16:56
  #4 (permalink)  
Antiguo 02/07/2006, 16:48
Avatar de Jar_life3  
Fecha de Ingreso: marzo-2006
Ubicación: Puebla
Mensajes: 48
Antigüedad: 11 años, 8 meses
Puntos: 0
Cual es mejor de los dos, yo los tengo pero no se cual usar mas

__________________
Jarchinson:-) fanatico quake all:si:
  #5 (permalink)  
Antiguo 02/07/2006, 17:06
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Cita:
Iniciado por Jar_life3
Cual es mejor de los dos, yo los tengo pero no se cual usar mas
Mmmm... Eso no me ayuda mucho a resolver el problema...

¿El mejor? La respuesta es sencilla: el que más te guste.
  #6 (permalink)  
Antiguo 02/07/2006, 18:27
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
sigo sin entender la justificación de usar tablas... se puede hacer lo mismo con la mitad de codigo con listas.
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 02/07/2006, 18:39
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Cita:
Iniciado por SiR.CARAJ0DIDA
sigo sin entender la justificación de usar tablas
Es la única forma en que he sabido hacerlo, y funciona, si no fuera por ese problema con la visualización del gráfico (que se desplaza a la derecha).

Cita:
Iniciado por SiR.CARAJ0DIDA
se puede hacer lo mismo con la mitad de codigo con listas.
¿Cómo? ¿Manteniendo la funcionalidad del menú desplegable?

De todas formas, lo mismo da si se hace con tablas o listas, ¿no? El único problema que tengo ahora es que el gráfico no aparece en el mismo sitio según el navegadr, eso es lo único que quiero ver si se puede solucionar, ¿alguna idea? Gracias!
  #8 (permalink)  
Antiguo 03/07/2006, 15:33
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Hola qué tal? Alguien tiene alguna idea de cómo solucionar este problemilla? gracias de nuevo!
  #9 (permalink)  
Antiguo 03/07/2006, 16:02
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
pone link a la pagina...
__________________
Internet Explorer SuckS
Download FireFox
  #10 (permalink)  
Antiguo 03/07/2006, 16:23
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 1 mes
Puntos: 3
Cita:
Es la única forma en que he sabido hacerlo, y funciona, si no fuera por ese problema con la visualización del gráfico (que se desplaza a la derecha).
¿Cómo? ¿Manteniendo la funcionalidad del menú desplegable?
Se puede prescindir de tablas si usas listas descriptivas. Es importante pensar enesa diferencia porque CSS afecta de forma diferente a tablas y listas:

Código:
<dl>
<dt><span></span><a>Este es el link</a></dt>
<dd>Este tag sustituye el div que usas</dd>
</dl>
dl y dd tienen display:block por default, pero dd presenta un sangrado, para quitarlo ponle margin:0

y a dt considerandolo como tu tabla.

Última edición por K-Yezaad; 03/07/2006 a las 16:39
  #11 (permalink)  
Antiguo 03/07/2006, 16:32
 
Fecha de Ingreso: agosto-2005
Mensajes: 5
Antigüedad: 12 años, 3 meses
Puntos: 0
creo que si le das position:relative a la clase .desc, tal vez te puede resultar.
  #12 (permalink)  
Antiguo 03/07/2006, 16:48
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Cita:
Iniciado por SiR.CARAJ0DIDA
pone link a la pagina...
No puedo, no tengo 15 mensajes aún...

Espera, espera, creo que este ya es el 15...

A ver, a ver... sííííííí!!!! ya puedo! Pués aprovecho para actualizar los enlaces a las imágenes que subí a imageshack, así se ve en Firefox



Y así en Explorer:



Como se ve el único probelam es de las cruces, si se ven bien en un navegador se ven mal en el otro y si lo cambio, pués al revés... Este es el sitio por si quereis ver el menú en funcionamineto:

http://wii-fi.blogspot.com

A ver si a alguien se le ocurre una solución, modificar el código es complicado porque está hecho para que la función de desplegado se pueda aplicar a cualuiqer tabla de la web, no sólo a las del menú, basta con que una tabla tenga la misma estructura (las mismas clases, un h3, un a y un div) para que funcione lo de ocultar/mostrar... No sé si me explico... Lo uso en más cosas como donde "linkame" más abajo y en azul (se puede ver la cruz allí también), o en este post que lo uso para ocultar una parte: http://wii-fi.blogspot.com/2006/07/l...al-de-wii.html se puede ver lo de la cruz al final del texto...

Última edición por Wii-Fi; 03/07/2006 a las 17:12
  #13 (permalink)  
Antiguo 04/07/2006, 09:12
Avatar de EdiWorks  
Fecha de Ingreso: marzo-2005
Ubicación: undefined
Mensajes: 64
Antigüedad: 12 años, 8 meses
Puntos: 0
Ya probaste usándolo así?:

<h3><span>&nbsp;</span><a href="#">Este es el link</a></h3>

IE interpreta diferente cuando no encuentra nada entre los tags <span>. Por otro lado, estoy absolutamente de acuerdo con Sir.carajodida en su apreciación sobre el uso de listas, y si, se puede hacer eso y cosas mas sofisticadas con mucho menos código, pero bueno, ya lo tienes así y no creo que desees cambiarlo. Si deseas conocer este tipo de técnicas puedes visitar el sitio www.cssplay.co.uk, encontrarás un despliegue total sobre el uso correcto de estas cosas. Saludos y ojalá te sirva, me gusta el diseño ;).
__________________
EdiWorks :adios:
=P
  #14 (permalink)  
Antiguo 04/07/2006, 11:28
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Hola ediworks, gracias por contestar!

Lamentablemente el consejo no ha funcionado, pero te lo agradezco igual! muchas gracias! Y gracias tambén por el link, hay cosas muy interesantes y como dicen en esa web soy parte del pasado, es decir, sé que tengo que sustituir tablas por css, pero buf, eso me llevará su tiempo, ya me costó lo suyo hacerme con las tablas en su día, así que tendré que tener paciencia...

Un saludo y suerte!

Y a ver si a alguien se le ocurre alguna otra cosa, y si no, ajo y agua, o que más genete se pase a firefox, je, je, es broma...

mos vemos
__________________
Gaming YouTubers Community: VGVID
  #15 (permalink)  
Antiguo 04/07/2006, 11:32
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
Cita:
Iniciado por aroka
creo que si le das position:relative a la clase .desc, tal vez te puede resultar.
Hola aroka, he estado probando con esta solución y sabes qué? que todo se ve mal perooooo... se ve igual en los dos navegadores!

Así que algo he avanzado, voy a probar a partir de ahí, muchas gracias!
__________________
Gaming YouTubers Community: VGVID
  #16 (permalink)  
Antiguo 05/07/2006, 09:53
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 2
LO CONSEGUIIIIIII!!!!!

Al final probando y probando, y probando, y probando... Esto

Código HTML:
.archives .desc H3 {position:relative; padding-left:20px; padding-top:5px; padding-bottom:5px; margin:0px; font-size:12px; font-weight:normal; border-bottom:1px solid #fc3; background:#ffffcc;}
.archives .desc H3 A {position:relative;}
.archives .desc H3 SPAN {display:block; position:absolute; left:0px; top:0px; width:18px; height:18px; padding:0px; margin:0px; background:url(wii-araoff.gif) no-repeat center; cursor:pointer; z-index:10;}
.archives .desc DIV {display:none; padding:5px; border-bottom:1px solid #fc3;}
.archives .open DIV {display:block;}
.archives .open H3 SPAN {background:url(wii-araon.gif) no-repeat center;}
acabó en esto:

Código HTML:
.archives .desc H3 {position:relative; padding-left:5px; padding-top:5px; padding-bottom:5px; margin:0px; font-size:12px; font-weight:normal; border-bottom:1px solid #fc3; background:url(http://photos1.blogger.com/blogger/875/3245/400/wii-araoff.gif) no-repeat #ffc;}
.archives .desc A {padding-left:12px; position:relative;}
.archives .desc SPAN A {display:block; position:relative; left:0px; top:0px; padding:0px; margin:0px; cursor:pointer; z-index:10;}
.archives .desc DIV {display:none; padding:5px; border-bottom:1px solid #fc3;}
.archives .open DIV {display:block;}
.archives .open H3 {background:url(http://photos1.blogger.com/blogger/875/3245/400/wii-araon.gif) no-repeat #ffc;}
La clave estaba en cambiar un absolute por un relative y a partir de ahí a experimentar, gracias aroka por la sugerencia, y ediworks por ese enlace tan bueno y todos los demás muhísimas gracias también por vuestro tiempo.

ah! lo de las listas y div se me olvidó decir que ya lo había probado pero el código que mete Blogger en la página para mostrar la barra de arriba y otras cosas lo hacía imposible y ese código como es lógico no puedo tocarlo (se pone sólo), así que por eso la opción de las tablas.
__________________
Gaming YouTubers Community: VGVID
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 17:24.