28173 sujets

CSS et mise en forme, CSS3

[Reglé] Un décalage de bloc disgracieux - IE7 != IE6

Pages :
Bonjour à tous,

Je rencontre un problème à la fois mystérieux et pénible.
Je vous invite à aller visiter : Lien édité (site sur la photographie nature).

En effet, sur IE6 (si certains l'ont encore, ce qui n'est pas mon cas Smiley biggol ), le menu de gauche bat de l'aile.

Pour celles et ceux qui n'ont pas IE6, voici une capture d'écran du problème :
http://img355.imageshack.us/img355/1764/screennpjs9.jpg


Bien évidemment, sur Firefox pas de problème et même sur IE7 (ce qui rend encore plus compliqué mon problème je suppose).
Je ne sais pas trop quelle partie vous donner, mais voici le morceau css du fameux menu rebelle :

/*Menu vertical (gauche)*/
#menuvertical {
width: 199px;
margin: 71px 0 0 11px ;
float: left;
background: url('../images/structure/endbarre.jpg') bottom left no-repeat;
list-style-type: none;
padding-bottom: 40px;
}

#menuvertical li {
display: block;
width: 199px;
margin: 0 0 0 0;
}


Je suppose que ça ne sera pas assez, je vous écoute donc pour me demander des informations complémentaires.

Merci à tous pour votre aide.

Sébastien
Modifié par proki (21 Jun 2007 - 14:43)
Salut!
je pense que tu pourrais rajouté la propriété, 
display:inline;
à ton bloc "menuvertical".
En effet IE6 a fortement tendance à doublé les marges appliqué à un éléments en position flottant, ici ton bloc est en float:left.
C'est la solution que j'utilise généralement.
Voilà pour un début de réponse!
Modifié par zecaraz (19 Jun 2007 - 14:21)
Coucou,

Merci pour ta réponse.
Le problème ne se résout malheureusement pas avec ce css :



#menuvertical {
width: 199px;
margin: 71px 0 0 11px ;
float: left;
background: url('../images/structure/endbarre.jpg') bottom left no-repeat;
list-style-type: none;
padding-bottom: 40px;
display:inline;
}

#menuvertical li {
display: block;
width: 199px;
margin: 0 0 0 0;
}


Smiley decu
Salut,

Peut être un problème de fusion des marges, essaye de donner un border a tes blocs juste sous le header pour tester...
Si le problème disparait, un border-top: 1px couleur du fond suffira ou suivant le contexte un overflow: hidden pour chaque bloc .
Modérateur
bonjour
les <br> de #connexion semble avoir un drole de comportement .. bug du au marges negatives !?? , essai 

#connexion br {
display:none;
}



<hs>... orage , je coupe tout avant de finir de grillé mon pc </hs>
Je viens de rajouter un border au menu gauche.
Si un surfeur veut bien me dire si cela arrange le tout...

Smiley confused
Coucou,

Je viens d'ajouter un border au bloc vert, ainsi que

#connexion br {
display:none;
}


Par contre cela pose désormais un problème dans mon texte de la bulle bleu clair (évidemment).
Le tout est-il désormais mieux pour le menu gauche ?

Smiley smile
Salut,

Bon j'ai jeté un autre oeil, ce n'est pas seble t'il un problème de fusion des marges mais de construction avec des marges négatives.
Essayes:
  <style type="text/css">
* { margin: 0; padding: 0;}

/* Corps et conteneur principal*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background: yellow;
background-repeat:repeat-x;
height : 100%;
}


em {
font-style : normal;
text-decoration : underline;
}

#conteneur {
width : 790px;
margin: 0 auto; 
background-color: red;
height : 100%;
border: 1px solid black;
}

html {
height : 100%;
}

#contenu strong{
color : #3AA115;
}

/* Menu horizontal (onglets) */
#menuhorizontal {
height: 27px;
margin: 120px 0 0 220px;
list-style-type: none;
color : #A5DC68;
}

#menuhorizontal li {
float: left;
width: 81px;
height: 27px;
margin: 0 10px 0 5px ;
line-height: 15px;
background: url(../images/structure/menuheader.gif) no-repeat;
text-align: center;
}

