Problemas con los selectores condicionales

pipeio · #1 (**permalink**) 22/04/2008, 15:27

Hola, esto es mi primer mensaje. Así es que supongo que será un poco chorra

Pero realmente llevo un buen rato dándole vueltas y no sé porque no me funciona.
Tengo uno selector condicional en la página principal para coger un css u otro dependiendo si el usuario carga la web mediante IE o el resto de navegadores.
FF no coge el css que es sólo para IE, como debe ser. Pero IE6 no coge su css. En cambio si sólo dejo el link para IE con su comentario condicional y elimino el link para el resto de navegadores, entonces sí que IE6 coge el link que está dentro del comentario condicional. Espero que haya quedado claro. Aqui va el código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Restauración Olga y Ana</title>
<link rel="stylesheet" type="text/css" href="estilos/estilos.css"/>
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="estilos/estilosie.css"/>
<![endif]-->
</head>

<BODY>
...
</BODY>

¿Tiene algo que ver que para mostrar la página simplemente este pulsando el "vista previa en IExplorer 6.0" / "vista previa en FireFox" del Dreamweaver 8.0?

Muchas gracias desde ya

nedrek · #2 (**permalink**) 22/04/2008, 16:36

Como "nivel inicial":

Primero siempre los de IE, que serán los "generales".
Después los restantes.

Si lo haces como anteriormente, vas a tener que ser muy específico en cada una de las reglas, si lo haces de esta otra manera, crea la hoja completa para IE, y después haz los ajustes que quieras para los demás browsers.

Código HTML:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="estilos/estilosie.css"/>
<![endif]-->

<link rel="stylesheet" type="text/css" href="estilos/estilos.css"/>

Así debería funcionarte sin problemas.

Mikmoro · #3 (**permalink**) 22/04/2008, 17:08

Cita:

Iniciado por nedrek

Como "nivel inicial":

Primero siempre los de IE, que serán los "generales".
Después los restantes.

Si lo haces como anteriormente, vas a tener que ser muy específico en cada una de las reglas, si lo haces de esta otra manera, crea la hoja completa para IE, y después haz los ajustes que quieras para los demás browsers.

Código HTML:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="estilos/estilosie.css"/>
<![endif]-->

<link rel="stylesheet" type="text/css" href="estilos/estilos.css"/>

Así debería funcionarte sin problemas.

Ten en cuenta la prioridad de la hojas; siempre prevalece la regla de la hoja que se lea después, a no ser que digas lo contrario con algunos de los métodos para ello.

Si lo hicieras así, pasaría lo siguiente:

- en la hoja de IE pongo por ejemplo body {margin: 10px;}
- y en la hoja genérica pongo body {margin: 20px;}

¿Qué leerá IE? 20px. ¿Por qué? porque primero leerá 10 y luego 20, y se quedará con la última lectura que haya hecho.

Por eso hay que ponerlas justamente al revés:

Cita:

es decir, tal y como estaban, ya que en ese caso IE leerá primero 20px de la hoja genérica, que luego contradice con su propia hoja que dice 10px. Así que leerá 10px. No sé si me explico bien.

pipeio: hay que tener en cuenta que cada regla que quieras diferente para IE y ya esté en la hoja general la tienes que contradecir a la fuerza, no basta con no ponerla, porque IE leerá las dos hojas. Si quieres un margen de 0px y en la general pone 10px, no bastará con que no pongas nada, sino que has de poner 0px a la fuerza para contradecir la regla que ya ha leido.

¿Qué te está pasando en tu caso? Ni idea. Pon los dos códigos css a ver si hay alguna cosa rara.

Mikel.

pipeio · #4 (**permalink**) 23/04/2008, 11:33

¡Muchisisisisimas gracias Mikel!

Era justo eso que me has comentado. En los estilos generales tenía un background-image, y en los estilos para IE no había puesto el background-image. Mi idea era que no saliera el background-image, pero como tu bien dices, IE ha leido ambas css y ha hecho una "unión" entre ellas. Especificando un background-image distinto en la hoja de estilos para IE ha "machacado" la general.

Entonces, una pregunta que me surge ahora, a la hora de definir 2 hojas de estilo diferentes para IE vs. el resto, en el css de IE ¿sólo se pone las diferencias con la original? ¿o se copia toda la hoja de estilos y se cambia lo necesario? ¿como lo suele hacer la gente?

¡Gracias de antemano!

Mikmoro · #5 (**permalink**) 23/04/2008, 11:36

No, sólo las diferencias y las cosas que no sean así. Aunque es lo mismo quiero decir: si quieres en uno un margen de 10 y en el otro de 20, en esa regla basta con que pongas el margen de 20 y nada más. Pero recuerda que si no quieres que tenga borde y estaba puesto, tedrás que ponerle border none.

Es decir, efectivamente sólo las diferencias pero supongo que ya me entiendes a qué poner atención, si no heredará siempre.

Mikel.

pipeio · #6 (**permalink**) 23/04/2008, 11:38

Muchas gracias por la respuesta clara e inmediata.
¡Me ha quedado claro!