Colonnes factices, layout, rendu sous IE 5, 6, 7, 8 et Chrome

Bonjour,

Je suis en train de concevoir mon premier design xhtml/css (en l'occurrence un thème Wordpress) qui fonctionne sous Firefox et vient la phase d'adaptation afin d'avoir un rendu similaire ou approchant sur l'ensemble des principaux navigateurs.

Évidemment ce n'est pas très original mais je rencontre des soucis de rendu de mise en page sous IE et Chrome et toutes aides, remarques ou conseils sera appréciés à sa juste valeur. Je vais être le plus explicite possible et je mettrais à jour le post au fur et à mesure des corrections.

Préalable : la page html et la feuille de style sont passées avec brio dans le validateur du W3C ce qui n'est pas un gage de succès mais élimine déjà certaines erreurs basiques (DOCTYPE ...).

Présentation rapide et succincte de la structure de la page :

un DIV "page" englobant tous les éléments du body

Un DIV "header" contenant l'image de fond du menu, le titre du site, un paragraphe de présentation du site, le logo du site et un menu de navigation horizontale

Un DIV "central" contenant tous les autres éléments de la page (div "sidebar-left", div "content", div "sidebar-right" et div "footer")

J'utilise le système des colonnes factices pour donner l'illusion que les DIV "sidebar-left" et "content" ont la même taille (au passage ça me permet d'ajouter facilement un effet d'ombre).

Les div "sidebar-left", div "content" et div "sidebar-right" sont positionnés en float (respectivement left pour les deux premiers et right pour le dernier). Le dernier div ("footer") est positionné en dessous via un clear:both

le résultat attendu et obtenu sous Firefox


Sous IE 8 j'ai d'abord eu un grand moment de solitude quand j'ai vu le design totalement explosé.

La lecture de A propos du Modèle de boîte Microsoft (ou "quirks") http://www.alsacreations.com/tuto/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html m'a permit d'éliminer une 1ère source de décalage due à la présence d'un commentaire HTML avant le DOCTYPE.

Il me reste encore deux soucis :

1/ le logo dans le header est décalé de 11px vers le bas. => corrigé en appliquant un height: 0 à #header h1
2/ l'image d'arrière-plan pour créer l'illusions des deux colonnes à gauches dans le div "central" n'apparaît pas. => corrigé il suffisait d'écrire les propriétés de background dans le bon ordre


Sous IE 7
1/ la bordure orange sous Accueil ne fait que 1px au lieu de 4px.
2/ l'image d'arrière-plan pour créer l'illusions des deux colonnes à gauches dans le div "central" n'apparaît pas. il suffisait d'écrire les propriétés de background dans le bon ordre
3/ le titre H3 est beaucoup plus gros => corrigé en redéfinissant font-size: 1em
4/ l'espacement sous OK a été augmenté de 19px => corrigé en conférant le layout à l'élément form via height: 1%
5/ idem 3/ => corrigé en redéfinissant font-size: 1em
6/ le titre H4 est beaucoup plus gros que prévu => corrigé en redéfinissant font-size: 1em


Sous IE 6
1/ la bordure orange sous Accueil ne fait que 1px au lieu de 4px.
2/ l'image d'arrière-plan pour créer l'illusions des deux colonnes à gauches dans le div "central" n'apparaît pas. => corrigé il suffisait d'écrire les propriétés de background dans le bon ordre
3/ le titre H3 est beaucoup plus gros => corrigé
4/ l'espacement sous OK a été augmenté de 19px et le bloc rechercher a été élargi de 2px => corrigé
5/ idem 3/ => corrigé
6/ le titre H4 est beaucoup plus gros que prévu => corrigé
7/ le bloc Connexion est décalé vers la gauche
8/ L'ensemble de la page n'est plus centré mais collé sur le bord gauche => corrigé
9/ les sous catégories (h4) n'occupent plus la même largeur que les catégories principales (h3) => corrigé



Sous IE 5.5
1/ la bordure orange sous Accueil ne fait que 1px au lieu de 4px.
2/ l'image d'arrière-plan pour créer l'illusions des deux colonnes à gauches dans le div "central" n'apparaît pas. => corrigé il suffisait d'écrire les propriétés de background dans le bon ordre
3/ le titre H3 est beaucoup plus gros => corrigé
4/ l'espacement sous OK a été augmenté de 19px et le bloc rechercher a été élargi de 2px => corrigé
5/ idem 3/ => corrigé
6/ le titre H4 est beaucoup plus gros que prévu => corrigé
7/ le bloc Connexion est décalé vers la gauche
8/ L'ensemble de la page n'est plus centré mais collé sur le bord gauche => en appliquant text-align: center; au body
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
9/ les sous catégories n'occupent plus la même largeur que les catégories principales (126px au lieu des 140px prévus)=> Corrigé en redéfinissant la largeur totale via width: 152px (correspondant à la somme du bloc + padding + border) des ul a et des ul ul a



Sous Chrome
1/ l'image du logo est décalée vers le bas de 17px vers le bas entraînant de fait le décalage du menu horizontal. => corrigé en appliquant un height: 0 à #header h1 et à #header p

2/ par contre le "solutionnage" du 1/ fait apparaître un décalage d'un 1px vers le haut du menu horizontal visible au niveau de la bordure orange

Modifié par Nohant (15 Dec 2009 - 21:44)

<!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>Le site</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://localhost/wp-content/themes/lcd/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/feed/atom/" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />

<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='cleaner-gallery-css'  href='http://localhost/wp-content/plugins/cleaner-gallery/cleaner-gallery.css?ver=0.7' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css'  href='http://localhost/wp-includes/js/thickbox/thickbox.css?ver=20090514' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Titre du site' href='http://localhost' />
<meta name="generator" content="WordPress 2.8.6" />
  
</head>
<body>

<div id="page">
	
	    <div id="header">	    	
	        <h1><a href="http://localhost" title="Titre du site">Le site</a></h1>

	        <p>Sous titre du site</p>
	        <!-- Logo --> 
	        <a id="logo" href="http://localhost" title="Le logo"><img height="86" width="137" src="/wp-content/themes/lcd/images/logo.png" alt="Logo" title="Page d'accueil" /></a> 
	           	        
	        <!-- en remplacement de wp_list_pages() -->
	        <!-- pr?ciser les pages ? exclure (cf. pied de page) -->
	 				<div class="menu"><ul><li class="page_item page-item-121 current_page_item"><a href="http://localhost" title="Accueil">Accueil</a></li><li class="page_item page-item-126"><a href="http://localhost/actualite-2/" title="Actualité">Actualité</a></li></ul></div>
	 				
	    </div>

<div id="central">

<!-- appel de la sidebar gauche -->
<div id="sidebar-left">
	<ul>
		
			
		<!-- liste les cat?gories d'article -->
			<li class="cat-item cat-item-3"><a href="http://localhost/rubrique/categorie-un/" title="Voir tous les articles classés dans Catégorie Un">Catégorie Un</a>
<ul class='children'>
	<li class="cat-item cat-item-4"><a href="http://localhost/rubrique/categorie-un/categorie-1-1/" title="Voir tous les articles classés dans Catégorie 1.1">Catégorie 1.1</a>
</li>
	<li class="cat-item cat-item-31"><a href="http://localhost/rubrique/categorie-un/categorie-1-2/" title="Voir tous les articles classés dans Catégorie 1.2">Catégorie 1.2</a>

</li>
	<li class="cat-item cat-item-30"><a href="http://localhost/rubrique/categorie-un/categorie-1-3/" title="Voir tous les articles classés dans Catégorie 1.3">Catégorie 1.3</a>
</li>
	<li class="cat-item cat-item-29"><a href="http://localhost/rubrique/categorie-un/categorie-1-4/" title="Voir tous les articles classés dans Catégorie 1.4">Catégorie 1.4</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://localhost/rubrique/categorie-un/categorie-1-5/" title="Voir tous les articles classés dans Catégorie 1.5">Catégorie 1.5</a>
</li>
	<li class="cat-item cat-item-6"><a href="http://localhost/rubrique/categorie-un/categorie-1-6/" title="Voir tous les articles classés dans Catégorie 1.6">Catégorie 1.6</a>
</li>

	<li class="cat-item cat-item-10"><a href="http://localhost/rubrique/categorie-un/categorie-1-7/" title="Voir tous les articles classés dans Catégorie 1.7">Catégorie 1.7</a>
</li>
	<li class="cat-item cat-item-8"><a href="http://localhost/rubrique/categorie-un/categorie-1-8/" title="Voir tous les articles classés dans Catégorie 1.8">Catégorie 1.8</a>
</li>
	<li class="cat-item cat-item-9"><a href="http://localhost/rubrique/categorie-un/categorie-1-9/" title="Voir tous les articles classés dans Catégorie 1.9">Catégorie 1.9</a>
</li>
	<li class="cat-item cat-item-12"><a href="http://localhost/rubrique/categorie-un/categorie-1-10/" title="Voir tous les articles classés dans Catégorie 1.10">Catégorie 1.10</a>
</li>
	<li class="cat-item cat-item-11"><a href="http://localhost/rubrique/categorie-un/categorie-1-11/" title="Voir tous les articles classés dans Catégorie 1.11">Catégorie 1.11</a>

</li>
	<li class="cat-item cat-item-14"><a href="http://localhost/rubrique/categorie-un/categorie-1-12/" title="Voir tous les articles classés dans Catégorie 1.12">Catégorie 1.12</a>
</li>
</ul>
</li>
	<li class="cat-item cat-item-15"><a href="http://localhost/rubrique/categorie-2/" title="Voir tous les articles classés dans Catégorie 2">Catégorie 2</a>
<ul class='children'>
	<li class="cat-item cat-item-16"><a href="http://localhost/rubrique/categorie-2/categorie-2-1/" title="Voir tous les articles classés dans Catégorie 2.1">Catégorie 2.1</a>
</li>
</ul>
</li>

	<li class="cat-item cat-item-22"><a href="http://localhost/rubrique/categorie-3/" title="Voir tous les articles classés dans Catégorie 3">Catégorie 3</a>
</li>
 <!-- tri et garde uniquement les categories voulues, supprime l'intitul? 'Cat?gories' -->
	</ul>
</div>
<div id="content"> <!-- contenant principal -->
		<!-- Message d'accueil -->
								
							
				<div class="post-559 post hentry category-10" id="post-559"> <!-- permet d'avoir un ID unique pour chaque post -->	
							
						<h2>Bienvenue</h2>

						
						<div class="post_content">		
							<p><em>Lopsem</em> irem et tenebri, contra si tendere pergas proptera quia uis magnat ipsius, aear per purum gratuite simultanecra feruntur, et feriunt oculos turbantia <strong>…</strong></p>
						</div>				

				</div>
											
		<!-- Si un post a ?t? point? pour ?tre affich? en 1?re page -->
				
</div>

<!-- appel de la sidebar droite -->
<div id="sidebar-right">
	<div id="right-top">

		<!-- Dans la rubrique Actu remplacer le moteur de rechercher par une option de suivi par mail ou RSS -->
		 	
			<!-- formulaire de recherche -->
			<h3>Rechercher</h3>
<form method="get" id="searchform" action="http://localhost/">
	<div>
		<input type="text" value="" name="s" id="search-txt"/>
		<input type="submit" id="search-submit" value="OK"/>
	</div>
</form>		
			</div>

	<ul>		
		<li id="text-6" class="widget widget_text"><h3 class="widgettitle">Rubriques</h3>			<div class="textwidget"><h4>Rubrique Un</h4>
<p>un deux trois quatre<br />
un deux trois quatre<br />
un deux trois quatre</p>
<h4>Rubrique Un</h4>
<p>un deux trois quatre<br />

un deux trois quatre<br />
un deux trois quatre</p>
<h4>Rubrique Un</h4>
<p>un deux trois quatre<br />
un deux trois quatre<br />
un deux trois quatre</p>
<h4>Rubrique Un</h4>
<p>un deux trois quatre<br />
un deux trois quatre<br />

un deux trois quatre</p>
<h4>Rubrique Un</h4>
<p>un deux trois quatre<br />
un deux trois quatre<br />
un deux trois quatre</p>
</div>
		</li>
		
	</ul>
</div>
<!-- appel du pied de page -->

	<div id="footer">
		<!-- pr?ciser les pages ? inclure -->
	 	<div class="menu"></div>
						
		<ul id="menu-admin">
			<li><a href="http://localhost/wp-admin/">Admin. du Site</a></li>			<li><a href="http://localhost/wp-login.php?action=logout&_wpnonce=5a3cb7cfc8">Déconnexion</a></li>
		</ul>
		
	<script type='text/javascript' src='http://localhost/wp-includes/js/thickbox/thickbox.js?ver=3.1-20090123'></script>
	
	</div>
<!-- div central -->
</div>
<!-- div page -->
</div>
</body>
</html>

le CSS par défaut

/* Paramètres par défaut */ 
html {	 
  /*font-size: 100%;*/ /*bug d'IE 6-7*/ 
}

body {
	margin:0;
	border:0; /* lisse les différences entre navigateurs */
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;	/* Police par défaut, choisir des polices de remplacement le plus approchant */
	font-size: .875em;
	line-height: 1.6; /* Interlignage par défaut */
	background: #EFECE2; /* Fond de page */
	/*text-align: center;*/ /* pour corriger le bug de centrage IE<6 */
}

img {
	border: 0 none;
	ligne-height: 1em;
}


/*==========================*/
/* Positionnement global */
/*==========================*/

#page {
	width: 986px; /* Largeur de notre gabarit */
	margin: 0 auto; /* Permet de centrer la page en utilisant les marges auto */
	/*text-align: left;*/ /* pour rétablit l'alignement normal du texte suite au bug de centrage IE<6*/
}

