28221 sujets

CSS et mise en forme, CSS3

[résolu] Rendu IE vs Firefox

Bonjour à tous,

J'ai pris comme base l'habillage de Openweb pour réaliser les liens "du haut".
Par contre entre IS et Firefox je galère :



Dans Firefox tout va bien mais IE bonjour la m...

Jugez plutôt :

http://www.chezwiwi.com/role/

J'ai mis du vert et rouge c'est juste pour voir où sont mes claques Smiley lol

Superposition dans IE entre le vert et le rouge, et le conteneur "cogne presque" dans les menus du haut....


Condensé de la feuille de style :

/* CSS Document */

body
{
background-color:#f5f8fc;
font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
color:#000;
font-size:small;
margin:1% 1%;
padding:1% 0 0 0;
}


.conteneur
{

color:#fff;
background-color:#2F2C2A;
background-position:top right;
background-repeat:no-repeat;
border:3px;
padding: 0 1% 0 1%;
}

#sommaire
{
background-color:#009900;
position:absolute;
width:20%;
}

#fiche
{
background-color:#CC0000;
margin:0 0 0 20%;
}


Feuille de style complète :

http://www.chezwiwi.com/role.css

Code du html :




<body>
<div id="page">
  <div id="haut">
    <ul>
      <li> <a href="../index.html">Chez wiwi</a> </li>
      <li> <a href="http://www.chezwiwi.com/deblog/">wiwi déblogue</a> </li>
      <li> <a href="http://forum.chezwiwi.com">Le forum</a> </li>
    </ul>
  </div>
</div>
<div class="conteneur">
  <div id="sommaire">
    <p>pouet pouet pouet pouet pouet pouet pouet pouet pouet</p>
  </div>
  <div id="fiche">
    <p>pouet pouet pouet pouet pouet pouet pouet pouet pouet</p>
  </div>
 </div>
</body>
</html>



En vous remerciant par avance pour éclairer ma lanterne Smiley smile
Modifié le 01 Dec 2004 - 17:17
Je suis désolé car je ne vais pas répondre à ta question, mais simplement faire une remarque (que j'espère constructive) concernant la façon dont la question est posée.

Il y a plein de gens compétents sur ce forum, mais si tu veux une réponse rapide tu devrais penser à eux :

1/ fournir un code ramassé qui isole le problème (dans ton cas, 3 div sont probablement suffisantes pour exposer la difficulté). C'est d'ailleurs durant ce processus d'isolation que l'on trouve souvent une solution soi-même. Ainsi seules les questions les plus ardues et les plus intéressantes sont publiées.

2/ mettre des commentaires qui facilitent un rapprochement rapide entre l'aspect visuel et le code (du style : /* ceci est la div qui dit pouet pouet en vert*/).

3/ fournir le code complet (ce n'est pas en contradiction avec 1/), en l'occurrence tu as omis le HTML.
Voilà, j'ai modifié ma demande en suivant tes conseils. J'espère que c'est plus clair.

J'ai passé pas mal de temps à regarder sur le site les articles concernant les différences de rendu entre IE et firefox, mais je dois dire que mon manque d'expérience en matière de css me fait décrocher assez rapidement.
Bonjour et bienvenue wiwi,

Y a plusieurs trucs qui semblent ne pas aller.

pourquoi 
position:absolute;
pour le sommaire ?

Tu as essayé de l'enlever ?

ça n'a rien à voir avec ton problème, mais pourquoi une class et non pas une id pour le conteneur ? Smiley cligne
Modifié le 01 Dec 2004 - 12:57
Oui effectivement il y a avantage à lire ce tutorial Smiley confused

car maintenant j'ai ceci :

#sommaire
{
float:left;
background-color:#009900;
width:20%;
}

#fiche
{
background-color:#CC0000;
margin-left:20%;
}


Et ça fonctionne beaucoup mieux même si ce n'est pas encore parfait.

En ce qui concerne les id, effectivement, j'ai effectué les changements. Le "position : absolute;" a également été éjecté.

La route vers le chemin de la connaissance est semée d'embûches Smiley smile

Je vous remercie de votre aide. J'arrive à un résultat très acceptable Smiley biggrin
Modifié le 01 Dec 2004 - 14:39
Alors ! continu de progresser et il sera bientôt tout à fait acceptable Smiley cligne

Si le problème est résolu, tu veux bien éditer le premier post de ton sujet et ajouter [Résolu] dans le titre ? merci d'avance Smiley smile
Un dernier point et j'arrête de vous embêter.

...
Pour l'instant
....

Smiley lol

Je n'arrive plus à trouver le style qui permet de gérer les changements de paragraphes. Quand on fini un </p> et qu'on en débute un nouveau, comment gérer un retrait et l'espace entre les deux paragraphes ? Smiley confused
Pour gérer les espacements, on utilise souvent margin et/ou padding.

Pour un retrait ce serait plus correcte de prendre text-indent dans le cas général.
Il est parfois avantageux de se tourner vers des pseudo classes telles que :
:before, :first-line, :first-letter
Sujet clos
Aller à