CSS : Affichage différent sous Firefox ou IExplorer

Bonjour,

Débutant, en CSS je suis en train de consulter les tutoriels de ce site (qui sont très bien realisé.) Mon site est actuellement créer sous forme de tableau (si si, j'ai osé ) et j'aimerais avoir maintenant quelques chose de clair et qui soit facilement mis à jour, d'ou mon intéret au CSS

Cepandant, j'ai un petit problème avec le tutoriel Comprendre le positionnement des balises en CSS -> Un bloc contenu dans un autre

J'ai copié exactement le code inscrit sur la page, mais le résultat affiché sous firefox ou sous internet explorer est complètement différent.

http://img218.imageshack.us/img218/7862/sanstitre5rz.jpg

Si quelqu'un à la solution pour remédier à mon problème ce serait très sympa. Merci.

A+ et bonne soirée

Stéphane
Modifié par Cochonou (29 Jun 2006 - 01:20)

Hello Stéphane.

Tu penses à ce code-là ?

[i]Partie HTML :[/i]
<div class="conteneur">
   <div class="bloc">bli bli bli</div>
</div>

[i]Et la CSS correspondante :[/i]
.conteneur {
	background-color: blue;
	height: 100px;
	width: 100px;
}
.bloc {
	background-color: yellow;
	height: 50px;
	width: 50px;
	margin-left: 20px;
	margin-top: 40px;
}

(extrait de Comprendre le positionnement des balises en CSS)

Il s'agit peut-être d'un problème de fusion des marges (exposé et solutions). Dans ce cas, tu peux essayer avec un simple padding: 1px; appliqué à la div ayant pour classe « conteneur ». Si ça corrige le problème, c'est bien une histoire de fusion des marges. Dans ce cas, je t'invite à lire la page dont j'ai donné le lien juste un peu plus haut. Ça n'est pas bien compliqué, mais c'est vrai que c'est déroutant – bien qu'il s'agisse d'un comportement parfaitement standard et logique (en l'occurence, c'est Internet Explorer qui est limité).

Bonjour,

C'est vraiment dommage de faire un site avec un tableau alors que c'est aussi simple de le faire avec des Div.

Premio :
As-tu pensé à mettre en début de feuille css :
* {margin: 0; padding: 0;}

Ensuite, n'as tu pas mis de div dans tes cellules ?

Ensuite, est-ce que sans css tout s'affiche bien à la suite en html ?

Ensuite, en positionnant d'abord les blocs principaux est-ce que tout se met bien en place sous IE et sous FF (il y a une extension FF qui permet de visualiser sous IE) ?

Enfin, applique ta ccs aux blocs contenus (s'ils ne sont pas + grands que les blocs conteneurs).

Fais tout sous FF pour commencer puis applique les correcteurs pour IE.

Bonsoir à tous,

Desolé d'avoir répondu si tard, j'étais absent. Merci de vos éléments de réponses. Je vais essayer tout ça et vous retiendrais au courant

mpop a écrit :
Hello Stéphane.

Tu penses à ce code-là ?

[i]Partie HTML :[/i]
<div class="conteneur">
   <div class="bloc">bli bli bli</div>
</div>

[i]Et la CSS correspondante :[/i]
.conteneur {
	background-color: blue;
	height: 100px;
	width: 100px;
}
.bloc {
	background-color: yellow;
	height: 50px;
	width: 50px;
	margin-left: 20px;
	margin-top: 40px;
}

(extrait de Comprendre le positionnement des balises en CSS)

Il s'agit peut-être d'un problème de fusion des marges (exposé et solutions). Dans ce cas, tu peux essayer avec un simple padding: 1px; appliqué à la div ayant pour classe « conteneur ». Si ça corrige le problème, c'est bien une histoire de fusion des marges. Dans ce cas, je t'invite à lire la page dont j'ai donné le lien juste un peu plus haut. Ça n'est pas bien compliqué, mais c'est vrai que c'est déroutant – bien qu'il s'agisse d'un comportement parfaitement standard et logique (en l'occurence, c'est Internet Explorer qui est limité).

Re,

C'est tous bon, mon problème est résolu. Merci

A+

Salut cest remoi,

J avance dans mon projet mais je me retrouve à nouveau confronté à un problème d intérpretation de CSS. Sous firefox c'est tout bon, mais sous internet explorer tout ma partie est décalée sur la droite. (Illustration en-dessous)



J'ai essayé plusieurs chose mais sans avoir l'effet escompté, si quelqu'un comprend les caprices d'Iexplorer et peut m'aider, ça serait sympa. Voici mon code Merci d'avance.

CODE CSS

#headermenu {
position: absolute;
background-color: #3A3A3A;
width: 185px;
height: 230px;
}
#headerimage {
height: 230px;
margin-left: 185px;
background-color:#9999CC;
}

Ma page

<div id="headermenu">
<ul class="menuheader">
<li><a href="http://www.f1-pictures.com"><img src="http://www.f1-pictures.com/images/bt_acueil.jpg" srcover="http://www.f1-pictures.com/images/bt_acueil2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/forum/"><img src="http://www.f1-pictures.com/images/bt_forum.jpg" srcover="http://www.f1-pictures.com/images/bt_forum2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/chat/chat.php"><img src="http://www.f1-pictures.com/images/bt_chat.jpg" srcover="http://www.f1-pictures.com/images/bt_chat2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/livre_or/livre-d-or.php"><img src="http://www.f1-pictures.com/images/bt_livreor.jpg" srcover="http://www.f1-pictures.com/images/bt_livreor2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/liens/liens.php"><img src="http://www.f1-pictures.com/images/bt_liens.jpg" srcover="http://www.f1-pictures.com/images/bt_liens2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/a-propos-de-nous.php"><img src="http://www.f1-pictures.com/images/bt_apropos.jpg" srcover="http://www.f1-pictures.com/images/bt_apropos2.jpg"></a></li>
</ul>
</div>
<div id="headerimage"><img src="http://www.histoiredelaf1.com/test/design/banniere.jpg"></div>

Modifié par Cochonou (29 Jun 2006 - 01:20)