/****************/
/* Bloc du haut */
/****************/
#header {		
	background: #4E301F url(images/header.png) no-repeat top left; /* la bannière du logo */
	height: 126px;
}
		/* Positionne le titre textuel hors de la zone d'affichage */
		#header h1 {
			text-indent: -5000px;
			margin: 0 0 0 0;
			padding: 0;
			line-height: 0;
			font-size: 0;/*pour Chrome et IE8*/
			height: 0;/*pour Chrome*/
		}
		/* Positionne le slogan textuel hors de la zone d'affichage */
		#header p {
			text-indent: -5000px;
			margin: 0 0 0 0;
			padding: 0;
			line-height: 0;
			font-size: 0;/*pour chrome*/
			height: 0;/*pour Chrome*/
		}

/* Positionnement du logo */
#logo {
	display: block;
	margin: 4px 0 0 20px;
}


#header ul {
	font-weight: bold; /* mise en gras */
	list-style-type: none; /* Supprime les puces du menu */
	margin: 2px 0 0 0; /* Positionne le menu horizontale */
	padding : 2px 0 0 0;
	height: 21px; /* Hauteur de la bande marron du menu */
}

#header li {
	float: left; /* Transforme la liste à puce en bloc flottant */
}

/* Mise en forme des liens */
#header .menu a {	/* Ajout de la classe .menu pour que l'effet ne s'applique pas au logo */
	color: white; /* Texte en blanc */
	text-decoration: none; /*supprime le soulignement des liens*/
	border-right: 2px solid white; /* Pour avoir la barre de séparation verticale | entre les titres */
	padding: 0 12px; /* Espace les titres du menu */
}

