[AYUDA] hack para IE

ariann · #1 (**permalink**) 16/02/2010, 03:21

buenas tardes.
tengo un pagina con su hoja de estilo, en todos los navegadores se ve bien menos en IE, leí en algún momento que utilizando un "hack" podía lograr que al estar navegando en IE este utilice un estilo aparte y descarte el que utilizo para los demás navegadores...

estoy en lo correcto?
esto existe?

gracias por su tiempo

arian.

falmar · #2 (**permalink**) 16/02/2010, 04:26

Hola, pues si, IE6 suele dar muchos problemas con css.
Yo utilizo este hack, habrá más formas pero este me funciona.

.mydiv {

height: 15px; /* Para todos los Browsers */

#height: 20px; /*Para Internet Explorer */

_height: 25px; /* Para Internet Explorer 6 */

}

un Saludo

Sophie_Madrid · #3 (**permalink**) 16/02/2010, 04:54

Hacks hay muchos, yo te recomiendo primero que pongas una hoja de estilos reset.css (buscala asi en google) para que resetee todas las propiedades que ponen los exploradores.

Luego puedes hacer o bien lo de cargar una hoja de estilos diferente cuando tengas diferentes exploradores o puedes tambien utilizar el caracter _ delante del atributo de css para IE6 y # para IE7.

Yo esto lo suelo utilizar bastante para los margin.

Saludos.

lucianonicolas · #4 (**permalink**) 16/02/2010, 13:21

¡NO UTILICES HACKS! Es una técnica espantosa. Si necesitas lograr eso, puedes utilizar los comentarios condicionales para IE en el cual especificas una versión determinada y la ubicación del archivo CSS para ese navegador {Busca en Google: comentarios condicionales IE}.

Otra forma de lograr esto es utilizando JS para reconocer qué browser es, y de ahí hacer las modificaciones necesarias, existen cientos de códigos ya hechos para hacer esto.

Yo te recomiendo la segunda opción, ya que así no generas muchos archivos CSS para los distintos IE.

¡Saludos!

ariann · #5 (**permalink**) 16/02/2010, 13:46

primero que nada muchas gracias a todos por su tiempo.

las primeras 2 respuestas están bien, las conocía, pero implican meter mano a mi hoja de estilo, yo lo que pensaba (que no se si se puede hacer) es poner como dice el amigo lucianonicolas esos comentarios, estableciendo que si es IE, cargue una hoja de estilo, y si no es IE, que cargue la otra...

ahora el tema esta acá:


<link href="estilo-general.css" rel="stylesheet" type="text/css">

cuando entre por ejemplo desde opera, el estilo-IE.css no se cargaría, ya que el navegador lo va a leer como comentario.

pero si entro con IE, el navegador lo leería solo este estilo y no el estilo-general.css?????

por que si funciona así seria genial, problema resuelto, de lo contrario, tal vez mediante algún script eso se pueda lograr...

Kaze71 · #6 (**permalink**) 16/02/2010, 17:30

Nop, así el IE te leería las dos hojas de estilo. Creo que tendrías que hacerlo con PHP, para que sólamente se cargue una hoja de estilo.

Saludos;

ariann · #7 (**permalink**) 16/02/2010, 22:00

bueno gente encontré esto:

Código PHP:

  <?php

$browser = $_SERVER['HTTP_USER_AGENT'];

if(strstr($browser,"MSIE"))

echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/ie.css" type="text/css"/>" ; 

else

echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/mz.css" type="text/css"/>" ; 

?>

el tema es que no entiendo el codigo, alguien me podria decir mas o menos como es el tema?
si funciona esto...

y veo que ya me fui de css para el lado de php, disculpen esto, es que fue dándose así el tema

---------------------------------------------------------------------------------------

encontré un excelente script que me viene como anillo al dedo, hoy aprendí algo nuevo :D

http://www.desarrolloweb.com/articulos/estilos-css-distintos-navegador-javascript.html

gracias por los datos y por su tiempo

arian.

daPhyre · #8 (**permalink**) 16/02/2010, 23:16

