Problemas de CSS con Internet Explorer (que raro no?)

[yens]

Buenas.. la duda es simple, tengo una division en un documento html y en ella voy insertando varias imagenes para conformar el menu. El problema es que el FF, Opera me va bien, pero en el IExplorer resulta que se me ven las imagenes separadas entre si por 2 o 3 pixels sin tener sentido alguno, he probado a asignarles una clase a las imagenes con padding: 0 y sigue sin funcionar.

El error en cuestion es este:



En firefox:



No sé qué más hacer para que esto no ocurra, y llevo dos días que no avanzo con el diseño web por culpa de este p*** error  :x

[shephiroth]

Buenas. No estoy del todo seguro que sea la razon, pero te doy 2 ideas:

- Mira a ver si en iexplorer el padding lo tratan con valores diferentes para izq/der/arr/aba. Quizas si la cambias asi solo cambia izq/der.
- Tienes metidas las fotos en <p></p>?? quizas tengas q cambiar el padding de <p>.

SUERTE

[josepzin]

El margin y padding son tomados de forma distinta en IE.

Lo que pasa es que IE A VECES :O duplica los valores de margin/padding

Lo que yo hago es esto:

margin: 10px 0 0 0;
_margin: 5px 0 0 0;

Entonces, el normal de los navegadores toman el primer margin, IE toma el _margin que esta puesto como la mitad...

SI HABRE RENEGADO HASTA SABER ESTO! hagggg...

[yens]

Al final he optado por crear una tabla con cellpadding y cellspacing a cero y meterlo en td cada imagen... probare lo que dices josepzin, gracias tio xD

[raysan]

Hola yEnS,

Creo que el problema que tienes se debe al 'modelo de caja de CSS' y el distinto modo de interpretarlo que tienen el IE5 y el Firefox. Yo también me encontré con el mismo problema a la hora de diseñar mi página web y lo solucioné como pude... fue un poco engorroso, simplemente ajustando a prueva de errores...

Aqui te dejo un link, espero que te sirva...  :wink:

http://www.cristalab.com/tutoriales/191/problema-y-hack-del-modelo-de-caja-css-en-internet-explorer-5

[yens]

Después de mucho pelear.. tengo CASI listo el tema de la maquetación mediante divs... el último "pero" es el siguiente, que 2 capas laterales, crezcan en vertical con la misma medida que lo hace la central. Aprovechando mis grandes dotes artísticas me he atrevido a dibujar a forma de esquema que es lo que falta (la imagen del css es real, los efectos especiales de rotulador rojo son mios xDD). Os dejo la imagen de lo que quiero hacer, que supongo que se podra hacer como tienen muchas web:



Si todavía no está claro lo que querría hacer, pasaos por páginas como por ejemplo:
http://www.thecpl.com/

(no no me pagan por hacer esto los de cpl xDD).

Gracias y a ver si puedo ponerme pronto con el codigo que tengo la cabeza mas que remaquetada!

[josepzin]

He visto en alguna parte unas templates con estas estructuras basicas... pero la verdad es que no me acuerdo donde estaban.

La solucion que aplico casi siempre yo: grafico de fondo del tamaño de toda la web con las 3 bandas de colores. Asi no importa si llegan al final o no.

[yens]

osea tu hablas de utilizar un div que esté por debajo de todas las capas, que sea una imagen repetida en y del mismo ancho que la web y centrado (en este caso) no? Probare.

@Raysan, gracias por el apunte, este template por ahora se me ve bien en ambos, pero ya me tiene pasado malas jugadas en mas de una vez, gracias!

Muchas gracias nuevamente a todos.

editado: Así me funciona josepzin, gracias a ver si no me da mas problemas el tema porque llevaba unos dias sin avanzar por la maquetacion!

[josepzin]

Yo uso mas o menos esta estrucutra:

<membrete></membrete>
<cuerpo>
<columnaizq>
<columnader>
</cuerpo>
<pie></pie>

Entonces, a <cuerpo> le asigno la imagen de fondo que se repite en Y.

Aunque creo que hay otras soluciones "mas" mejores.

[yens]

Otras posibles soluciones que he visto han sido la utilizacion de tablas para maquetar, pero como las tablas no son para maquetar sino que estan para lo que estan, por lo de pronto tiramos asi palante ^^

[yens]

Nuevo problema.. he estado leyendo y para el tema de opacidades es distinto del internet explorer al resto de navegadores, asi pues tengo:

Código [Seleccionar] Expand


a:hover{
      opacity: 0.5;
      filter:alpha(opacity=50);


Sólo me funciona en Firefox y Opera, no entiendo porqué en IExplorer no, si teoricamente el filter:alpha(opacity=50); hace que funcione...

En cuanto a la solucion que me proponias josepzin, me funciona en Opera y Internet explorer, pero en firefox si no especifico a mano un height en la capa que contiene a las 3 columnas de contenido, no se me ve la imagen de fondo que simularia la extension hacia abajo de las tres columnas!

podréis ver lo que digo aqui:
http://www.angelarena.net/maquetacion

[josepzin]

En realidad todo tiene su vuelta, pero hay tantos factores que influyen... yo mas o menos consigo lo que quiero pero al principio me he vuelto loco.

Por norma, no utilizo las opciones CSS que no son estadar para todos porque seguro que hay problemas...

[yens]

Entonces como podria solventar ese problema? es decir, a ti te funciona lo que me comentabas, por que a mi no?

la estructura que tengo es esta:

Código [Seleccionar] Expand


<DIV id="col_contenedor">

<DIV id="col_izquierda">
<table cellpadding="0" cellspacing="0">
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" ></a></td></tr>
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" border="0"></a></td></tr>
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" border="0"></a></td></tr>
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" border="0"></a></td></tr>
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" border="0"></a></td></tr>
<tr><td><a href="#"><img src="imagenes/web/noticias.jpg" border="0"></a></td></tr>
</table>
</DIV>
<DIV id="col_centro">izquierda</DIV>
<DIV id="col_derecha">derecha</DIV>

</DIV>

y en el css tengo para todo menos la cabecera y la barra_up (la que esta debajo del header) altura auto, la que da fallo en firefox tiene esto de css que creo que es lo que tu comentabas:

Código [Seleccionar] Expand


#col_contenedor{
width: 900px;
background-image: url(imagenes/web/fondo.jpg);
background-repeat: repeat-y;
}


Puedes ver lo que te digo en: http://www.angelarena.net/maquetacion

Es la primera vez que se me ve bien en todos menos en firefox xDD

editado:
añadiendole por probar algo, un position: absolute a la division #col_contenedor he solucionado el problema del repeat-y en firefox xD!

la opacidad por mas que busco todos me remiten el codigo que tengo :s

[jazcks]

lo de la opacidad debe funcionarte en iexplorer, pero si no usas el ":hover".
prueba en un div normal, o el mismo body, filter: Alpha(Opacity=10); :)

[Mars Attacks]

Deja de preocuparte por si se ve bien en el IE o no, y haz tu web compatible con los estándares, como los navegadores decentes. Y deja un aviso para que la gente se cambie a un navegador decente si usa el IE :P
Seguro que no te preocupa que tu web no se vea igual en tu tostadora. Pues lo mismo.