Problème d'affichage sous IE, aucun problème sous Mozilla

Bonjour,

J'ai un problème d'affichage de mes calques sous Internet Explorer. Autant sous Mozilla, ils s'emboîtent bien correctement en respectant les positions (absolute) et les dimensions que je leur ai appliquées, autant sous IE il y a plein de petits bugs. Ces bugs consistent en un espace d'1 pixel, un seul, entre mes calques, qui n'apparaît pas du tout sous Mozilla. Cela fait peu de temps que je me suis mise aux css et j'utilise IE 7, je n'ai jamais fait de css sous une version plus ancienne, ça peut avoir un rapport ?
En tout cas, n'importe quelle aide serait la bienvenue !

Salut, sans exemple en ligne, on ne pourrat pas savoir exactement quel bug c'est et vu que même sous ie7 il y en a encore pas mal...
Par contre une chose est sure, il faut éviter de faire des design au pixel prés, il faut essayer d'être plus souple, plus fluide, de faire en sorte que le site ressemble toujours à quelque chose si les elements se déplacent, s'agrandissent, et même se zoom (he oui ie7 a une fonction zoom).
En travaillant de la sorte tu auras beaucoup moins de probléme d'affichage celon les navigateur et ce serat plus facile à actualiser.

Bonsoir,
Attention ne pas oublier IE6 qui est encore largement majoritaire et qui risque
de le rester encore quelques temps.
En règle général il est préférable de commencer par tester tes pages sur un
navigateur plus respectueux des standard comme Firefox ou Opera et de
corriger les différence de rendu d'IE7 et IE6 (surtout!) à l'aide de feuilles de
style en commentaires conditionnels (voir la FAQ pour les précisions).
Modifié par Hermann (08 Mar 2007 - 01:42)

Je vous ai mis un exemple sur ce lien http://leia80.free.fr/

Comme vous voyez, sous Mozilla, tout est nickel, et sous IE 7, il y a un espace blanc en haut, un autre en bas, et le bandeau contenant le titre de la rubrique dépasse sur la droite.

Voici le code de ma page css. Merci de me dire s'il manque quelque chose, car c'est la première fois que je fais un site en css :

body {
background-color: #DBE4F7;
	font-family: verdana, arial, helvetica, sans-serif; 
	font-size: 10pt; 
	text-align: center;
	margin: 0;
	padding: 0;
}

img {
	margin: 0;
	border: 0;
}
 
#conteneur
{
	position: absolute;
	width: 780px;
	left: 50%;
	margin-left: -390px;
 }
 
/* Bandeau */

#bandeau {
position: absolute;
top: 0px;
border: solid 1px;
left: 0px;
height: 131px;
width: 780px;
background-color: #ffffff;
}

#bandeau_haut {
position: absolute;
top: 0px;
left: 0px;
bordure: 0px;
width: 100%;
height: 12px;
background-image:  url(../images/fond.gif);
border-bottom: solid;
border-width: 1px;
font-size: 1px;
line-height: 1px;
}

#image_bandeau_1 {
position: absolute;
top: 13px;
left: 0px;
width: 113px;
height: 97px;
background-image:  url(../images/bandeau_r1_c1.jpg);
}

#image_bandeau_2 {
position: absolute;
top: 13px;
left: 113px;
width: 274px;
height: 97px;
background-color: #D8D9DB;
}

#image_bandeau_3 {
position: absolute;
top: 13px;
left: 387px;
width: 131px;
height: 97px;
background-image:  url(../images/bandeau_r1_c4.jpg);
border-left: solid;
border-right: solid;
border-width: 1px;
}

#image_bandeau_4 {
position: absolute;
top: 13px;
left: 517px;
width: 132px;
height: 97px;
background-image:  url(../images/bandeau_r1_c6.jpg);
border-left: solid;
border-width: 1px;
}

#image_bandeau_5 {
position: absolute;
top: 13px;
left: 648px;
width: 131px;
height: 97px;
background-image:  url(../images/bandeau_r1_c8.jpg);
border-left: solid;
border-width: 1px;
}

#bandeau_bas {
position: absolute;
left: 0px;
width: 100%;
top: 109px;
height: 20px;
background-image:  url(../images/fond.gif);
border-top: solid;
border-width: 1px;
}