En verdad hay una forma mucho más sencilla de hacerlo. Lo más recomendable es hacer una hoja de estilos, e implementar en seguida un "corrector" para IE, el cual sería además de la hoja original (Eso te permitiría no tener que hacer toda la página de nuevo, si no solo usar el segundo CSS para corregir lo que IE interpreta mal). Para esto, se haría el siguiente código en este orden:

Código HTML:

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

Ahora, si prefieres trabajar doble para asegurarte que lo de IE se quede solo en IE y lo demás por su lado, si existe un comentario condicional para cargar algo que no sea en IE, el cual se usa de la siguiente forma:

Código HTML:

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

Es mucho mas práctico que usar PHP ya que no requiere ejecutarse desde el servidor, y mucho más efectivo que usar JS, ya que este último no serviría si está desactivado en el ordenador del usuario.

Espero te haya ayudado, mucha suerte

pi_imagine · #9 (**permalink**) 17/02/2010, 02:26

Cita:

Iniciado por daPhyre

En verdad hay una forma mucho más sencilla de hacerlo. Lo más recomendable es hacer una hoja de estilos, e implementar en seguida un "corrector" para IE, el cual sería además de la hoja original (Eso te permitiría no tener que hacer toda la página de nuevo, si no solo usar el segundo CSS para corregir lo que IE interpreta mal). Para esto, se haría el siguiente código en este orden:

Código HTML:

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

Ahora, si prefieres trabajar doble para asegurarte que lo de IE se quede solo en IE y lo demás por su lado, si existe un comentario condicional para cargar algo que no sea en IE, el cual se usa de la siguiente forma:

Código HTML:

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

Es mucho mas práctico que usar PHP ya que no requiere ejecutarse desde el servidor, y mucho más efectivo que usar JS, ya que este último no serviría si está desactivado en el ordenador del usuario.

Espero te haya ayudado, mucha suerte

Pero en que se diferencian la hoja de estilos del explorer con respecto al resto?¿??

tan solo en la manera de llamar al css?

.menus1
#menus1
_menus1

Un saludo

jomaruro · #10 (**permalink**) 17/02/2010, 07:20

Hola:

Cita:

Iniciado por daPhyre

... si existe un comentario condicional para cargar algo que no sea en IE, el cual se usa de la siguiente forma:

¿Estás seguro? Porque los comentarios condicionales son algo exclusivo de IE, es decir, los demás navegadores NO los interpretan.

Saludos.

lucianonicolas · #11 (**permalink**) 17/02/2010, 15:35

Los comentarios condicionales SÓLO LOS LEE IE. Los demás navegadores los interpretan como un comentario. Por lo cual, primero pones tu hoja de estilos principal «default.css» con todo el código CSS. Luego, si por ejemplo si IE6 interpreta mal el «magin-left» de una lista, lo que haces es colocar un comentario condicional debajo del link a «default.css», porque como sabemos CSS siempre considera la última propiedad escrita entre dos de la misma especificidad.

Quedaría algo así {como pusieron más arriba}:

Código HTML:

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

Entonces, siguiendo con el ejemplo, en «fuckingIE.css» lo único que haces es modificar el «margin-left» de esa lista, no hace falta que repitas todo el código.

Recuerda que puedes marcar específicamente qué versión quieres afectar con el comentario condicional, hay varios tutoriales al respecto, como este: http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie.

Espero que te sirva ¡saludos!

ariann · #12 (**permalink**) 17/02/2010, 18:39

muchas gracias gente, ya lo solucione
saludos

daPhyre · #13 (**permalink**) 17/02/2010, 22:43

@Jomarmuro ¡Estoy seguro! Revisa el código y te darás cuenta del pequeño truquito que ocurre. La condicional está en comentarios, así que todos los navegadores lo ignoran, pero IE lee "Si no es IE" y por tanto lo descarta.

Código HTML:

<!--[if !IE]-->

@pi_imagine Los CSS son iguales, pero hay algunos atributos que IE lee de forma incorrecta, por lo que hay que hacer correcciones específicas para este navegador, y una forma es con un CSS exclusivo en el que le das ciertas indicaciones que no son necesarias para los demás, y que incluso podrían hacer que no anten bien dichas correcciones.

