28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit soucis de compatibilité avec IE 7 ...
Sous Firefox pas de soucis et sous IE mon bloc central <block> est décalé sur la gauche et je ne sais pas d'ou cela peut bien venir ...

Voici le code HTML :


<div id="flash"> ... </div>
<div id="flash2"> ...</div>

<div id="cahier">

<div id="news">
<ul>
<li><a href="index.php?news=news1">News1</a></li>
<li><a href="index.php?news=news2">News2</a></li>
<li><a href="index.php?news=news3">News3</a></li>
</ul>
</div>


<div id="block">
<h1>bienvenue</h1><p>texte</p>
</div>

<div id="droite">
           <img src="img.jpg"/>
            <h2>Titre</h2>
           <p>blablablabla</p>
           <p>blablablabla</p>
           <p>blablablabla</p>
           <img src="img2.jpg"/>
<h3><a href="index.php">lienA</a></h3>
<h3><a href="index.php?lienB=ok">lienB</a></h3>
<h3><a href="index.php?lienC=ok">lienC</a></h3>
<h3><a href="index.php?lienD=ok">lienD</a></h3>
</div>
</div>


et le CSS


html {margin: 0px;padding: 0px;}

body{
background: url(../templates/fondGris.jpg) no-repeat top center;
border: 0px 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:70%;
}

#flash { position:absolute; top:35px; left:40px; z-index:0;}
#flash2 { position:absolute; top:35px; left:760px; z-index:0;}

#cahier{
background: url(cahier.jpg) no-repeat;
width:980px;
height:580px;
margin-left : auto;
margin-right: auto;
}

#news{ position:relative; width:5%; text-align:left; color:#000000; margin-left:40px; padding-right:5px; margin-right:1%; float:left; margin-top:57px; z-index:1; text-align:left;}

#block { position:relative;width:420px; text-indent:0em; color:#000000; margin-left: 140px;padding-right:5%; padding-top:0px; height:450px; overflow-y:auto; margin-right:1%;padding-top:20px;}

#droite {width:165px; text-indent:0em; color:#000000; margin-left:18px; padding-right:1%; padding-top:0px; margin-right:1%;padding-top:0px; position:relative; left:745px; top:-420px; text-align:center;}

h1 {text-align:center; color:#000000; font:Arial; font-size:20px; position:relative; margin-top: 0%; margin-bottom:33px; text-align:center;}



Merci Smiley biggrin
Modifié par popovitch (06 Mar 2008 - 20:55)
Résolu : Le menu de gauche avait une largeur de 50px que Firefox ignorait, la bonne largeur est de 150px, la marge gauche du "block" doit être nulle.

Sorry