#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}

#menuhorizontal li a:hover {
background: orange;
float: left;
display: block;
width: 81px;
height: 27px;
line-height: 15px;
text-align: center;
}

/*Image header*/
#header {
background: pink;
width : 1000px;
height: 300px;

border: 1px solid black;
}

/*Bulle News importante*/
#bullenews {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullenews.jpg');
margin: 90px 0 0 226px;
}

#bullenews  strong{
color: #A5DC68;
}

#bullenewspropos {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullenewspropos.jpg');
margin: 90px 0 0 226px;
}

#bullenewsannuaire {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullenewsannuaire.jpg');
margin: 90px 0 0 226px;
}

#bullenewsadmin {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullenewsadmin.jpg');
margin: 90px 0 0 226px;
}

#bullenewsannonce {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullenewsannonce.jpg');
margin: 90px 0 0 226px;
}


#bullenews h2 {
color: #A5DC68;
margin: 0 0 0 10px;
font-size: 1em;
}

#bullenews a {
color : #A5DC68;
}

.imagetteNews {
margin : 10px 10px 10px 10px;
border : 2px solid #A5DC68;
}

.imagetteNews:hover {
border : 2px solid #FFFFFF;
}

.imagettePropos {
margin : 3px 10px 10px 10px;
border : 2px solid #1582A1;
}

.imagetteProposBulle {
border : 2px solid #A5DC68;
margin-left :7px;
}

/*BulleS petites annonces*/

#bullevente {
color : #FFFFFF;
width : 730px;
height : 150px;
background-image: url('../images/structure/bullevente.jpg');
margin: 20px 0 0 0;
}

/* Bulle photo à l'honneur, page index*/
#bullephotohonneur {
color : #FFFFFF;
width : 730px;
height : 250px;
background: orange;
margin: 30px 0 0 226px;
border: 1px solid black;
}

#bullephotohonneur img {
margin-top : 8px;
margin-right : 15px;
float:right;
border : 1px solid #000;
}

#bullephotohonneur p {

margin-left : 15px;
}

#bullephotohonneur strong {
font-size : 14px;
}


#bullephotohonneur a {
color : #A5DC68
}






/*Bulle présentation + module recherche*/
#connexion {

margin: 24px 0 0 240px;
color: #6a6a6a;
padding: 7px 0;
border: 1px solid black;
}

#connexion a {
text-decoration : underline;
color : #6a6a6a;
border: 1px solid black;
}


.button {
border : 1px solid #6a6a6a;
}

/* Liste des articles*/
#contenu {
width: 730px;
margin: 10px 0 0 226px;
}

#contenu a {
color: #1582A1;
}

#contenu h2 {
color: #1582A1;
font-size: 1em;
}

.normal {
margin: 25px 9px 0 0;
}

.annonce {
margin: 25px 9px 0 0;
border-bottom : 1px solid #A5DC68;
}

.espace {
border-top : 1px solid #A5DC68;
margin: 25px 9px 0 0;
}

#contenu strong {
color: #1582A1;
}

.article {
color : #FFF000;
}

.imagette {
border : 2px solid #1582A1;
margin :3px 10px 10px 10px;
}

.imagette:hover {
border : 2px solid #3AA115;
}

.imageContenu {
border : 2px solid #1582A1;
margin : 10px 10px 10px 10px;
}

#contenu h1 {
color: #3AA115;
font-size: 1em;
border-bottom : 1px solid #3AA115;
margin: 35px 0 0 0;
font-weight : bold;
}

#barreanonce {
width : 720px;
height : 18px;
text-align : right;
}

#barreanonce a{
text-decoration: none;
}



/*Menu vertical (gauche)*/
#menuvertical {
width: 199px;
margin: 0px 0 0 11px ;
float: left;
background: blue;
list-style-type: none;
padding-bottom: 40px;
border: 1px solid black;
}

#menuvertical li {
display: block;
width: 199px;
margin: 0 0 0 0;
}

#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 0 0 0 10px;
}

#menuvertical li a:hover{
color: #A5DC68;
}

#menuvertical p {
margin: 0 10px 0 10px;
color : #FFFFFF;
}