jomaruro · #14 (**permalink**) 18/02/2010, 03:45

Hola:

Cita:

Iniciado por daPhyre

@JomaruroLa condicional está en comentarios, así que todos los navegadores lo ignoran, pero IE lee "Si no es IE" y por tanto lo descarta.

¡Claro! y si no lo lee ningún navegador e IE lo descarta ¿para que sirve? Para nada.

Saludos.

daPhyre · #15 (**permalink**) 18/02/2010, 19:16

Cita:

Iniciado por jomaruro

¡Claro! y si no lo lee ningún navegador e IE lo descarta ¿para que sirve? Para nada.

¡Pues para que IE lo ignore y los demás lo usen como si nada hubiera ocurrido nunca! :-p

alexk · #16 (**permalink**) 18/02/2010, 20:41

Cita:

¡Claro! y si no lo lee ningún navegador e IE lo descarta ¿para que sirve? Para nada.

me uno jeje

daPhyre · #17 (**permalink**) 18/02/2010, 22:11

Esto es confuso ._.'''

Todos si lo leen, solo IE lo descarta :S

jomaruro · #18 (**permalink**) 19/02/2010, 04:50

Hola:

Cita:

Iniciado por daPhyre

Esto es confuso ._.'''

Todos si lo leen, solo IE lo descarta :S

Ya sé que es confuso, piensalo con calma. IE lo descarta, los demás no lo leen porque lo interpretan como un comentario.

Saludos.

alexk · #19 (**permalink**) 19/02/2010, 11:04

aver.. aver... jaja

Código HTML:

Ver original<!--[if !IE]-->

aqui estas abriendo y cerrando el comentario osea que sirve para ....~~nada~~ mas que como eso un comentario para situarnos o indicarnos nuestra CSS para todo navegador menos IE claro, daria igual que ponga

Código HTML:

Ver original<!--[mi abuelita dice no a ie]--><link href="mi.css" rel="stylesheet" type="text/css"><!--[end abuela]-->

a

Código HTML:

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

ya que los comentarios condicionales son unicos para MS... osea IE y si lo leera FF por que solo tengo comentado el inicio y el final mas no el <link....

ahora si quito los " - - " que van despues del corchete y antes del " > " osea

Código HTML:

Ver original<!--[mi abuelita dice no a ie]><link href="test.css" rel="stylesheet" type="text/css"><![end abuela]-->

entonces

Código HTML:

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

seria parte del comentario... tal como hace IE en sus condicionales...
y seria eso UN COMENTARIO osea que ningun navegador ~~a menos que me compre FF <!--[mi abuelita dice no a ie]>~~ lo interpretara mas que como un comentario comun y corriente y por ende serviria de nuevo para nada...
aver si se va la confuncion que al final ya me estoy liando tambien jaja...

--------------------------------------------------------------------------------------------------------

Edito: uuuuuuups siempre escribiendo sin testear jaja... aver jaja

al parecer

Código HTML:

Ver original<!--[if !IE]--><!--[endif]-->

al no ser una condicion "existente" FF lo toma como comentario pero IE no solo lee el comentario sino que lo imprime jeje... veamos...

Firefox izquierda e IE derecha claro... (da igual ie6, 7, 8, ~~9???~~ por que lo muestra)

ahora si ponemos mi condicional

Código HTML:

Ver original<!--[mi abuelita dice no a ie]--><!--[end abuela]-->

funciona perfecto jaja... osea como comentarios ya que no tengo if (supongo)

daPhyre · #20 (**permalink**) 19/02/2010, 14:58

He descubierto que he sido engañado

En esta página, se explica como se usan los comentarios condicionales: http://msdn.microsoft.com/en-us/libr...12(VS.85).aspx

Como verán, describe el uso de <![if !IE]>. Alguien me había contado que para poder validar una página que usara esta condicional, se ocultara el código de la forma que lo había puesto anteriormente, pero lo di por hecho y nunca me había molestado en verificarlo hasta ahora, descubriendo que era una mentira

