IE "no respeta" mi CSS

[DoHITB]

Buenos días,

Tengo un problema con el diseño web... (espero no enfadar a nadie) en realidad creo que es el mismo problema que tenemos todos los que diseñamos web's... resulta que IE no me "acepta" el CSS.

Un ejemplo muy muy simple, para que veáis... tengo una clase en la que pongo:

Código:

.txtSubHLSide{
    top:0;
    left:0;
    width:0;
    height:0;
    color:#000;
    font-size:18px;
    font-family:Arial;
    position:relative;
}

En Chrome y firefox me va perfecto; en IE me pone los textos de esta clase en negrita (en realidad creo que en todos los textos).

Tengo puesta la meta-tag siguiente:

Código:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Para que me saque la versión de IE más reciente; el problema está en que de la versión 8.0 para abajo el CSS se me desmorona del todo; se me compacta todo, se mueve todo de sitio... total, se queda la web inaccesible (incluso algunos eventos de JavaScript dejan de funcionar).

Realmente no tengo un CSS muy complicado... podría decirse que lo "máximo" que hago es jugar con la opacidad de algunos elementos. El resto es todo "top", "left", "overflow", "font", "padding"...

No sé si a alguien más le pasará esto...

¿Alguien sabe qué se puede hacer (aparte de crear varios archivos de estilo y usar uno diferente en función del navegador) para minimizar los efectos de IE?

Gracias.

[cristian_cena]

tal vez te funcione resetear los estilos, por ejemplo:

p, span, em {
font-weight: normal;
}
strong {
font-weight: bold;
}

Si esto no funciona podes probar mirando algún buen reset como el de twitter bootstrap o normalize.css a lo mejor ya solucionaron tu problema.

Si tampoco funciona supongo no quedará otra que dar estilos específicos para ie (mierrrrrd!)

[pitufoweb]

En general IE8 tiene 'buen' soporte para css 2.1. No tendrías por que tener grandes problemas con eso. Lo mas probable es que tengas errores en el código.

Pon la URL de la web y explicanos cuales son los problemas que tienes.


Saludos

[DoHITB]

Gracias por contestar!

@cristian_cena he probado el reset que me comentas... nada de nada... me estoy mirando qué es esto de normailze.css, a ver si así arreglo todo esto de una vez, jeje

@pitufoweb no creo que sea por errores en el css. Mis CSS son bastante sencillos, suelo usar siempre algo así:

Código:

.clase1 {
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    position: relative;
    background-color: #000;
    border: 2px solid #000;
}

El que sean errores de programación del lado del servidor es otro tema (aunque también es poco probable porque en otros navegadores funciona bien).

Para que te hagas una idea de lo que te quiero decir, tengo esta clase:

Código:

.b2{
    left:-70px;
    width:172px;
    font-family:arial;
    font-weight:700;
    font-size:14px;
    position:relative;
    opacity:.30;
    -moz-opacity:.30;
    filter:alpha(opacity=.30);
}

Y en IE, si lo pongo en modo de compatibilidad con IE8 (o inferior) los div me desaparecen...

Iré comentando las novedades...

Saludos y gracias

[pitufoweb]

Aquí tienes el error.

filter:alpha(opacity=.30);

Eso funciona de 0 a 100.

0.30 es prácticamente transparente, por eso desaparece.



Saludos

[DoHITB]

Curioso... en compatibilidad con IE9 me funciona bien... jeje

Lo he cambiado y si, ahora el tema de la opacidad funciona

El resto de errores son div's exageradamente grandes, desfasados, etc...

Gracias por el aporte!