Différence d'affichage entre IE et Firefox

Bonjour,

Je suis tout neuf sur ce forum, et je suis un encore balbutiant quand aux CSS et aux questions de mises en page (même si je m'y penche depuis un bon moment - entre mon site perso et d'autres réalisations modestes).

Voilà mon problème : j'ai crée une page fichier php et fichier css ! Tant bien que mal, j'ai crée une mise en page comme je le voulais (enfin presque). Or l'affichage est catastrophique avec IE, et correct avec firefox (ou Safari - sous mac OS X). Bien sur, mon fichier CSS est loin d'être parfait (je ne pige pas tout encore et j'ai pas toujours le temps de bien étudier à fond).

voilà le lien http://www.all-amis.net/chroniquezic/chroniques.php à voir avec IE et Firefox, c'est édifiant !

(le même en html avec un bon affichage sous les différents navigateurs - http://www.all-amis.net/chroniquezic/chronique.html). J'ai essayé de m'en servir pour le fichier php, et là aussi, la pagaille ! D'ou mon second essai assez différent plus haut.
Voilà, j'espère que vous saurez me donner des conseils. En espérant les comprendre .

Merci.
Joseph
Modifié par Joseph (01 May 2005 - 20:34)

Pour plus de clarté, le fichier CSS :

/* CSS Document */
.global {
font-family: "Courier New", Courier, mono;
font-size: medium;
font-style: normal;
font-weight: lighter;
font-variant: normal;
color: #CC6633;
text-decoration: none;
height: 500px;
width: 830px;
border: thin dotted #CCCCCC;
background-position: center center;
text-align: center;
margin: 2em;
float: none;
padding: 2em;
position: absolute;
}
.carre1 {
font-family: "Courier New", Courier, mono;
color: #FFFF66;
text-decoration: none;
background-color: #990033;
text-align: center;
float: left;
height: 200px;
width: 400px;
margin: 5px;
padding: 2px;
}
.carre2 {
font-family: "Courier New", Courier, mono;
color: #CCCC66;
text-decoration: none;
background-color: #990033;
text-align: center;
float: left;
height: 200px;
width: 400px;
margin: 5px;
padding: 2px;
}
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bolder;
color: #003366;
text-decoration: none;
font-style: normal;
text-align: center;
border-bottom-width: thin;
border-bottom-style: outset;
border-bottom-color: #333333;
}
.texte {
font-family: "Courier New", Courier, mono;
font-size: medium;
font-weight: lighter;
color: #990000;
float: left;
text-decoration: none;
height: auto;
width: auto;
}
.spacer{
font-family: "Courier New", Courier, mono;
text-decoration: none;
}

bonjour,

ca me rappelle moi il y a quelques mois ... perdu dans les illusions d'un monde meilleur grâce aux CSS... Bon sérieusement ni IE ni FF ne respectent les standards à la lettre donc il faut faire des concessions et parfois tatonner pour les conciliers eux deux et les autres...
Déjà evite les tailles nommées préfère les pourcentages par exemple au lieu de :

 font-size: medium;

préfère

 font-size: 80%

D'autre part, enlève le

 float: left;

de ton carre2.
Pour finir je ne vois pas l'utilité de celui du float de ton texte.

Tu devrais lire quelques articles sur l'utilisation judicieuse des propriétés float. Mais je n'ai pas de liens - intérressants - sous la main - ce n'est pas grave d'autres ici t'en donneront .

Bon courage, bienvenue et bon apprentissage.
IlSandor.

Merci de la réponse.

déjà si j'enlève le float left du carré2, ben c'est le binz. le second carré n'a plus de couleur de fond et en plus il se retrouve en dessous du premier ! Bref, j'ai pas tout pigé !

Parce que ton site m'a interréssé -eh oui du favoritisme je vais y regarder de beaucoup plus près.
IlSandor.

Merci bien.

Ce n'est qu'une petite page rubrique d'un site plus sérieux (si on veux) un petit forum de copains (il y a le lien sur mon site perso - mais je ne fais pas de pub - voir le globe en bas !) .

Donc comme j'ai dit je suis de bonne humeur c'est peux être pas exactement ce que tu veux mais il faut bien qu'il te reste un peu de travail
la page
Modifie le pour que ca convienne bien et essaie de comprendre ce que j'ai fait.
Le plus important est de garder un code html avec un sens c'est à dire des balises h1, p, ul, li etc... Les div ne devraient pas servir à la place de ces balises. Les sites comme css zen garden ne sont pas à prendre en exemple pour un vrai site (ce sont des exercices de style).
Enfin, il faut eviter d'abuser des div. et des classes (beaucoup de tes classes devraient être des id)
Mais bon j'imagine que ce n'est pas facile à intégrer tout ca.
Bon courage,
IlSandor.

Bonjour et bienvenue Joseph sur Alsacréations,

Le plus important est probablement de t'intéresser au html et de coder les différents contenus pour ce qu'ils sont, tu as au moins un titre, des paragraphes, html te donne les moyens de les restituer dans une page web, profites-en et utilises pleinement html et tous les éléments qu'il met à ta disposition.

Comme l'indique le titre de ton post et confirme le code de ta page, tu dois te pencher de près sur les doctypes et en choisir un suivant tes besoins. Voici quelques lectures: http://del.icio.us/Igor/dtd

Merci, je vais regarder tout ça.

Il y a quelques mois, je ne me serais pas cassé la tête. Un tableau et plus de problèmes. Enfin, si on peut dire. En tout cas plus de prise de tête.

Je vais étudier attentivement vos exemples. J'ai quelques connaissances de bases pour le html.

Avec un ami à moi hier matin, on a réussi à faire une page html qui s'affiche bien. C'est quand je veux revenir au php que tout ce gate.

merci et bonne semaine.
Modifié par Joseph (02 May 2005 - 07:21)