Remuevan las líneas de comentarios y funcionará perfectamente. Por supuesto, de esta forma, la página ya no validará...

Una disculpa verdaderamente grande, no sabía el engaño en el que había vivido hasta hoy. Dejo una página donde se muestra como funciona: http://daphyre.net/notie.html (Ver en IE y cualquier otro navegador).

Me disculpo una vez más, y espero no causar problemas a nadie por esto. Un saludo a todos.

lucianonicolas · #21 (**permalink**) 20/02/2010, 10:37

Bueno, esto se desvió del tema original, pero me parece un tema mucho más interesante.

Todavía no creo comprenderlo cabalmente al asunto. Si los comentarios condicionales los lee SOLAMENTE IE, ¿Cómo es posible que los otros navegadores lean el ? ¿Todos los navegadores, excepto IE, leerán el código que está dentro de ese comentario?

El ejemplo que dió daPhyre parece muy claro, los demás navegadores sí leen el código que está dentro de , pero IE no lo lee. Lo cual me lleva a la siguiente pregunta: ¿esto significa que TODOS los navegadores han implementado código propietario de Microsoft para reconocer este tipo de comentarios y no ignorar su contenido?

Probé el ejemplo de daPhyre en toda mi batería de navegadores {Firefox, Chrome, Safari, Opera e IE} y el único que no reconoce los estilos, como es de esperar es IE.

La verdad esto me dejó muy desconcertado. No me gusta usar código propietario y no estándar, pero sin duda puede llegar a ser útil en algún momento.

¡Saludos a todos!

alexk · #22 (**permalink**) 20/02/2010, 11:36

Cita:

pero IE no lo lee. Lo cual me lleva a la siguiente pregunta: ¿esto significa que TODOS los navegadores han implementado código propietario de Microsoft para reconocer este tipo de comentarios y no ignorar su contenido?

R= NO... simplemente los nagevadores (ie's no) detectan que no es una etiqueta html y pasan de ella... los comentarios condicionales son unicos de MS... el link que pone daPhyre
http://msdn.microsoft.com/en-us/libr...12(VS.85).aspx
lo deja todo claro

Cita:

Probé el ejemplo de daPhyre en toda mi batería de navegadores {Firefox, Chrome, Safari, Opera e IE} y el único que no reconoce los estilos, como es de esperar es IE.

La verdad esto me dejó muy desconcertado. No me gusta usar código propietario y no estándar, pero sin duda puede llegar a ser útil en algún momento.

si y no...
mas bien NO... porque?

lo primero es que ie (segun yo) lo toma como un "comentario" y nada mas...
pero para que te enteres mas mira el link que te menciono antes

otra es que si sigues las normas de una correcta maquetacion hay un 90% (segun yo) de que sea cross-browser...
(claro descartando png, loquesea:hover, position:fixed, entre otros... que se arreglan con un simple JS)

tambien tenemos los comentarios condicionales como ultima alternativa...
ya que en teoria... un maquetador solo tiene pequeños tropiesos con ie6 y por eso no le veo utilidad (segun yo de nuevo)... ya que al menos en mi caso me gusta tener todo valido tanto como XHTML/CSS...

creo que seria una "solucion" de ultimo recurso... pero ultimo... muy ultimo...

pi_imagine · #23 (**permalink**) 23/02/2010, 03:02

Cita:

Iniciado por daPhyre

@Jomarmuro ¡Estoy seguro! Revisa el código y te darás cuenta del pequeño truquito que ocurre. La condicional está en comentarios, así que todos los navegadores lo ignoran, pero IE lee "Si no es IE" y por tanto lo descarta.

Código HTML:

<!--[if !IE]-->

@pi_imagine Los CSS son iguales, pero hay algunos atributos que IE lee de forma incorrecta, por lo que hay que hacer correcciones específicas para este navegador, y una forma es con un CSS exclusivo en el que le das ciertas indicaciones que no son necesarias para los demás, y que incluso podrían hacer que no anten bien dichas correcciones.

Buenas, mi duda es....
cuales son los atributos que IE lee de forma incorrecta???=
ains....
paciencia...
gracias.¡¡¡¡¡