/* Effet de survol des liens du menu */
#header .menu a:hover { /* Ajout de la classe .menu pour que l'effet ne s'applique pas au logo */
	color: #F19300;
	padding: 0 12px 1px 12px; /* Pour conserver la barre verticale | et positionner le soulignement orange */
	margin: 0;
	border-style: solid;
	border-color: #F19300 white;
	border-width: 0 2px 4px 0;
}

 /* Informe l'utilisateur de la page sur laquelle il se trouve */
#header li.current_page_item a {
	padding: 0 12px 1px 12px; /* Pour conserver la barre verticale | et positionner le soulignement orange */
	border-style: solid;
	border-color: #F19300 white;
	border-width: 0 2px 4px 0;
}

/*===================================*/
/* Positionnement des blocs centraux */
/*===================================*/

#central {
	background: #EFECE2 url(images/column.png) repeat-y top left; /*fausses colonnes */	
	margin: 13px 0 0 0;
}

/*******************/
/* Barre de gauche */
/*******************/
#sidebar-left {	
	float: left; /* Positionne le bloc à gauche en le sortant du flux */
	width: 170px; /* Largeur du bloc */
	border-style: solid; /* Bordure fixe */
	border-width: 1px 0 0 0;
	border-color: #B9B9B8;	
	margin: 0 0 0 1px;		
}

