"hackear" ie7 (CSS)

[Jazzticktock]

Mi web se visualiza muy bien en IE9 y en IE8 (Aunque de aqui solo me falte por solucionar el tema de esquinas redondeadas.)

El verdadero problema es ie7. (se me ven mal absolutamente todas las páginas. Me explico:

El problema es que tengo un solo CSS para albergar los estilos de mi web, y ya en una de las páginas, en este caso la home.html, la tengo "hackeada" de la siguiente manera:

Código:

article {
    height: 310px;
	*height: 330px; // El asterisco significa que solo lo leen las versiones de IE7.
    width: 100%;
    z-index: 1000;
}

Ahora lo que me pasa es que al hackear la siguiente pagina, en este caso fotografia.html, me pide un *height: 640px; Muy diferente al height que tengo puesto en home.html como puedes ver.

Entonces, una orden me anula la otra. El problema es que tengo la soluccion en la mano con una contradicción, y ahora no se que camino elegir para "hackearlo".

He leido en internet lo siguiente:

1. Que haga CSS diferentes para cada pagina hackeada. (me parece una estupida idea..si tengo 15 html, tendria que hacer 15 css......

Y lo que he pensado es... meter en la cabecera de cada pagina HTML lo que debería de hackear..... Pero.... no creo que valide. A parte, es una buena práctica? Qué podría hacer?.

Gracias por vuestra colaboración.

[pzin]

¿Y cómo haces para que coja una altura diferente cada article en cada página para otros navegadores? Hazlo igual para el hack de IE7, ¿no?

Otra pregunta sería que si realmente es necesario aplicar un height para lo que quieres hacer.

[stramin]

Ninguna de las acciones que has realizado tienen relación alguna con un "hackeo", hackear es controlar información ajena sin tener estos permisos.

Lo que estás haciendo se llama simplemente "desarrollar una hoja de estilos".

en cuanto a tu problema, lo que te sugiero es que en estos casos no hagas hojas de estilo, utiliza estilos en cascada dentro del mismo archivo, o sea:

en home.html donde está el artículo pones

Código HTML:

<style>
article {
    *height: 330px; // El asterisco significa que solo lo leen las versiones de IE7.
}
</style>
<article>
...
 

mientras que en fotografía.html

Código HTML:

<style>
article {
    *height: 640px; // El asterisco significa que solo lo leen las versiones de IE7.
}
</style>
<article>
...
 

También me uno a lo que pregunta Bonez:

realmente es necesario aplicar un height para lo que quieres hacer?

si lo que deseas es ocupar toda la página hay algunos trucos mejores para hacerlo :)

[emprear]

Primero, no me preocuparía mucho por validar el css (eso sí, que la sintáxis sea correcta)
Segundo, si tenés varios height diferentes para cada página, no es "estupido" sino necesario que reescribas el valor para la propiedad (recordá que los css se leen secuencialmente, a partir de ahi

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

Código CSS:

article {
    height: 310px;
    *height: 330px; /* valor por defecto para IE7 asumiendo que de tus 15 html haya varios que requieren este height */
    width: 100%;
    z-index: 999; /* no funciona sin absolute o fixed */
    border: solid 1px #000;
    display: block;
}
 

posteriormente a la llamada al archivo de estilos, en cada página que lo requiera

Código CSS:

<!--[if IE 7]>
 
<style type="text/css">
/*<![CDATA[*/
 
article {
height: 600px; /* o lo que se necesite */
}
 
/*]]>*/
</style>
<![endif]-->
 

De paso te aclaro que la propiedad z-index no funciona si no declarás un position absolute ó fixed.
Supongo también que en alguna parte implementas algún tipo de reset para darle display block a tus article e incluís

Código HTML:

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

ó similiar

SAludos

[Jazzticktock]

Muchas gracias Bonez y Stramin, tenéis razón, no debí de haber empleado height, debí de haber empleado un padding o en su defecto un margin, ambos me valían, pero con las prisas de entregar el proyecto se me pasó completamente.. y ahora tengo un lío de CSS que ni si quiera se si me dará tiempo solucionar. ¡Estoy en pleno aprendizaje!

Gracias Emprear a ti también, muy buenos consejos todos, os lo agradezco mucho. Si me preocupa tanto la validación es porque en el proyecto me la puntuarán con gran miramiento.

En un principio había pensado la solución que stramin me propuso: Incluir el código CSS en la cabecera. Pero no sé si esto es una práctica demasiado cuestionable.

Que locura... es que por decirlo así.. tengo el "css" plenamente montado y cada cosa que cambio me vuelve un poco locatis.

Karma para vosotros.