/* Menu */

#tableau_menu {
width: 100%;
padding: 0px;
border-spacing: 0px;
border-width: 0px;
}

.rubrique_selection
{
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #DBE4F7;
}

.rubrique
{
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #FFFFFF;
}




/* Contenu */

 #conteneur_contenu
{
	position: absolute;
	top: 131px;
	left: 0px;
	width: 780px;
	height: 500px;
	background-color: #D8D9DB;
	border: solid;
	border-width: 1px;
}

#colonne_verte {
position: absolute;
top: 0px;
left: 0px;
width: 11px;
height: 100%;
background-image:  url(../images/pointilles_verts.gif);
border-right: solid 1px;
}

#titre {
position: absolute;
top: 20px;
left: 12px;
text-align: left;
height: 20px;
width: 768px;
background-color: #DBE4F7;
border-top: dotted 1px #AA2B00;
border-bottom: dotted 1px #AA2B00;
}


/* Bas */

#bandeau_toutbas {
position: absolute;
left: 0px;
width: 100%;
top: 633px;
height: 20px;
background-image:  url(../images/fond.gif);
border-bottom: solid;
border-left: solid;
border-right: solid;
border-width: 1px;

}

Modifié par leia80 (09 Mar 2007 - 14:51)

Salut,

Tu devrais revoir le positionnement de tes blocs, tu nous fais une absolutite aigüe.
Dans ta mise en page, il n'y a pas la place pour un bloc en position absolute et c'est la source de tes petits (pour l'instant) soucis qui dès que tu vas "remplir" ta page devraient devenir grands.

Je ne comprends pas "il n'y a pas la place pour un bloc en position absolute", qu'est-ce que ça veut dire exactement ? Tu crois que c'est parce que j'ai mis tous mes blocs en position absolute que j'ai cet écart d'un pixel ?

Salut,

Pour l'instant oui, tu auras ensuite des problèmes de contenu dépassant tes blocs, de footer pas à sa place, différence entre navigateur etc...

De mémoire pour un mise en page telle que la tienne tu n'as pas besoin d'un seul bloc en absolute. L'idéal c'est de rester dans le flux et ne pas se battre contre ...

Comme pointé par ghost, gros problème d'usage abusif du positionnement absolu. On peut très bien s'en passer complètement, ici.

Par ailleurs, j'aimerais souligner le fait qu'une mise en page sans contenu ne permet absolument pas d'anticiper les divers problèmes de mise en page qui surviennent dans des conditions réelles. Paufiner un gabarit de page qui n'est qu'une coquille vide, c'est perdre son temps.

Enfin, gros problème de conception générale : la mise en page est découpée en plein de petits blocs dont la seule utilité est de caler des images de décoration ici ou là. Utilisez les images de fond. Par exemple, la ligne verte à gauche devrait être une image de fond répétée en hauteur.

Je dois avouer que je ne comprend pas tout ce que vous me dites.

Ghost, quand tu dis "tu n'as pas besoin d'un seul bloc en absolute", tu veux dire au contraire qu'un seul bloc en position absolute est suffisant dans cette mise en page ?

Pour Florent V, je n'ai pas mis en ligne tout le contenu de la page, par simple souci de discrétion. Normalement il y a également d'autres calques contenant du texte et des images à l'intérieur des calques qui sont présents. Ce n'est donc pas censé être une coquille vide.
Concernant la ligne verte à gauche, elle est bien faite à partir d'une image de fond, quand tu regardes dans mon code, c'est ce qui correspond au calque "colonne_verte".

Si je comprends bien, je vais dans un premier temps essayer de supprimer tous ces absolute et je verrai bien ensuite si mes petits soucis se résolvent.

Salut,

Dans ta mise en page actuellement présentée: aucun positionnement en absolute n'est nécessaire

Je crois que ce que veut dire le monsieur là, c'est que tu n'as absolument pas de la propriété absolute (facile ! ).
Pourquoi avoir mis à toutes les parties de ton site position: absolute; ?
Tu n'en as pas besoin, et comme dit plus haut par Ghost, quand tu vas mettre du contenu, aïe aïe aïe !! tu vas déchanter !
D'ailleurs, je te conseille de mettre du contenu fictif pour te rendre compte par toi même.
Modifié par RaGe (12 Mar 2007 - 14:30)

Désolée, j'ai suivi (sans doute bêtement) le conseil de quelqu'un qui me disait mettre tous ses calques en absolute. Quand on ne donne pas de position à un calque, c'est-à-dire ni absolute ni relative, il se met en quoi automatiquement ?

Dans quels cas a-t-on besoin de mettre un calque en absolute ? Je dois quand même mettre mon calque conteneur en absolute non ?

Je n'ai trouvé aucun tutoriel sur le site qui expliquait ça vraiment clairement, mais peut-être n'ai-je pas bien cherché

regarde ici : http://openweb.eu.org/articles/initiation_flux/

Un petit cours de positionnement CSS qui est trésssss intéressant !!

Merci pour ce lien très intéressant.

Par contre, je ne comprends toujours pas très bien dans quels cas j'attribue une position (relative ou absolue) à mon div. Apparemment, la position relative sert à faire faire un décalage au div par rapport au flux normal. Donc, si je ne veux pas qu'il y ait de décalage, je n'attribue pas de position particulière ?

C'est grave si j'ai plein de calques qui ne sont ni absolute ni relative ?

Pour certains de mes calques j'ai mis des attributs

top: 0px;
left: 0px;

. Ca sert à quelque chose ces attributs pour un calque qui n'a pas de position particulière ?

Bon en fait je vois que pour créer plusieurs colonnes indépendantes du flux il faut utiliser la position absolute. Or, dans mon bandeau du haut, j'ai des images qui se trouvent les unes à côté des autres. Si je ne mets pas de position absolue à chacune d'entre elles, seule la première apparaît puisque les autres, logiquement, se mettent en-dessous (le flux normal étant vertical). Pour que la deuxième se mette à droite de celle de gauche, je ne vois donc pas d'autre solution que d'utiliser la position absolute. Vous voyez une autre solution, vous, pour ce cas ?

bonjour,

Places les avec un float right.
Pour ta mise en page comptes 3 ou 4 div au maximum.
Modifié par ghost (13 Mar 2007 - 19:58)

Re,

Bon vu que les images de ton header son en background ma remarque n'est pas bonne. Teste ce code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#conteneur{
width: 780px;
border: 1px solid black;
margin: auto;
}