#menuvertical a {
color: #ffffff;
text-decoration: none;
}

#menuvertical a:hover {
color: #A5DC68;
}

.menu {
color: #A5DC68;
font-size: 1em;
margin: 5px 0 0 10px;
}


/*test pour un deuxième menu gauche*/

#menuvbis{

width: 199px;
float: left;
background: url('../images/structure/endbarre.jpg') bottom left no-repeat;
margin: 0 0 0 0;
position : relative;
height : 300px;
overflow : auto;
}



/* Pied de page*/
#footer {
background: green;
width : 730px;
height : 100px;
margin: 40px 0 0 226px;
text-align: center;
color : #FFFFFF;
}

#footer a {
text-decoration : none;
font-weight : bold;
color : #FFFFFF;
border-bottom : 1px dashed #FFFFFF;
}

/*Commentaire article*/

#boitecomm{
background: red;
width : 300px;
height : 315px;
margin: 20px 0 0 656px;
color : #FFFFFF;
}

#boitecomm p {

margin: 2px 0 0 10px;

}

#zonecomm{
margin: -300px 0 0 240px;
width : 400px;
position : relative;
height : 300px;
overflow : auto;
}


#zonecomm h2{
color: #1582A1;
margin: 0 9px 0 0;
font-size: 1em;
}

#zonecomm a {
color: #3AA115;
}
		</style>
	</head>
	<body>


<div id="header">


<ul id="menuhorizontal">
		<li><a href="http://www.naturapics.com/index.php" accesskey="a"><em>A</em>ccueil</a></li>
		<li><a href="http://www.naturapics.com/annuaire/" accesskey="n">A<em>n</em>nuaire</a></li>

		<li><a href="http://www.naturapics.com/annonces.php" accesskey="v"><em>V</em>ente/Achat</a></li>
		<li><a href="http://www.naturapics.com/honneur.php" accesskey="h">À l'<em>h</em>onneur</a></li>
		<li><a href="http://www.naturapics.com/apropos.php" accesskey="p">À <em>p</em>ropos</a></li>
		
		
		
		
	</ul>

<p id="connexion">
	  Bienvenue sur <strong>NaturaPics</strong> !<br />
		Retrouvez sur votre nouvelle plateforme web toutes les informations indispensables <br />
		sur la photographie nature.<br/>
		- - - - - - - - - - - - - - - - - - - - - - - -<br/>

		NaturaPics se veut communautaire; aussi, pour toute proposition d'articles, de liens <br />
		ou de photographies, n'hésitez pas à <a href="apropos.php">nous contacter</a>.

	
	</p>
	</div>
	
	<div id="menuvertical">
	
	<p>Aujourd'hui 19/06/2007<br/>
	<!--<strong>3</strong> nouveaux liens<br />
	<strong>17</strong> nouvelles photos<br/>-->
	</p>

	<br />
	<img  alt="separ"  src="images/structure/separ.gif" />
	
	<h1 class="menu">ARTICLES <img  alt="separ"  src="images/structure/virgule.jpg" /></h1>
	<br/>
	<ul>
	
	
		<li><a href="rubriques.php?Rubrique_id=1">Photographes</a></li>
		<li><a href="rubriques.php?Rubrique_id=2">Evénements</a></li>

		<li><a href="rubriques.php?Rubrique_id=3">Techniques</a></li>
		<li><a href="rubriques.php?Rubrique_id=4">Matériels</a></li>
		<li><a href="rubriques.php?Rubrique_id=5">Médias</a></li>
		<li><a href="rubriques.php?Rubrique_id=6">Digiscopie</a></li>
		<li><a href="rubriques.php?Rubrique_id=7">Nature</a></li>

	</ul>
	<br />
	<img  alt="separ"  src="images/structure/separ.gif" />
	
	<h1 class="menu">RECHERCHE <img  alt="separ"  src="images/structure/virgule.jpg" /></h1><br/>
	
	<form action="http://www.naturapics.com/search.php" method="post">
 <p><input class="menugauche" type="text" name="kw" value="" size="23" tabindex="1" /></p>
