Problemes sous IE - Décalages de contenu

Voila j'ai un gros soucis au niveau de l'affichage de mon blog en travaux, ca se passe sous IE6 et apparement, c'est pas tres joli a voir. Il y a des choses qui n'affichent pas mais qui le sont sous FF, j'ai aussi des soucis au niveau de l'implementation de certains cadres comme la barre de navigation qui est décalée ou meme les billets qui se retrouvent presque en milieu de page.

J'aimerait savoir ce qui ne va pas pour pouvoir avoir un affaichage correct sous IE et FF.

Dois-je avoir recours a des hacks ?

P.S : Je cherche un site qu'on m'avait parlé qui fourni les screens d'un site sous plusieurs navigateurs mais je ne retrouve plus le nom, le connaissez vous ?

Le site en question : http://daleetstudios.free.fr/dc/

Le CSS :

/* ***** BEGIN LICENSE BLOCK *****
 * This file is part of DotClear.
 * Copyright (c) 2004 Maurice Svay and contributors. All rights
 * reserved.
 *
 * DotClear is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 * 
 * DotClear is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with DotClear; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 *
 * ***** END LICENSE BLOCK *****
 *
 * Contributor(s):
 *  Maurice Svay
 */

/* Ce fichier définit le style visuel pour les différents éléments du blog.
 * Dans l'ordre, vous trouverez les règles qui définissent l'apparence pour:
 * - les éléments HTML en général
 * - la page
 * - l'entête
 * - le prélude
 * - le contenu
 * - la barre de navigation
 * - le pied de page
 *
 * L'agengement des blocs est défini dans le fichier layout.css
 * Pour mettre la barre de navigation à gauche, décommentez l'appel à 
 * layout-gauche.css
 */

/* -------------------------------------------------
* Thème Red'Fluid réalisé par Philippe de  http://blog.accessoweb.info
 
---------------------------------------------------------------------------------------------------------------------------- */
 
/* Les éléments HTML en général
-------------------------------------------------------- */
html, body {
		margin: 0; padding: 0;
		}
	body{
		background: #bebebe url(img/bgPage.png) center repeat-y;
		color: #000000; font-family: Arial, Helvetica, sans-serif;
		font-size: 75%;
		}

h1, h2, h3, h4, h5, h6{
	font-family: "Trebuchet MS", sans-serif;
}

h1{font-size: 1.4em;}
h2{font-size: 1.3em;}
h3{font-size: 1.2em;}
h4{font-size: 1.1em;}
h5{font-size: 0.9em;}
h6{font-size: 0.8em;}

pre, code{
	font-size: 1.2em;
}

pre{
	width: 100%;
	overflow: auto;
	border: 1px solid #CCC;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;
	
}

.field label{
	display: block;
}

img {border:0;}

input,textarea{
	border: 1px solid #999;
}

textarea{
	width: 90%;
	font-size: 1em;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}

a{
	color: #ED8000;
	text-decoration: none;
}



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

.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
}

/* La page
-------------------------------------------------------- */


#page {margin: 0 auto; width: 950px;text-align: left;}
#main {margin-left:0; padding:5px 0 0 0;}
#sidebar {float:right; position:relative; width:200px; top: -15px;}
#sidebar2 {float:right; position:relative; width:200px; top:-15px;}
#content {width: 530px; position:relative; text-align: left;padding: 0 5px;}
#search {position: absolute; top: 50px ; text-align: right; width: 850px;}

 
/* L'entête
-------------------------------------------------------- */
#top {
		height: 90px; width: 950px;
		/*background: white url(img/bgTop.png) left bottom no-repeat;*/	}
	#top h1 {
		position: absolute; top: 0; left: 30px;
		}
	#top h1 a {
		font-size: 30px; line-height: 1em;
		text-decoration: none;
		color: #006699;
		}
	#top h1 a:hover {color: #FF9900;}



html:lang(fr) #search input {font-size: 0px; width: 22px;}

    /*   bloc recherche */
    
#search input {
	background: transparent url(img/bgSearchBtn.png) no-repeat top left;
	border: none; 
	height: 22px;
	margin: 0 15px 0 0;
	margin-top: 30px;
	}

#search input#q {
	font-size: 1em;
	width: 175px;
	background: transparent url(img/bgSearch.png) no-repeat top left;
	color: #ffffff;
	height: 22px;
	}