#header{
height: 110px;
background-color:#ae2900 ;
background-image: url(img_band.jpg);
background-position: bottom;
background-repeat: no-repeat;
} 

#titre{
height: 16px;
background-color:#ae2900 ;
color: #fff;
line-height: 16px;
text-align: center;
}

#contenu{
height: 600px;
background-image: url(img_fond.jpg);
padding-top: 20px
}

#contenu h1{

background: #fff;
font-size: 1.2em;
line-height: 20px;
color: #ae2900;
margin: 0 0 0 12px;
padding: 0;
border: 1px solid #ae2900;

}

#contenu h1 span{
margin-left: 20px;

}

#contenu p{
margin: 0 10px 0 20px;

}

#footer{
height: 20px;
background-color:#ae2900 ;

}
</style>
</head>
<body>
<div id="conteneur">
	<div id="header">
	</div>
	<div id="titre">
            titre
	</div>
	<div id="contenu">
	<h1><span>presentation</span></h1>
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque neque. Pellentesque volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque placerat metus. Quisque nunc. Nullam faucibus tempor leo. Etiam urna. Pellentesque bibendum ante quis odio. Fusce laoreet, purus et viverra laoreet, est quam venenatis lorem, in pharetra odio erat vitae tortor. Nunc tristique suscipit urna. Aenean urna. Aliquam at nulla. Nam eget est. Praesent ultricies fringilla nisi. Etiam vestibulum neque vel risus. Morbi leo. 
	</p>
	</div>	
	<div id="footer">
	</div>	
</div

</body>
</html>

Bon vite fait...
Modifié par ghost (13 Mar 2007 - 21:49)

Ok, ton code me donne des idées. Je vais voir ce que je peux faire à partir de là. Merci en tout cas.