#sidebar-left ul {
	list-style-type: none; /* Suppression des puces */
	font-weight: bold; /* mise en gras */
	padding: 8px 7px 8px 9px; /* Marge blanche */
	margin: 0; /* supprimer la marge par défaut*/		
}

#sidebar-left ul ul {
	padding: 0; /* supprime le décalage */
}

/* Mise en forme des liens */
#sidebar-left a {
	text-decoration: none; /*supprime le soulignement des liens*/
}

/* Lien de premier niveau */ /*Largeur globale doit valoir 152px*/
#sidebar-left ul a {	
	display: block; /* Permet d'attribuer une taille au lien a */
	width: 140px;
	color: white;
	text-transform: uppercase; /* Mise en majuscule */
	background: #4E301F;
	padding-left: 10px; /* Décale les titres */
	border-style: solid;	
	border-width: 1px;
	border-color: #9C603E #3C2518 #000000 #9C603E; /* A REMPLACER PAR LES BONNES VALEURS */	
}

 /* Survol des liens de premier niveau */
#sidebar-left ul a:hover {
	background: #F19300;
	border-color: #FFF #EE7A00 #E32700 #F19300; /* Effet de relief */
}

/* Lien de niveau secondaire *//*Largeur globale doit valoir 152px*/
#sidebar-left ul ul a {
	display: block; /* Permet d'attribuer une taille au lien a */
	width: 126px;
	color: #808080;
	text-transform: none; /* Annulation de la mise en majuscule */
	background: #F4F4F4;
	padding: 0 4px 0 20px; /* Décale les titres */
	border-style: solid;	
	border-width: 1px;
	border-color: #FFFFFF	#F1F1F1	#E9E9E9 #F4F4F4;
}