/* Le contenu
-------------------------------------------------------- */
.post {
		position: relative;
		line-height: 1.5em;
		margin: 0 0 1.5em 40px;
		padding: 0 20px 0 0;
	}
	.post .day-date {
		position: absolute; top: -2px; left: -45px;
		width: 40px; color: #494949;
		font-family: Helvetica, Arial, Geneva, sans-serif;
		margin: 0; padding: 0;
		}
	.post .day-date span {
		display: block; text-align: center; font-weight: bold;
		}
	.post .day-date .day {
		text-shadow: 2px 2px 2px #ccc;
		font-size: 2em; padding: 8px 0 0 0;
		}
	.post .day-date .month {}
	.post .post-info {
		font-size: 0.9em;
		color: #000;
		font-family: "HelveticaNeue-Light", Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
		margin: 0 0 0.3em 0; padding: 0 0 0 5px;
		line-height: 1.3em;
		}
		
	.post .post-chapo {
	padding-left : 5px;
	   }	
		
	.post .post-content {
	padding-left : 5px;
	   }
	.post .post-info a {
		color: #494949;
	   }
	.post h2.post-title  {
	   font-size: 1.8em;
	   color: #494949;
	   margin: 0 0 2px 0;
	   padding-left : 5px;
	   }
	.post .post-title a {
		text-decoration: none;
		color: #494949;
		}
	.post-info-co {
	background: transparent url(img/addcomment.gif) no-repeat 300px 51%;
	clear: both;
	font-size: 1em;
	text-align: right;
	margin-bottom: 3em;
	padding-bottom: 10px;
	margin-top: 3em;
	padding-top: 10px;
	border-top: 1px dotted #AAAAAA;
	border-bottom: 1px dotted #AAAAAA;
	margin: 20px;
}

.post-info-co span{
	display: none;
	}
	
.post-info-co a{
	padding-left: 12px;
}

/* Billet vu
****************************************************************/
.post-read {
	clear: both;
	font-size:: 1em;
	text-align: right;
	margin-bottom: 3em;
}	

.post .post-title a:hover {color: black}

/* *****************************************
	Contenu du billet
********************************************/
	.post a {color: #494949}
	.post a:visited {color: #a5cf05}
	.post-content h1 {font-size: 2.2em}
	.post-content h2 {font-size: 1.8em}
	.post-content h3 {font-size: 1.6em}
	.post-content h4 {font-size: 1.5em}
	.post-content h5 {font-size: 1.4em}
	.post-content h6 {font-size: 1.2em}
	.post-content p {line-height: 1.4em}
	.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6  {
		color: #494949; line-height: 1.3em;
		margin: 0 0 0.5em 0;
		clear: both;		/* Permet le retour à la ligne des titres après une image*/
		}
	.post-content p, .post-content ul, .post-content ol, .post-content pre, .post-content address {margin: 0 0 1em 0}
	/* Élements de mise en forme des tag PRE et CODE ***** TEST ***** */
    .post-content abbr {cursor: help; color: #000}
    .post-content pre, .post-content code {
        border: 1px #ccc solid;
        padding: 5px;
        background-color: #494949;
        font-size: 1.2em;
        overflow: auto;
        }
	.post p img {
		float: left; display: block;
		padding: 0.5em;
		margin: 5px 15px 15px 0;
		background-color: #eee;
		border: 1px #ccc solid;
		}
    .form-help {
	    color:#B2B2B2; 
		font-size:9px; 
		margin:2px 0;
		}


#trackbacks h3, #comments h3{
	color: #ffffff;
	border: 1px solid #D2D2D2;
	background: #99c300;
	padding: 0px 2px 2px 5px;
	}
	
#trackbacks blockquote, #comments blockquote{
	border: 1px solid #D2D2D2;
	margin: 0;
	padding: 0 1em;
	background: #F5F5F5;
}

/* La barre de navigation
-------------------------------------------------------- */

#sidebar , #sidebar2 {
	color : gray;
	font-size: 0.9 em;
	line-height: 1.3em;
	}

	

#sidebar div, #sidebar2 div{
	margin: 10px 30px 0 0;
	padding-bottom: 10px;
	
}
#sidebar a, #sidebar2 a{
	color : gray;
	font-size: 0.9 em;
	line-height: 1.3em;	
	text-decoration: none;
	}

#sidebar a:hover, #sidebar2 a:hover{
	color : gray;
	
	text-decoration: underline;
	}
	
#sidebar a:acive, #sidebar2 a:active{
	color : gray;
	font-weight: bold;
	text-decoration: none;
	}
	
#sidebar div, #sidebar2 div{
	color: inherit;
}

