Empleo de comentarios condicionales IE

jark · #1 (**permalink**) 17/11/2010, 06:52

Hola, mi duda es la siguiente: Estoy terminando de diseñar una página, el único problema es la visualización incorrecta del CSS en un navegador como Internet Explorer. Me he informado por ahí un poco y, aunque algunos proponen el uso de hacks, la mayoría recomienda los comentarios condicionales. Hasta ahora sólo he visto etiquetas del estilo <![endif]--> y similares. Ahora bien, mi problema radica es que no entiendo dónde debo colocar dichas etiquetas y si al hacerlo se corregirán automáticamente los defectos de CSS en un IE o deberé crear más CSS...

Por último quisiera saber cómo especificar en estos comentarios condicionales, que las "correcciones" aplicadas sobre el CSS sean para cierta versión determinada de IE y para todas las versiones anteriores a la misma al mismo tiempo. He leído que hay que colocar algo más en la etiqueta, sin embargo, prefiero asegurarme y que me digáis exactamente qué poner.

Saludos.

Gracias.

DragonX · #2 (**permalink**) 17/11/2010, 07:02

bien.

Tenes varios condicionales a saber:

Cita:

Como verás tenes condicionales generales [if IE] o directamente por versión de IE.

Ahora bien, vos en tu HTML deberias tener esto en el HEAD:

Código HTML:

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

Bien, esa es tu hoja de estilos, los condicionales se pones directamente abajo de este código dentro de tu HTML, como quedaría:

Código HTML:

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

Ok, hasta acá tenemos las dos hojas de estilo en el HTML, pero como se "corrijen las cosas" preguntabas, fácil.

Supongamos que tenemos una tipografia que en Explorer queremos que sea roja y bold, pero en los demás browsers queremos que sea negra y normal. Bien en tu CSS general pondrias esto:

Código CSS:

Ver original.tipografia{color:#000;font-weight:normal;}

y en tu hoja para explorer lo siguiente:

Código CSS:

Ver original.tipografia{color:#f00;font-weight:bold;}

El browser lee las hojas de estilo en orden descendente, osea que primero lee la hoja general donde la tipo es negra y normal, pero al seguir leyendo para abajo encuentra el Condicional y si es explorer pisa los estilos anteriormente mencionados por los de explorer, rojo y bold.

Me explico?
Slds.-

jark · #3 (**permalink**) 17/11/2010, 07:21

Primero de todo, gracias por tu rápida y detallada contestación.

He entenido algunas cosas, sin embargo, aún me quedan diversas cuestiones:

La primera de todas es saber si el código
1.
<link href="estilos.css" rel="stylesheet" type="text/css" />
2.


debo copiarlo tal cual o debo cambiar ciertas variables como <link href="elnombredemihojadeestilos.css">

Aparte de eso quisiera saber otra cosa más. Las condicionales que me has escrito debo colocarlas en el head del html, no del css, y con ello consigo que se acuda a una hoja de estilos u otra dependiendo de si se accede a la página desde IE u otro navegador. Pero, si esto es así, y no me equivoco, ¿Estás diciéndome que debo crear otra hoja de estilos nueva que contenga las correciones necesarias para la correcta visualización de la página en IE y que dichas correciones las debo yo reescribir una a una en base a cada uno de los cambios que haya que hacer en un IE?

No sé si me explico bien.

Saludos.

Gracias.

DragonX · #4 (**permalink**) 17/11/2010, 07:35

Cita:

Iniciado por jark

Primero de todo, gracias por tu rápida y detallada contestación.

He entenido algunas cosas, sin embargo, aún me quedan diversas cuestiones:

La primera de todas es saber si el código
1.
<link href="estilos.css" rel="stylesheet" type="text/css" />
2.


debo copiarlo tal cual o debo cambiar ciertas variables como <link href="elnombredemihojadeestilos.css">

Exacto! reemplaza los estilos.css y estilosIE.css por los nombres reales de tus archivos

Cita:

Iniciado por jark

Aparte de eso quisiera saber otra cosa más. Las condicionales que me has escrito debo colocarlas en el head del html, no del css, y con ello consigo que se acuda a una hoja de estilos u otra dependiendo de si se accede a la página desde IE u otro navegador. Pero, si esto es así, y no me equivoco, ¿Estás diciéndome que debo crear otra hoja de estilos nueva que contenga las correciones necesarias para la correcta visualización de la página en IE y que dichas correciones las debo yo reescribir una a una en base a cada uno de los cambios que haya que hacer en un IE?

Exacto, debes tener una hoja de estilos para IE solo con las correcciones o modificaciones.

Código CSS:

Ver original.tipografias{
     font:normal 12px/18px "Arial";
     color:#000;
     text-decoration:underline;
     margin:20px;
}

si queremos corregir los margenes por ejemplo, en tu hoja para Explorer solo deberias tener esto:

Código CSS:

Ver original.tipografias{
     margin:26px;
}

Esto le dara un margen de 20px a todos los browser menos a explorer que le dara un margen de 26px.

Slds.-

jark · #5 (**permalink**) 17/11/2010, 07:43

Vale, creo que ya he entendido todo, creo :P

Sólo me queda preguntar una cosa, y es qué cambio debo realizar en mi CSS para centrar menú de opciones horizontal que he colocado en la parte superior de la página. Lo único que quiero es centrarlo, puesto que en IE se coloca pegado al margen izquierdo, sin embargo no deseo que se realice ningún otro cambio en ninguna otra etiqueta como la que hace que se agrupe en casillas o que cambie de color al pasar el cursor. Todo ello quiero que se mantenga estático.

Te escribo mi CSS por si resulta de mayor ayuda. Siento preguntar tanto :P

Código CSS:

Ver original.navigation {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    color: #CCCCCC;
    background-color: #333333;
    display: block;
    padding: 2px;
    width: auto;
    border: thin solid #FF0000;
}
 
.navigation:hover {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    color: #999999;
    background-color: #999933;
    display: block;
    padding: 2px;
    width: auto;
}
.nosubr {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: normal;
    color: #CCCCCC;
    text-decoration: none;
}
 
 
.navigation2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #CCCCCC;
    background-color: #333333;
    display: table-cell;
    padding: 3px;
    border: thin solid #FF0000;
}
 
.navigation2:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: #999933;
    display: table-cell;
    padding: 3px;
}
.nosubr2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #CCCCCC;
    text-decoration: none;
}