/* Survol des liens de niveau secondaire */
#sidebar-left ul ul.children a:hover {
	color: #47301F;
	background: #F19300;
	border-color: #FFFF00 #EE7A00 #E32700 #FFFF00; /* Effet de relief */
}

/* Informer l'utilisateur s'il se trouve dans une catégorie principale */
#page ul li.current-cat a {
	background: #F19300;
	border-color: #FFF #EE7A00 #E32700 #F19300; /* Effet de relief */	
}

/* Désactive l'effet de .current-cat sur les menus secondaires */
#page ul ul.children a {
	background: #F4F4F4;
	border-color: #FFFFFF	#F1F1F1	#E9E9E9 #F4F4F4;
}

/* Informer l'utilisateur s'il se trouve dans une catégorie secondaire */
#page ul ul li.current-cat a {
	color: #47301F;
	background: #F19300;
	border-color: #FFF #EE7A00 #E32700 #F19300; /* Effet de relief */
}

/*********************/
/* Contenu principal */
/*********************/
/*Largeur globale doit valoir 634px*/
#content {
	float: left;
	width: 592px;
	padding: 20px;
	margin: 0px 6px 0 13px; /* espacement avec les blocs droite et gauche */
	background: white;
	border-style: solid; /* Bordure fixe */
	border-width: 1px 0 0 0;
	border-color: #ADADAD;
	overflow: hidden; /* empêche le contenu de déborder, notammement les images */
}

/* Formatage du message d'accueil se basant sur le tag accueil de l'article */
#content .tag-accueil h2 {
	/*font-size: 2em;*/
	font-weight: bold;
	/*line-height: 0.8;*/
	color: #F19300;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}

