Problemas Firefox/Explorer

[Wii-Fi]

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...

[SiR.CARAJ0DIDA]

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...

[Wii-Fi]

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!

[Jar_life3]

Cual es mejor de los dos, yo los tengo pero no se cual usar mas

[Wii-Fi]

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.

[SiR.CARAJ0DIDA]

sigo sin entender la justificación de usar tablas... se puede hacer lo mismo con la mitad de codigo con listas.

[Wii-Fi]

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).

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!

[Wii-Fi]

Hola qué tal? Alguien tiene alguna idea de cómo solucionar este problemilla? gracias de nuevo!

[SiR.CARAJ0DIDA]

pone link a la pagina...

[K-Yezaad]

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.

[aroka]

creo que si le das position:relative a la clase .desc, tal vez te puede resultar.

[Wii-Fi]

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...

[EdiWorks]

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 ;).

[Wii-Fi]

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

[Wii-Fi]

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!

[Wii-Fi]

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.