Encore des décallages en tout genre dans IE

Bonjour.

Plutôt qu'une longue description, voici un montage juxtaposé de FF et IE6 qui montre bien les problèmes :

http://img718.imageshack.us/img718/3023/copiez.jpg

Voici la feuille de style :

/*----------------------------------------------------------------------*/
/* STRUCTURE GENERALE */
/*----------------------------------------------------------------------*/

html {
	font-size: 100%;
	font-family: "Trebuchet MS", sans-serif, Arial, Verdana, Helvetica;
} 

/* Corps de la page */
body {
	background-color: #7B1F12;
	margin: 0;
	font-size: 0.8em;
	position: relative;
}

/* La page */
#page {
	background-color: #FEFAEE;
	margin: 0 auto;
	width: 900px;
	border: 1px solid #68311C;
	position: relative;
}

/* Le bandeau du haut de page */
#top {
	background-color: #EFD19F;
	width: 900px;
	height: 180px;
	margin: 0;
	position: relative;
}

/* La zone principale */
#content {
	display: inline;
	float: left;
	width: 640px;
	margin: 15px 0 0 15px;
	padding: 0 15px 0 0;
	border-right: 1px groove #68311C;
}

/* La sidebar */
#sidebar {
	float: right;
	width: 200px;
	margin: 15px 15px 0 0;
}

/* L'alignement juxtaposé de "content" et de "sidebar" */
#container {
	padding: 0;
	overflow: auto;
}

/* Le bandeau du bas de page */
#bottom {
	background-color: #EFD19F;
	width: 900px;
	height: 50px;
	position: relative;
}


/*----------------------------------------------------------------------*/
/* LES LIENS */
/*----------------------------------------------------------------------*/

a:link, a:visited {
	text-decoration: none;
	color: #68311C;
}

a:hover {
	text-decoration: underline;
	color: #424242;
}


/*----------------------------------------------------------------------*/
/* LES TEXTES ET LES PARAGRAPHES */
/*----------------------------------------------------------------------*/

/* Texte standard */
p {
	text-align: justify;
}

/* Datation des galeries et des textes */
p.date {
	font-size: 0.9em;
	color: #910A35;
	margin: 5px 0 0 0;
}

/* Copyright du bas de page */
p.copyright {
	text-align: center;
	padding: 15px 0 0 0;
}

/* La zone pour les liens standards */
p.link {
	text-align: center;
	margin: 0;
}

/* La zone pour les liens de suite des textes */
p.continuation {
	padding: 0 0 25px 0;
	text-align: left;
	border-bottom: 1px groove #68311C;
	padding-bottom: 20px;
}

/* La zone pour les textes de la sidebar */
p.sidebar {
	font-size: 0.9em;
	color: #910A35;
	margin: 0 0 5px 0;
	line-height: 1.4em;
}


/*----------------------------------------------------------------------*/
/* DIVERS */
/*----------------------------------------------------------------------*/

/* Titre dans le haut de page */
h1 {
	font-size: 2em;
	text-transform: uppercase;
	margin: 0;
	padding: 10px 0 0 10px;
}

/* Titre dans le content */
h2 {
	background: url(images/title.png) left center no-repeat;
	padding: 0 0 0 30px;
	margin: 0;
	font-size: 1.5em;
	color: #68311C;
	text-transform: uppercase;
}

/* Titre dans la sidebar */
h3 {
	margin: 10px 0 5px 0;
	font-size: 1.1em;
	text-transform: uppercase;
}

Merci de m'aider à résoudre tout ça.

Note : pour ce test, j'ai utilisé IE6. Quand la mise en page sera correcte dans ce vieux navigateur, la sera-t-elle automatiquement dans les 7 et 8 ?
Modifié par Nerva (18 Apr 2010 - 11:11)

Bonjour,

Nerva a écrit :
Note : pour ce test, j'ai utilisé IE6. Quand la mise en page sera correcte dans ce vieux navigateur, la sera-t-elle automatiquement dans les 7 et 8 ?

En corrigeant séparément pour les 3 (enfin 4 si tu prévois le fait qu'il y aura un après IE8) :
Y a des chances que les correctifs pour IE 7 soient les mêmes que pour IE 6 (en clair il faut pour IE7 de 5 à 100% des correctifs pour IE 6).
Y a des chances qu'IE 8 n'ait besoin d'aucun correctif. Et les IE futurs non plus.

En appliquant indistinctement les correctifs pour IE 6 à toutes les versions d'IE : tu vas tout casser dans IE 8.

Conclusion : vive les commentaires conditionnels chargeant une CSS additionnelle pour IE6 et une autre pour IE7.

Si il faut faire une feuille de style par navigateur, où va-t-on !

Alors je suis parvenu à faire quelque chose d'à peu près correct. La marge droite de la sidebar est un peu plus large que la gauche, mais c'est bon.

Par contre, il y a encore deux petits trucs.

1) Dans une galerie de photos, pour centrer verticalement la vignette, IE6 ne reconnaît pas la propriété vertical-align: middle; et mes vignettes sont donc alignées en haut de leur cadre. Que mettre à la place ?

2) IE6 ne semble pas non plus reconnaître dans la page HTML la valeur auto pour width et height : les vignettes ne s'affichent tout simplement pas. Sans ces valeurs, la feuille passe sans problème dans la validation W3C mais est-ce que ça ne risque pas de poser problème dans un autre navigateur ?

Merci.

Hello,

Nerva a écrit :
Si il faut faire une feuille de style par navigateur, où va-t-on !

Si à l'heure actuelle, il existe encore des navigateurs qui ne reconnaissent pas CSS2 (1998), où va-t-on ?

Je ne les ai encore jamais testés, mais Chrome, Opera, etc... posent-ils certains problèmes CSS ?

---

Bon, j'ai résolu mon problème de vignettes non centées verticalement. A la base, j'ai utilisé le style proposé par Florent V que j'ai adapté de cette manière :

.gallery {
	width: 800px;
	overflow: hidden;
	margin: 10px auto;
	padding: 0;
	list-style: none;
}

.gallery li {
	float: left;
	width: 150px;
	margin: 5px;
}

.gallery .thumb {
	display: block;
	height: 150px;
	width: 150px;
	line-height: 150px;
	text-align: center;
	border: 1px solid #D2D2D2;
	background-color: #FFFFFF;
}

.gallery .thumb img {
	vertical-align: middle;
}

Voici le HTML :

<ul class="gallery">
	<li><span class="thumb"><a href="photo.jpg" rel="lightbox-cats" title="Test" /><img src="vignette.jpg" alt="Afficher" /></span></li>
	...
	...
</ul>

Dans IE6, les vignettes sont donc affichées en haut de leur cadre. Et en cherchant un peu, j'ai trouvé ceci (pour le CSS spécifique) qui permet de les centrer correctement :

.gallery li {
    position: relative;
    width: expression(this.childNodes[0].offsetWidth+"px");
}

.gallery .thumb img {
    position: relative;
    top: 50%;
    margin-top: expression(-this.offsetHeight/2);
}

Le lien : http://www.gatellier.be/blog/ie-vertical-align-middle

J'ai adapté car la position absolute calait cette fois-ci les vignettes sur la droite...
Modifié par Nerva (20 Apr 2010 - 10:28)

Hello,

Pour éviter une bonne partie des soucis de décalages entre IE6 et les autres navigateurs, ne JAMAIS spécifier à la fois une largeur (width) et un padding(left ou right) au même élément comme tu l'a fait pour #content à cause du box model bug d'IE6. Le problème est le même sur la hauteur avec les padding(top ou bottom).