Esto se puede hacer???

NaSHoOo · #1 (**permalink**) 20/10/2008, 03:17

Hola amigos, vereis, la web que estoy haciendo, se ve correctamente en Firefox, IE7, Opera, etc...

Pero no lo hace bien en IE6 e inferiores (problemas de margenes y tal...) y se me descuadran los divs.

Se me habia ocurrido que quizas hay alguna forma de que si el navegador es IE6 o inferiores, se pueda seleccionar una hoja de estilos determinada.

Me acorde que habia un codigo del PNG Fix que seleccionaba un codigo javascript si el navegador era inferior a IE7, y pense que podria funcionar con la seleccion de una hoja de estilos.

El codigo original es este:

Código:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

y habia pensado que podria transformarlo en algo asi:

Código:

<!--[if lt IE 7.]>
<link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" />
<![endif]-->

Estoy cometiendo un sacrilegio o este codigo me respetaria la representacion "buena" en los navegadores Firefox, Opera e IE7 y obligaria a IE6 a coger el CSS que yo le definiera??

Espero no estar metiendo mucho la gamba... :P

Si esto no funcionase, sabeis de alguna forma de hacer lo que pretendo?? (Seleccionar una hoja de estilo diferente para IE6 al resto de navegadores...)

Muchas gracias a todos por vuestra ayuda

Mikmoro · #2 (**permalink**) 20/10/2008, 03:25

Pues sí, se hace exactamente así. Sólo elimina el punto detrás del 7:

<!--[if lt IE 7]>

NaSHoOo · #3 (**permalink**) 20/10/2008, 03:32

OLE yo

graciasss

NaSHoOo · #4 (**permalink**) 20/10/2008, 07:58

Pues de momento no puedo decir lo de ole yo... porque no me funciona... :S

Lo he probado como tu me decias Mikmoro, pero no me funciona. Los dos archivos css estan en el raiz del sitio, he comprobado nombres y estan correctos. La unica diferencia entre los archivos que he hecho, es la imagen de cabecera de la web.

Para Firefox, IE7 y Opera tengo un PNG con transparencias, pero para IE6 y anteriores la cambio por una gif... y no hace nada

Sabes si hay alguna otra forma de hacerlo?

Muchas gracias por tu ayuda...

Mikmoro · #5 (**permalink**) 20/10/2008, 09:53

¿Lo has colocado después de los estilos o después de cargar la primera hoja de estilo?
Debes hacer que primero se cargue la hoja que es para todos, y después la específica para IE6.

Pon exactamente cómo has puesto la cabecera a ver si hay algún pequeño error.

America|UNK · #6 (**permalink**) 20/10/2008, 09:53

Coloca el css, tambien prueba agregarle !important despues del valor.
#logo {background:transparent url(logo.gif) no-repeat scroll 0pt !important; }

NaSHoOo · #7 (**permalink**) 20/10/2008, 11:35

Este es el codigo de mi cabecera de pagina:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title>ZonaPixel Pruebas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<meta name="generator" content="WordPress 2.6.1" /> <!-- leave this for stats please -->

	<link rel="stylesheet" href="http://www.zonapixel.es/pruebaweb/wp-content/themes/zonapixel/style.css" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.zonapixel.es/pruebaweb/?feed=rss2" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.zonapixel.es/pruebaweb/?feed=rss" />

	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.zonapixel.es/pruebaweb/?feed=atom" />
	<link rel="pingback" href="http://www.zonapixel.es/pruebaweb/xmlrpc.php" />

		<link rel='archives' title='Octubre de 2008' href='http://www.zonapixel.es/pruebaweb/?m=200810' />
		<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.zonapixel.es/pruebaweb/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.zonapixel.es/pruebaweb/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6.1" />

	
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" />
	<![endif]-->

	
</head>

Ves algo extraño Mikmoro??

Mikmoro · #8 (**permalink**) 20/10/2008, 12:01

El comentario condicional en sí yo lo veo bien

<link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" />

Ahora bien, lo que no puedo saber es dónde está ubicada tu hoja de estilo, que según pones, está en la misma carpeta que el index.

Tu hoja general está en:

<link rel="stylesheet" href="http://www.zonapixel.es/pruebaweb/wp-content/themes/zonapixel/style.css" type="text/css" media="screen" />

y no sabemos dónde está exactamente la de IE, pero si la tienes en la misma carpeta que la general, podrías probar a llamarla de la misma manera:

<link rel="stylesheet" href="http://www.zonapixel.es/pruebaweb/wp-content/themes/zonapixel/style_ie6.css"

Mikmoro · #9 (**permalink**) 20/10/2008, 12:04

En tu hoja para IE, que efectivamente está en la misma carpeta que la general, veo tu gráfico de cabecera como png:

background-image: url(imagenes/cabecera_ie6.png);

Otra cosa: en la hoja especial, no necesitas repetirla por completo, sólo pon las cosas que deban ser diferentes y nada más. Eso aligera mucho la carga.

NaSHoOo · #10 (**permalink**) 20/10/2008, 12:19

Mikmoro, ante todo muchas gracias.

Te comento,

la ruta al archivo css general sale absoluta porque en realidad lo que yo tengo en el head es la funcion php que llama al archivo css, pero se encuentra en la misma carpeta raiz que el archivo style_ie6.css

Probare a ponerle la ruta absoluta, a ver que tal.

Con respecto a la imagen de la cabecera_ie6.png, aunque es el mismo formato que la otra (denominada cabecera.png), no tiene transparencias como la principal, es un arreglo a lo de las transparencias png en ie6...

muchas gracias, ya comentare que tal ha ido...

NaSHoOo · #11 (**permalink**) 21/10/2008, 11:51

Ya esta arreglado.

Por si alguien tiene el mismo problema, la solucion es esta:

Código:

<!--[if lte IE 7]>
<link rel="stylesheet" href="http://ruta-absoluta/style_ie6.css" type="text/css" media="screen" />
<![endif]-->

Asi me lo ha cogido sin problemas