<p><input  name="submit" type="submit" value="Rechercher !" tabindex="2" /></p>
</form>
	
	

	

	<br />

	<img src="images/structure/separ.gif" alt="separ" />
	
	<h1 class="menu">FLUX RSS <img  alt="separ"  src="images/structure/virgule.jpg" /></h1><br/>
	<p>
	Restez au courant des dernières nouveautés grâce au flux RSS <strong>NaturaPics</strong><br/><br/>
	<img src="images/structure/xml.gif" alt="rss" /> <a href="actunaturapics.xml">Cliquez ici !</a>
	</p><br />

	<img src="images/structure/separ.gif" alt="separ" />
	<p></p>
	

	
	
	<br />
	</div>
		
	
	
	<div id="bullephotohonneur">
	<a href="honneur.php"><img src="images/photohonneur/juin2007.jpg" alt="photohonneur" /></a>
	<br/>
	<p>
	<strong>Juin 2007 - NaturaPics ouvre ses portes !</strong><br /><br/>

	Après quelques semaines de travaux, le premier site d'information générale sur la photographie Nature ouvre ses portes. 
	Découvrez cette branche si particulière et si passionnante de la photographie.<br/>
	Très régulièrement, de nouveaux articles seront ajoutés <br/>pour le plus grand plaisir des débutants, des amateurs et des experts de la photographie Nature.
	

	</p>
	<br/>
	<p>
	<br/>
	<strong>La photographie Nature à l'honneur</strong><br/>
	Hibou des marais par Clément Caiveau (©)
	</p>

	

	
	
	</div>...
Coucou,

Peux tu me dire les modifs que tu as faites ?

Merci pour ton aide Smiley cligne

Sinon voici la page index2.php avec ton css et ton html :
Lien édité
Modifié par proki (21 Jun 2007 - 14:41)
Re,

La principale, j'ai inclus ton menu horizontal et ton p connexion dans le header (positionné avec des marges positives) et modifier le margin-top du menu gauche (0) et de #bullephotohonneur (30px) et bien entendu pour visualiser des border: 1px solid black et background-color pour les blocs principaux.
Modérateur
bonjour

ghost a écrit :
un problème de fusion des marges


(assurement les br n'ont aucun role a joué ici , désolé pour cette fausse piste).

Peut-etre peut essayer d'appliquer ces marges negatives d'une autre maniere en les deplaçant vers un autre conteneur . (z-index si besoin de remettre en avant plan certains elements).

sinon , integre le menu et le paragraphe au conteneur header , ou positionner le header en absolu pour l'ejecter du flux et positionner le reste des elements sans faire usage de marge negatives.

gc
Re,

Bon déjà tes height: 100% pour html et body ne servent à rien, il y a une fois les border éliminés un problème de fusion des marges que tu peux éliminer par un overflow: auto; sur ton header (un border-top marche aussi mais mal placé esthétiquement Smiley cligne ).

Il reste le problème de la pub en bas de page (qui passe sous le menu gauche) dont tu dois pouvoir te sortie en incluant le div bloc_publi dans #contenu (et non après!)

Je te laisse gérer les blocs de pub (dont un passe dessous) et ces modifications sont ok sous FF, IE6&7 et Opera.
voilou,
Bon courage
Coucou,

Merci pour ton aide.
Donc je résume (tu m'excuseras de mon insistance, mais j'en profite comme ça pour m'améliorer).

Je prend le layout n°2 (celui d'origine).
J'enlève les height à 100%.
Je rajoute un overflow à mon header

Après modification, voici la page :
Lien édité

SUr FIrefox, c'est parfait.
Est-ce bon sur IE6 ? (notamment ce fameux menu de gauche bien aligné)
Modifié par proki (21 Jun 2007 - 14:40)
Re,

Bon sous IE6 il te reste un bug sur ton menu (Doubled Float-Margin Bug) IE6 double la marge latérale sur un élément placé en float donc tu te retrouves avec une marge gauche de 22px sur ton menu au lieu de 11 Smiley biggol
La solution: placer ton menu gauche en display: inline; et je pense que ce sera tout pour l'instant ... Smiley cligne

Bon courage, qu'est ce que l'on s'amuse avec IE !!
Pages :
Sujet clos
Aller à