#sidebar div ul,  #sidebar2 div ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar h2,  #sidebar2  h2, #sidebar h3, #sidebar2  h3{
	color: #ffffff;
	background: transparent url(img/bgSidebarTitles.gif) repeat-x bottom;
	text-align: left;
	text-transform:uppercase;
	padding: 2px 2px 2px 5px;
	border: 1px solid #bebebe;
		
}



#sidebar h3, #sidebar2  h3{
	border-top: 1px solid #D2D2D2;
	padding-top: 10px;
	font-size: 1.4em;
	text-align: left;
	margin-left: 15px;
}

#calendar table{
	width: 150px;
	margin: 0 auto;
	font-size: 0.8em;
}

#calendar caption{
	margin: 0 auto;
	background: #EEE;
	padding: 0.5em 0;
	color: #666;
}

#calendar abbr{
	border: none;
}

#calendar td{
	background: #F5F5F5;
	text-align: center;
}

#calendar td a{
	display: block;
	font-weight: bold;
	background: #E0E0E0 url(images/today.png) no-repeat right top;
	color: #933;
}


#statistiques {
	padding-top: 10px;
	}
	
#q{
	padding-left: 18px;
	background: #f5a406 url(img/q.png) no-repeat left;
}

#sidebar div#calendar{
	/*border-top: 1px solid #F0F0F0;*/
}

#sidebar div#calendar table{
	font-size: 0.8em;
	text-align: left;
	margin: 0 auto;
	border-collapse: collapse;
}

#sidebar div#calendar table caption{
	margin: 0 auto;
}

#sidebar div#calendar table th{
	color: #AB2121;
	background: transparent;
}

#sidebar div#calendar table td{
	width: 14%;
	line-height: 1.5em;
	border: 1px solid #D2D2D2;
}

#sidebar div#calendar table td a{
	display: block;
	background: #AB2121;
	color: #ED8000;
	font-weight: bold;
	text-decoration: none;
}

#sidebar div#calendar table td a:hover{
	background: #ED8000;
	color: #AB2121;
}

#sidebar2 #lastComments {
	font-size: 0.8em;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	

	

	
/* Le pied de page
-------------------------------------------------------- */
#footer{background:#9ec80a; color:#FFF; font:normal 12px Arial,Helvetica,sans-serif; height:15px; padding:15px; text-align:center; clear: both;}
#footer a{color:#FFF; text-decoration:none;}

/* --- 
NAVIGATION HORIZONTALE
--- */
ul#nav-box {
    margin : 0 0 20px 0;
    height: 30px; /*----------------------- là --------*/
	line-height: 30px;/*----------------------- là --------*/	
	padding : 10 1em 10 3;
	border-bottom:1px solid #bebebe;
	list-style-type : none;
	background-color: #f3a305;
	color: #fff;
	font-weight : bold;
	font-size : 14px; text-align: left;
}

ul#nav-box li {
	display: inline;
	padding : 5px 0;
}
ul#nav-box li a {
	padding : 4px 0.5em 4px 0.5em;
	color: #fff;
	text-decoration: none;
	border-right: 0.8px solid #fff;
}
ul#nav-box li a:hover {
	text-decoration: underline;
	color: #fff;
	border-right: 0.7px solid #fff;
}

.date { /* date */
    background:url('./img/date.png') no-repeat;
	width:45px;
	height:50px;
	color: white;
	text-align:center;
	position:absolute;
	left:-40px;
	top: -10px;
}

.date_day { /* jour */
	display: block;
	font-size: 1.9em;
	text-align: center;
	font-weight: bold;
	padding : 9px;
}

.date_month { /* mois */
	display: block;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	margin: -9px;
	text-transform:uppercase;
	
}

Modifié par TGM (28 Dec 2006 - 03:08)

Personne ne pourrait m'aider ?

Vraiment personne ?

trouver une erreur dans 200ligne de code c'est pas facile ...

Salut.

Ce n'est pas vraiment une catastrophe monumentale. Apparemment, il y a un soucis au niveau des largeurs, les billets viennent se placer sous la colonne de droite dans IE 6.

Le formulaire de recherche a l'air de se balader un peu. Et il y a quelques marges à régler.

TGM a écrit :
Dois-je avoir recours a des hacks ?

Des hacks, certainement pas. Des commentaires conditionnels, probablement .

Une capture sous IE 6 (50ko) :


Edit : tu es sous quel OS ?
Modifié par Sopo (29 Dec 2006 - 12:45)

Oui, apparement les commentaires conditionnels, c'est pas pour moi, j'y connait rien en codage...

