28172 sujets

CSS et mise en forme, CSS3

[Résolu]Encore un problème d'affichage sous IE6

Bonsoir,

Dans le cadre du relookage de mon site, je rencontre une divergence d'affichage entre IE6 et le reste du monde.

Après plusieurs heures de recherche, je n'ai pas fait mieux que ce que je joint au message.
En fait, mon header ne se positionne pas en bas de mon div

Pour faire simple, voici la structure de ma page html

<body>	
	<div id = "header">
		<ul id="bandeau_menu">
			<li><a href="#">Plan du site </a></li>
			<li>|</li>
			<li><a href="#" title="CGS">Condition Générale d'utilisation</a></li>
			<li>|</li>
			<li><a href="#" title="Contactez moi">Contacter moi</a></li>
		</ul> <!-- fin bandeau_menu -->
		<h1><a href="#" title="Accueil"><span>Accueil</span></a></h1>   
	</div><!-- fin header -->
	<div id = "header-menu">
		<?php include("inc_gene/inc_menu.php");?>
	</div>
</body>


côté CSS

body {
	color: black;
	background: #ddeeaa url("images/background.gif") repeat-x fixed top left;
	font: normal 80% "Trebuchet MS", Verdana, Geneva, Tahoma, Helvetica, Sans-Serif;
	margin:0;
	padding:0; 
	text-align: center ;
}

#header {
	height:240px;
	background: #85a307	url("images/header_bg.jpg") 50% 28px no-repeat;
}
#header h1{
	width: 987px ;
	height: 181px ;
	background: url("images/header.jpg") center no-repeat ;
	margin:0 auto;
	padding-top: 61px ;
}
#header-menu {
	height:44px;
	background: #6d8604 url("images/bandeau.jpg") center no-repeat;
}


la partie #header ne se positionne pas correctement juste au dessus du menu ici sous IE6
upload/19103-ie6.jpg

ici sous FF
upload/19103-ff.jpg

Je suis preneur de toutes idées ou début de piste pour améliorer le rendue ! Smiley biggrin
Modifié par Babali (14 Aug 2010 - 13:47)
Bonjour,

Ton explication n'est pas claire (header en bas du div... le header étant un div...), bref.

Le problème venant certainement de header-menu et de ce qui se trouve dedans, le bout de code que tu fournis n'apporte pas l'information nécessaire pour t'aider. Une page en ligne serait le plus pratique.
Merci Laurie-Anne, j'ai bien senti que j'étais pas très clair, c'est pour cela que j'avais joint des images.

Bon, j'essaye de mettre en ligne la nouvelle version ce soir pour que vous puissiez voir en direct.
Coucou Smiley smile

Tu as essayé de cibler IE6 avec un commentaire conditionnel et de mettre à ton header-menu un margin négatif juste pour voir si tu n'arrives pas à le remonter "artificiellement" pour IE6 ?

Par contre chez moi sous IE tester je constate plus un souci avec tes mega menu déroulants qui passent sous le slide. Après comme dit (ouai on dit ça en alsace Smiley langue ) je suis sous IE tester pas IE6 directement peut-être que c'est due à mon IEtester si tu n'as pas constaté le problème avant. Un petit z-index devrait régler le problème du menu sous l'image si il est vraiment présent sous IE6 Smiley cligne
Bon, ça y est j'ai passé un peu de temps, mais j'ai trouvé.
Au lieu de positionner #header h1 avec un padding (qui en plus faisait que je débordais du div), je l' ai positionné avec un margin ce qui est mieux sur tous les navigateurs Smiley biggrin

En revanche, j'étais tellement focalisé sur mon problème de positionnement que j' n'ai même pas testé le menu avec le slide et effectivement, le menu passe sous le slide même avec IE6 (en Gironde on a encore IE6 sur nos machines Smiley langue )

Après quelques essais infructueux de z-index je cherche encore ...

Je mettrai en ligne les modif ce soir.
De la doc pour le z-index ici

Si tu es motivé(e) tu peux donner un z-index moins haut à ton bloc image, et plus haut au bloc menu, le z-index le plus haut étant celui affiché au dessus (comme un calque photoshop). Si es en mode fainéasse comme moi parfois et que as besoin du z-index que pour ça, tu peux lui mettre un truc genre 99, en supposant que tu ne voudras aucun éléments au dessus du menu.

En espérant que ça va t'aider Smiley smile
Merci saiko_sama Smiley biggrin
J'avais juste oublié de mettre un 
position:relative;
avant mon z-index
Cela fonctionne, je passe donc en mode résolu !
Sujet clos
Aller à