/* Mise en forme de l'image d'accueil */
#content .tag-accueil .post_content img.alignright {
	float: right;
}


/******************/
/*Barre de droite */
/******************/
#sidebar-right {
	float: right;
	width: 150px;
	font-size: 0.786em; 
	margin: 0 7px 0px 0;
}

#sidebar-right h3 {
	font-size: inherit;
	text-align: center;
	text-transform: uppercase;
}

#right-top {
	border: 1px solid #C8C8C8;
	background: #F19300;	
}

#right-top h3 {
	color: white;
	background: #FFA00B;
	margin: 10px 8px 8px 8px;
	border: 1px solid #F7C06B;
}

/*Zone de recherche*/
#right-top form #search-txt {
	background: transparent url(images/input-search.png) right top scroll no-repeat;
	border: none;
	height: 19px;
	width: 129px;
	margin: 0 6px 6px 6px;
	padding: 2px 3px 1px 4px;
}

/*Bouton de recherche*/
#right-top form #search-submit {
	background: transparent url(images/search-submit.png) no-repeat scroll right top;
	border: none;
	color: white;
	font-family: Arial;
	font-size: 1.09em;
	height: 18px;
	width: 33px;
	margin: 0 9px 8px 106px;
	padding: 0;
}

/* Liste des rubriques */
#sidebar-right ul {
	margin: 0;
	padding: 0px 0px 10px 0px;
	list-style-type: none; /*suppression des puces*/
	background: #FFF url(images/bottom-sidebar-right.png) no-repeat bottom center;
	margin-top: 10px;		
}

/* Titre des widgets paramétrables via l'admin */
h3.widgettitle {
	font-size: inherit;
	border-style: solid; /* Bordure fixe */
	border-width: 1px 1px 0 1px;
	border-color: #C8C8C8;
	margin: 0;
	padding: 12px 0;
}

.textwidget h4 {
	color: #FFFFFF;
	background: #F19300;
	margin: 0; /* Rapproche le titre du texte*/
	text-transform: uppercase;
	padding: 0 5px 0 5px;
	font-weight: bold;
	border-style: solid; /* Bordure fixe */
	border-width: 0 1px;
	border-color: #C8C8C8;
}

.textwidget p {
	margin: 0; /* Rapproche le titre du texte. (5) */
	padding: 5px 4px 10px 4px;
	line-height: 1.2;
	border-style: solid; /* Bordure fixe */
	border-width: 0 1px;
	border-color: #C8C8C8; 
}

/***************/
/*Pied de page */
/***************/
#footer {
	clear: both; /* Repositionne le pied de page dans le flux normal */
	width: 978px;
	height: 30px;
	background: #EFECE2 url(images/bottom-page.png) top left no-repeat;
	margin: 0 0 0 0px;
	padding: 8px 0;
	font-size: 0.8em;		
}

/* Réglages généraux pour les li du footer */
#footer li {
	display: inline; /*affiche sous forme de liens horizontaux */
	margin: 0; /* supprime les marges par défaut */
}

/* Mentions de copyright */
#footer p {
	font-size: 0.8em;
	color: red;
	clear: both;
	margin: 0; /* supprime les marges par défaut */
}

#footer .menu {
	float: left;
	margin: 0 0 0 182px;
}

/*Accès au Back-office*/
#footer #menu-admin {
	float: right;
	margin: 0 169px 0 0;	
}

#footer a {
	text-decoration: none; /*supprime le soulignement des liens*/
}

le CSS pour IE

/*Pour IE*/

html {	 
  font-size: 100%; /*bug d'IE 6-7*/ 
}

body {
	text-align: center; /* pour corriger le bug de centrage IE<6 */
}

/*==========================*/
/* Positionnement global */
/*==========================*/

#page {
	text-align: left; /* pour rétablit l'alignement normal du texte suite au bug de centrage IE<6*/
}

/****************/
/* Bloc du haut */
/****************/
#header .menu li a {
	line-height: 1.8; /*corrige partiellement le pb de la bordure orange sur les liens du menu*/
}


