28173 sujets

CSS et mise en forme, CSS3

[Résolu] Compatibilité FF2, IE7 VS IE6

Salut,

J'ai un problème avec du positionnement relatif.

Sous IE7 ou FF, c'est impécable et le rendu est le même. Mais sous IE6, le comportement n'est pas le même et je galère.

Visible à http://maquette.apicnet.net/rigoin/index.html
C'est le header qui pose problème.

Merci par avance de vos suggestions et conseils.
Modifié par papyjo (08 Nov 2006 - 08:34)
Bonsoir,

En fait, je pense que ce sont les deux petits rubans qui mettent IE6 en folie,
Juste une piste ...

<!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>
		<title>Test</title>
<style>
* {
margin:0;
padding:0;
}
/*html,body {
width:100%;
height:100%;
}*/
html {
background:#918d90 url(images/fond.gif) repeat-x left top;
}
body {
color:#000;
font:normal 0.95em/1.2em Verdana,"Trebuchet MS",Arial,sans-serif;
background:url(images/mur.jpg) repeat-x -15px top;
}

img.noflot {
display:block;
margin:auto;
}
.clear {
font-size:1px;
height:0;
clear:both;
}
a img{
border: 0;
}
a:active,a:visited,a:link {
color:#00b72f;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#068570;
text-decoration:none;
}
#container {
position:relative;
top:25px;
width:760px;
margin:0 auto 25px;
border:2px solid #00b72f;
border-width:1px 3px 3px 1px;
background:#fff;
}
#header {
position: relative;
width:740px;
height:135px;
margin:10px auto;
border:1px dashed #00b72f;
background-color:#fff;
}
#header #band {
position:relative;
border:0;
padding:5px 0 0;
background:none;
width:740px;
height:125px;
}
#header #rubg,#header #rubd {
padding:0;
border:none;
background:transparent;
z-index:15;
}
#ruban{
width:900px;
height: 88px;
position: absolute;
left: 50%;
margin-left: -450px;
top: -50px;
z-index:150;

}
#rubg {
float: left;

}
#rubd {
float: right;
}
</style>

</head>
<body>
<div id="container">
	<div id="header">
		  	  				<div id="ruban">
							<img id="rubg" alt="" src="rubang.gif" width="135" height="88" />
							<img id="rubd" alt="" src="ruband.gif" width="133" height="88" /> 
							</div>
	<p id="band" ><a title="Accueil" href="#" ><img  src="header.jpg" class="noflot"  alt="s.a.r.l. RIGOIN" /></a></p>
	</div> 

	<div id="menu">
		<div id="navcontainer">
			<ul id="navlist">
				<li><a id="mhome" title="Accueil" href="index.html">Accueil</a></li>
				<li><a id="mneuf" title="Constructions neuves" href="neuf.htm">Constructions neuves</a></li>
				<li><a id="mrenov" title="Rénovation" href="renov.htm">Chantiers de rénovation</a></li>

				<li><a id="mcontact" title="Contact" href="contact.htm">Contact</a></li>
				<li><a id="maide" title="Aide" href="aide.htm">Aide</a></li>
			</ul>
		</div>

	</div> 

</div>
</body>

</html>


Il manque quelques édulcorants et il y aura peut être plus simple.
Modérateur
bonsoir ,

height est egal a min-height dans IE6 et les images placées en relatif , occupe toujours leur emplacement initial , du coup seul IE6 etire header a plus de 135px.

Il faudrait passé en commentaire conditionnel pour IE6 et inferieur un : overflow:hidden; , si les autres lisent aussi cette regles alors lils buggeront a leur tour .

++

pour le commentaires conditionnel , voir la faq , c'est expliqué Smiley smile


<edit> oui oui , ce sont les bouts de scotch Smiley cligne ... qui "scotchent IE6 !
Modifié par gcyrillus (08 Nov 2006 - 02:06)
Sujet clos
Aller à