Gracias.

Saludos.

DragonX · #6 (**permalink**) 17/11/2010, 07:53

podria ver tu pagina online? podras subirla asi la veo mejor y entiendo un poco mas

Slds.-

jark · #7 (**permalink**) 17/11/2010, 07:55

Cita:

Iniciado por DragonX

podria ver tu pagina online? podras subirla asi la veo mejor y entiendo un poco mas

Slds.-

Es que aún no poseo ningún servidor al que subirla, por el momento sólo estoy trabajando en una carpeta local todos los html, flash, css.

Saludos ;)

DragonX · #8 (**permalink**) 17/11/2010, 07:58

podrias subirla algun hosting gratis solo para verla. o pone un print screem explicando que es lo que queres modificar.

slds.-

jark · #9 (**permalink**) 17/11/2010, 08:08

Por cierto inconveniente me es imposible colocarte ahora una captura. Y no tengo tiempo para lo del servidor por ahora.

Pero vamos, la base del problema es esta.

Opción 1. Opción 2. Opción 3.

*Digamos que este es el menú de opciones antes mencionado, cada una de las opciones se encuentra en una casilla con su padding, su background color etc, pero en IE todo ello se alinea a la izquierda en vez de al centro tal y como te lo he colocado.

Opción 1 Opción 2 Opción 3

DragonX · #10 (**permalink**) 17/11/2010, 08:26

para un menu asi lo que te conviene utilizar es una lista.

<ul>
<li><a href="#">opcion 1</a></li>
<li><a href="#">opcion 2</a></li>
</ul>

ul li{display:inline}

jark · #11 (**permalink**) 17/11/2010, 09:16

Cita:

Iniciado por DragonX

para un menu asi lo que te conviene utilizar es una lista.

<ul>
<li><a href="#">opcion 1</a></li>
<li><a href="#">opcion 2</a></li>
</ul>

ul li{display:inline}

No no, el menú ya lo tengo, con sus estilos y todo, sólo quisiera saber qué hacer en el nuevo CSS de IE para que todo ese menú se vea en el centro superior de la página, igual que en el CSS original, y no alineado a la izquierda superior, que es como se visualiza en el IE.

Saludos ;)

jark · #12 (**permalink**) 20/11/2010, 04:33

Vale, a ver, por el momento ya no me preocupa el problema que se me presentaba, puesto que he cambiado el diseño de la página. Antes, el menú eran simples palabras que cambiaban su background color al pasar el cursor por encima, pero ahora, he puesto imágenes con palabras escritas en ellas, y dichas imágenes cambian al pasar el cursor. El problema de visualización en Internet explorer es ahora peor que antes. Te dejo una imagen:

No creo que haga falta decir cuál es el IE y cuál el Firefox :P

Saludos.

Gracias.