/*******************/
/* Barre de gauche */
/*******************/




/******************/
/*Barre de droite */
/******************/
#sidebar-right {
	display: inline; /*supprimer le bug doublant les marges en cas d'utilisation de float et margin*/
}

#sidebar-right h3, h4 {
	font-size: 1em; /*remettre les titres à la bonne taille*/
}

#right-top form {
	height: 1%; /*pour que l'élément se redimensionne correctement*/
}

Modifié par Nohant (15 Dec 2009 - 19:03)

N'hésitez pas, je suis preneur de toutes remarques

Je met à jour la css au fur et à mesure des trouvailles

Bonjour ,

Nohant a écrit :
Bonjour,

Sous IE 7
1/ la bordure orange sous Accueil ne fait que 1px au lieu de 4px.

Ceci est un defaut des liens dans IE.
augmente le line-height a 1.8 ou 1.9 pour ces liens .

a écrit :
3/ le titre H3 est beaucoup plus gros
5/ idem 3/
6/ le titre H4 est beaucoup plus gros que prévu

Idem , bug recurrent chez IE , il faut redefinir ou faire un reset des tailles en em pour chaque titres

a écrit :

4/ l'espacement sous OK a été augmenté de 19px

il te faut conferer le layout a form : avec : height:1%; ou zoom:1; par exemple pour que cette 'boite' se dimensionne correctement.

a écrit :

Sous IE 6

Si float et margin sont applqué , alors ajouté un display:inline-block pour eliminer le bug doublant les marges .

Au besoin , redefinir les largeurs et appliqué un overflow:hidden aux element ayant une largeur definis , afin d'empecher IE6 de les laisser s'elargir .


En gros , voici quelques régles a tester :

a {line-height:1.8em;}
 h3 {font-size:1.2em;}
form {height:1%;}
sidebar-left ul ul li {width:140px;}

et eventuellement et par exemple pour contenir un peu mieux tes images :

img {border: 0 none; line-height:1em;vertical-align:top;} 

Enfin pour faire disparaitre le titre et sous-titre , privilégie un margin-top: negatif plutot qu'un text-indent négatif sans toucher au font-size ou line-height ( voir si les effets dans chrome ne s'en trouve pas ameliorer )

Cordialement
GC

gc-nomade a écrit :

Si float et margin sont appliqués , alors ajouter un display:inline-block pour eliminer le bug doublant les marges .

Oups , betise! , ce n'est pas inline-block mais inline tout simplement .

gc-nomade a écrit :

Enfin pour faire disparaitre le titre et sous-titre , privilégie un margin-top: negatif plutot qu'un text-indent négatif sans toucher au font-size ou line-height ( voir si les effets dans chrome ne s'en trouve pas ameliorer )

une précision sur la signification de "sans toucher au font-size ou ligne-height", dois-je comprendre que je laisse les valeurs actuellement définies dans ma feuille de style en l'occurrence
ligne-height: 0;
font-size: 0;

ou qu'au contraire je dois laisser les valeurs par défaut (et donc supprimer les valeurs actuelles) ?

j'ai tenté les deux cas de figure mais sans arriver à solutionner le pixel de décalage vertical pour Chrome