Je les ai lu mais je ne sait pas trop ce qu'il faut ajouter ou enlever. J'ai essayé plein de choses mais rien ne bouge, c'est pour ca que j'en vient a demander de l'aide...

Heu, les commentaires conditionnels, c'est du "bête" HTML ... Je ne vois pas où est le problème.

Tu crées une feuille de style, par exemple "style-ie.css" sur laquelle tu ajoutes les corrections pour IE, et tu la rattache à ta page web comme d'habitude :

<head> 
   ...
   <!-- la feuille de style "normale" -->
   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
   <!-- la feuille de style pour IE -->
   <link rel="stylesheet" type="text/css" href="style-ie.css" media="screen" />
</head>

Pour éviter que la 2e feuille de style ne soit lue par tous les navigateurs, on ajoute les commentaires conditionnels :

<head> 
   ...
   <!-- la feuille de style "normale" -->
   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
   <!-- la feuille de style pour IE -->
   [b]<!--[if lte IE 6]>[/b]
   <link rel="stylesheet" type="text/css" href="style-ie.css" media="screen" />
   [b]<![endif]-->[/b]
</head>

Où est le problème ?

Ca a l'air tellement simple pour vous, mais pour moi qui debute, c'est pas vraiment simple...

Et si c'etait vraiment du a un soucis de codage dans le CSS d'origine ? (C'est une question que je me posait)

Si ta page est valide et que le rendu est bon sous Firefox & Opera, voire IE7, c'est plus que probablement un problème dû à IE 6, non ?

Edit : après vérification, il y a des erreurs tant dans ton code html que dans la feuille de style. A corriger avant toute chose.
Modifié par Sopo (29 Dec 2006 - 16:28)

Je vais commencer par corriger les fautes ensuite je pense qu'on y verra un peu plus clair.

Par contre j'ai pas IE7, donc je ne sait pas comment ca rend...

Tu travailles sous quel OS ? Mac ou Linux ?

Win, pourquoi ?

J'ai reussi a corriger mes fautes sur le HTML, mais le CSS j'y comprend quedalle... (excusez mon igorance)

Voila le compte rendu du validateur (72 fautes )

Rapport Jigsaw le validateur

TGM a écrit :
Win, pourquoi ?

Je ne sais pas, j'avais l'impression que tu ne pouvais pas voir le résultat sous IE

Il n'y a pas 72 erreurs dans ta feuille de style, il n'y en a qu'une. Le reste, ce sont des avertissements. En gros, ça correspond à tout ce que le validateur ne peut pas vérifier automatiquement. Par exemple, il va te dire que tu n'as pas de couleur de police définie avec ta couleur de fond, parce qu'il ne peut pas savoir si les deux couleurs seront différentes au final.
Modifié par Sopo (29 Dec 2006 - 18:16)

L'erreur c'est avec l'align-right que j'ai mis ? Pourtant le validateur html m'as mis 0 fautes !? J'y comprend plus rien...

Au niveau des avertissements y'en a qui peuvent etre enlevés ou non ?

Sopo ?

Bon je pense que je vais devoir attendre le 2 Janvier pour avoir une reponse...

Bonne a année a tous !

Salut,

Les erreurs que tu obtiens me semblent assez explicites, non ?

Invalid number : font-size Parse Error - font-size:: 1em

Tu as mis deux ':'.

Invalid number : font-size Too many values or values are not recognized : 0.9 em

Il ne faut pas d'espace entre la valeur et l'unité ("0.9em").

Unknown pseudo-element or pseudo-class :acive

Il faut écrire ":active".

Invalid number : padding only 0 can be a length. You must put an unit after your number : 10 1em 10 3

Il faut une unité après toutes les valeurs.

Parse Error - align-right

Il suffit de regarder la ligne de l'erreur (31) et d'aller voir ce qu'il y a à cette ligne-là dans ton fichier :

<div style="align-right" id="search">

"align-right" n'est certainement pas du code CSS valide. A la limite :

text-align: right;

Merci pour toutes ces précisions mais moi et le XHTML/CSS ca fait encore 2 pour le moment, disons que je débute...

J'ai un petit soucis, j'ai voulu valider mon CSS au validateur et j'ai obtenu ca :

Please, validate your XML document first!

Line 31

Column 12

Attribute name "text" associated with an element type "div" must be followed by the ' = ' character. 

Ca veut dire quoi exactement ?

P.S : j'ai une erreur a la validation de ma page html avec cet attribut : text-align: right;

Ca n'est pas valide...
Modifié par TGM (01 Jan 2007 - 22:36)

Personne n'as une idée ?