Declarar <nav> para ie (HTML5)

NaRanJiTo78 · #1 (**permalink**) 23/05/2012, 01:25

Hola!

Tengo una página que estoy haciendo (www.querecuerdos.es) en html5, en la cual la declaración de estilos para <nav> es muy simple:

Código HTML:

nav {
	position:relative;
	width:100%;
	background:url(../img/nav_back.jpg)repeat-x;
	top:140px;}

El caso es que no sale la imagen de fondo (nav_back.jpg) en IE.

Hay algún hack para ésta etiqueta?O cómo podría solucionarlo?Ya que he buscado pero sin encontrar...

Un saludo!

ryugen · #2 (**permalink**) 23/05/2012, 05:24

El hack más conocido para eso es el html5 shiv:

http://code.google.com/p/html5shiv/

Que consiste en crear el elemento, para que IE pueda estilarlo

Código Javascript:

Ver originaldocument.createElement('nav');

aunque el shiv completo incluye algunas cositas más

NaRanJiTo78 · #3 (**permalink**) 23/05/2012, 10:48

Cita:

Iniciado por ryugen

El hack más conocido para eso es el html5 shiv:

http://code.google.com/p/html5shiv/

Que consiste en crear el elemento, para que IE pueda estilarlo

Código Javascript:

Ver originaldocument.createElement('nav');

aunque el shiv completo incluye algunas cositas más

Hola ryugen, gracias por contestar!

El código de HTML5 shiv ya lo tengo implementado en el <head>, pero sigue sin funcionar...

Cita:

Hay que hacer algo más?

Un saludo!!

ryugen · #4 (**permalink**) 23/05/2012, 12:52

Prueba con el siguiente CSS, ya que los elementos creados por el HTML5 shiv son elementos en línea, si quieres que se comporten como bloques debes explicitarlo

Código CSS:

Ver originalnav { display:block; }

NaRanJiTo78 · #5 (**permalink**) 24/05/2012, 03:03

vaya, pues ni poniendolo con

Cita:

nav { display:block; }

se ve el fondo...que cosa más rara!

NaRanJiTo78 · #6 (**permalink**) 24/05/2012, 04:43

He probado con

Código HTML:

Ver original<!--[if lt IE 9]>
<script type="text/javascript">
   document.createElement("nav");
   document.createElement("header");
   document.createElement("footer");
   document.createElement("section");
   document.createElement("article");
   document.createElement("aside");
   document.createElement("hgroup");
</script>
<![endif]-->

Y tampoco...

Tedel · #7 (**permalink**) 24/05/2012, 19:13

Dos opciones:

O bien la instrucción background está mal escrita, viejo, porque, o abrevias todo o usas las instrucciones de background separadas....

background-attachment: url(../img/nav_back.jpg);
repeat: repeat-x;

...o el que falta un espacio entre ) y repeat está arruinando el comando:

background:url(../img/nav_back.jpg) repeat-x

NaRanJiTo78 · #8 (**permalink**) 25/05/2012, 04:48

pues si que era un maldito espacio...gracias Tedel! :)