ps : serait-il possible d'avoir un lien ou une explication rapide sur l'intérêt d'utiliser un margin-top négatif plutôt qu'un text-indent négatif ? J'ai cherché sur Google mais la première réponse qui apparaît est cette discussion et sinon je n'ai rien vu de probant Recherche Google (Edit par Heyoan : merci d'éviter les liens de 3km de long qui explosent la mise en page du forum)

en tout cas merci pour l'aide, je poursuis les investigations
Modifié par Heyoan (15 Dec 2009 - 13:50)

Pour le margin-top negatif , il permet d'ejecter par le haut et hors de l'ecran un element .
On peut renforcer l'effet avec un position : absolute; .

Un text-indent negatif n'ejecte que le text ou contenu de type inline d'un element . Cette element reste donc present dans le flux et les effets de fusions de marges , padding ou margin perdurent (et éventuellement laisse entrevoir volontairement une image de fond ) .

L'un est donc plus efficace que l'autre a mon avis lorsque que l'on ne peut ou ne veut pas éliminer du source physiquement ou via un display none un ou plusieurs éléments.

Il y a les références ou les bonnes pratiques bien utiles , mais la réflexion ou un certain bon sens a aussi sa place .

Pour des raisons de securité ou d'accessibilité , ceratins navigateur n'appliqueront pas un font-size:0; et imposerons une taille minimale . (commme 9px dans safari ou chrome , ... ou opera (de memoire) Le font-size : 0; est utilisable sous ie(lte 7) par exemple dans certains cas ...

Je te laisse choisir ce qui te semble le plus approprié a ton cahier des charges .

Cordialement
GC

@Heyoan : désolé pour le lien trop (l'habitude des forums qui habituellement tronquent automatiquement les liens trop longs)

sinon toujours dans ma phase de débug :

le rendu s'est bien amélioré sous IE 6 et 7, merci gc-nomade.

Sous IE 5.5, 6 et 7
il me reste toujours un petit souci au niveau des liens de soulignement orange sur le menu horizontale. Normalement ils doivent avoir une bordure de 4px de manière à recouvrir totalement la bande blanche du background. Par défaut l'épaisseur apparente était seulement de 1px.

Comme conseillé j'ai modifié le line-height: 1.8em sur les liens a du #menu ce qui a permis d'obtenir une épaisseur de 3px, me manque toujours 1px . J'ai essayé d'autres valeurs mais sans obtenir mieux
Résultat attendu


Résultat obtenu


Par ailleurs je suis preneur d'une explication sur le rapport entre line-height et border ?

sur Chrome concernant cette bordure orange, j'ai toujours un décalage d'1px vertical (par contre elle fait bien 4px), si je m'arrange pour aligner cette bordure c'est alors le logo au-dessus qui se trouve décalé. C'est comme si l'intervalle entre le logo et le menu horizontal était inférieur d'1px sur Chrome par rapport aux autres navigateurs?


J'ai essayé d'utiliser un margin-top négatif à la place d'un text-indent sur le titre et le sous-titre que je souhaitais masquer mais sans arriver à corriger le pb. Je vais recommencer pour voir si j'ai loupé un truc.

Sous IE 5.5, 6 et 7
autre détail moins gênant à droite l'espace entre le bloc rechercher et le bloc rubriques qui est normalement de 10px via un margin-top sur #sidebar-right ul apparaît comme étant de 19px. Or même si j'essaie de modifier le margin-top à 1px dans le css pour IE l'espacement ne bouge pas, j'ai du mal à comprendre l'origine du phénomène ?
résultat attendu


résultat obtenu

Modifié par Nohant (15 Dec 2009 - 21:42)

gc-nomade a écrit :
Pour le margin-top negatif , il permet d'ejecter par le haut et hors de l'ecran un element .
On peut renforcer l'effet avec un position : absolute; .

Un text-indent negatif n'ejecte que le text ou contenu de type inline d'un element . Cette element reste donc present dans le flux et les effets de fusions de marges , padding ou margin perdurent (et éventuellement laisse entrevoir volontairement une image de fond ) .

L'un est donc plus efficace que l'autre a mon avis lorsque que l'on ne peut ou ne veut pas éliminer du source physiquement ou via un display none un ou plusieurs éléments.

Il y a les références ou les bonnes pratiques bien utiles , mais la réflexion ou un certain bon sens a aussi sa place .

Pour des raisons de securité ou d'accessibilité , ceratins navigateur n'appliqueront pas un font-size:0; et imposerons une taille minimale . (commme 9px dans safari ou chrome , ... ou opera (de memoire) Le font-size : 0; est utilisable sous ie(lte 7) par exemple dans certains cas ...

Je te laisse choisir ce qui te semble le plus approprié a ton cahier des charges .

Cordialement
GC

merci pour cette réponse, je vais réfléchir à ça demain (because ici je suis à GMT+4), bonne soirée