LE NEWSMAGAZINE Nº1 DES NOUVELLES TECHNOLOGIES

Fiches pratiques

Hors série

Forums

Contacts

01net.

173 utilisateurs connectés

Forum de Micro Hebdo / Internet, réseaux et high tech / Création de sites/ (résolu) différence affichage IE8 et FF3

(résolu) différence affichage IE8 et FF3

hubert35 le 11 avril 2009 à 14h57

ma page sommaire : http://hubert35.com/sommaire-css.htm s'affiche très bien avec FF3 mais avec IE8 les bordures de mes div ne sont que partiellement présentes. Voici mon CSS
Ou est l'erreur pour cette différence de présentation ?

/* CSS Document */

body {color: #cccccc; background-color: #000000;
width: 801px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border: 1px solid orange;
font-family: "Comic Sans Ms", "Lucida Calligraphy", Verdana, Arial, Helvetica, "Times New Roman", sans-serif; font-size:
small;}

#wrapper { width: 801px; color: #cccccc; background-color: #000000;
margin-right: auto;
margin-left: auto;
border: 0px silver;
}
#bandeau {
color: red; background-color: #000000; width: 801px;
}

#sommaire {
color: red; background-color: #000000; width: 801px;
border: 0px silver;
}

#dinard {
float: left; width:266px; background-color: #000000;
height: 450px;
border-top: 1px solid orange;
border-left: 0px solid orange;
}

#saintmalo {
float: left; width: 266px; background-color: #000000;
height:450px;
border-top: 1px solid orange;
border-left: 1px solid orange;

}
#surlacote {
float: right; width: 265px; background-color: #000000;
height: 450px;
border-top: 1px solid orange;
border-left: 1px solid orange;
border-right: 0px solid orange;

}

#pieddepage {
color: red; background-color: #000000; width: 800px; clear:both;
border-top: 1px solid orange;

}
li { list-style-type: square; }
h1 { font-size: 170%; color: red;}
h2 { font-size: 150%; }
h3 { font-size: 130%; }
h4 { font-size: 110%; }

a:link {color: #cccccc;}
a:visited {color: yellow;}
a:hover {color: red;}

Merci aux spécialistes du CSS qui pourront m'aider
a{text-decoration: none;}

-->Message édité par hubert35 le 15/04/2009 17:29:49<--

-------
http://hubert35.com

répondre

polov le 11 avril 2009 à 22h25

salut
je suppose que c'est à cause de ces lignes

border: 0px silver;

border: 0px silver;

border-left: 0px solid orange;

border-right: 0px solid orange;

si tu mets 0px cela ne sert à rien donc supprime la ligne,
soit tu mets 1px (ou plus) soit tu ne mets pas la ligne

-->Message édité par polov le 11/04/2009 22:26:28<--

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

hubert35 le 11 avril 2009 à 23h08

merci polov. J'ai supprimé les lignes en question.
C'est toujours bon avec Firefox mais toujours mauvais avec IE8

-------
http://hubert35.com

répondre

poum le 12 avril 2009 à 09h08

Satané IE

Moi je trouve ton margin sur le Body étrange.
Crée une DIV pour contenir le site.
Pour elle :

background-color:#000;
border:1px solid orange;
color:#CCC;
margin:10px auto;
width:801px;

Et non sur le Body.

Note également que margin:auto le fait pour la droite et la gauche (en même temps

)

Sinon, si ça ne donne rien, pour test donne une valeur de 5-10px à ce border.
J'ai l'impression qu'il est là sous IE mais qu'il entoure la fenêtre.

:edit

j'ai fais des tests, c'est de là que ça vient mais je rencontre un autre soucis.
Le centrage du site avec margin:auto foire :chepa:

sous IE
Y a un truc là :moque:

De même, ton tableau doit être dans les DIV du site, donc dans le pieddepage par exemple.

Et encore : align:center ne veut rien dire en CSS (text-align:center si tu veux pour centrer du contenu

-->Message édité par poum le 12/04/2009 13:29:16<--

répondre

poum le 12 avril 2009 à 13h15

Voilà à quoi devrait ressembler ton code (on peut faire probablement mieux mais j'ai essayé de rester le plus fidèle possible au tiens)

Pour une histoire de compatibilité, vaut mieux mettre au sommaire un border-bottom qui couvrira toute la surface (comme tu l'as fait pour le pied de page en soulignant le haut (de même, à ce stade j'aurai mis que deux border à la div centrale et rien aux autres sur le côté ... mais bon

))

Tout y est sauf le contenu évidement

Reste que je ne comprends pas pourquoi chez moi ce site ne se centre pas sous IE :chepa:

Polov, si tu me lis

CSS

#wrapper {
width:801px;
margin:auto;
border:#FF9900 solid 1px;
}
#bandeau {
width: 801px;
}

#sommaire {
width: 801px;
border-bottom:1px solid orange;

}

#dinard {
float: left;
width:266px;
}

#saintmalo {
float:left;
width: 266px;
border-left: 1px solid orange;

}
#surlacote {
float: left;
width: 265px;
border-left: 1px solid orange;
}

#pieddepage {
width: 801px;
clear:both;
border-top:1px solid orange;
}

p{margin:1em 0;}

HTML

<html>
<head>
<link href="??????/sommaire-pagecss.css" rel="stylesheet" type="text/css"> (à remettre le bon chemin)
</head>
<body>
<div id="wrapper">
<div id="bandeau">
<p>Bandeau</p>
</div>
<div id="sommaire">
<P>Sommaire</P>
</div>
<div id="dinard">
<p>Dinard</p>
</div>
<div id="saintmalo">
<p>SaintMalo</p>
</div>
<div id="surlacote">
<p>Sur la côte</p>
</div>
<div id="pieddepage">
<p>ICI Tablo</p>
</div>
</div>
</body>
</html>

PS : je ne me suis pas amusé à calculer la taille des DIVs et leurs Borders sachant que je me plante toujours entre l'interprétation d'IE et de FF :moque:

Tu t'es senti obligé de faire un tableau en bas pour aligner un contenu en fonction de ceux des trois DIVs supérieur :lol:

je connais, j'ai donné :mdr:

(privat joke

)

-->Message édité par poum le 12/04/2009 13:35:49<--

répondre

hubert35 le 12 avril 2009 à 14h01

je vais voir cela ce soir.
Pour ta private joke j'ai été voir le sujet. Cela confirme les difficultés que j'avais eu et la seule solution qe j'avais trouvée était le tableau dans le pied de page.
Merci et @ plus

-------
http://hubert35.com

répondre

poum le 12 avril 2009 à 21h16

J'ai trouvé pourquoi ça ne centre pas sous IE.
A vrai dire par tâtonnement, je ne m'y connais pas assez pour expliquer pourquoi

Il manque en debut du source, avant le <html> ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A remplacer par ce qui existe, à savoir : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Expliquera qui sait :jap:

même si je pense que la réponse est ici (j'ai la flemme de tout lire

)

Ca m'agaçait cette histoire :whistle:

Au moins je vais me coucher moins bête ce soir

Satané IE

-->Message édité par poum le 12/04/2009 21:25:26<--

répondre

hubert35 le 13 avril 2009 à 00h12

j'ai bricolé comme j'ai pu et maintenant c'est presque correct avec IE8 que j'ai réussi à centrer mais à l'exception d'une bordure à droite. Si j'y touche c'est alors sous FF qu'elle manque.
Voici mon nouveau CSS un peu épuré.

/* CSS Document */

body {color: #cccccc; background-color: #000000;
width: 801px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border: 1px solid orange;
font-family: "Comic Sans Ms", "Lucida Calligraphy", Verdana, Arial, Helvetica, "Times New Roman", sans-serif; font-size:
small;}

#wrapper { width: 801px; color: #cccccc; background-color: #000000;
margin-right: auto;
margin-left: auto;
border: 1px solid orange;
}
#bandeau {
color: red; background-color: #000000; width: 801px;
}

#sommaire {
color: red; background-color: #000000; width: 801px;
border-bottom: 1px solid orange;
}

#dinard {
float: left; width:265px; background-color: #000000;
height: 450px;
}

#saintmalo {
float: left; width: 266px; background-color: #000000;
height:450px;
border-left: 1px solid orange;

}
#surlacote {
float: right; width: 267px; background-color: #000000;
height: 450px;
border-left: 1px solid orange;
border-right: 1px solid orange;
}

#pieddepage {
color: red; background-color: #000000; width: 799px; clear:both;
border: 1px solid orange;
height: 50px;

}
li { list-style-type: square; }
h1 { font-size: 170%; color: red;}
h2 { font-size: 150%; }
h3 { font-size: 130%; }
h4 { font-size: 110%; }

a:link {color: #cccccc;}
a:visited {color: yellow;}
a:hover {color: red;}
a{text-decoration: none;}

-------
http://hubert35.com

répondre

poum le 13 avril 2009 à 09h11

je ne comprends pas, je t'ai mis le CSS propre ainsi que le HTML pour que cela fonctionne.
Tu utilise encore le body pour centrer :chepa:

reprend ce qui est au dessous et rempli les DIV avec leur contenu.

margin:auto ou margin 12px auto mais pas margin-left:auto suivi de margin-right-auto
de même, ne donne pas de hauteur aux DIV

relis à tête reposée tout ce que j'ai écris

-->Message édité par poum le 13/04/2009 09:15:21<--

répondre

polov le 13 avril 2009 à 11h40

le DTD ça sert à dire au navigateur dans quel code est la page, car il existe plusieurs codes
si tu ne mets pas de DTD le navigateur applique un code "par défaut" et celui-ci ne prend pas forcément en compte certaines balises

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

hubert35 le 13 avril 2009 à 11h53

merci à vous. Je vais voir cela dans la soirée et je reviens

-------
http://hubert35.com

répondre

hubert35 le 13 avril 2009 à 15h07

c'est très laborieux pour moi. J'ai essayé de repartir à zéro en suivant tes conseils.
Voici l'adresse de la page que j'ai obtenu:
http://hubert35.com/sommaire-01net.htm
le pied de page n'est pas centré et il manque 2 bordures
sous IE ce n'est pas centré.
Voici mon CSS:

/* CSS Document */
#wrapper {
width:801px;
margin:auto;
border:#FF9900 solid 1px;
color: #cccccc; background-color: #000000;
}
#bandeau {
width: 801px;
}

#sommaire {
width: 801px;
border-bottom:1px solid orange;

}

#dinard {
float: left;
width:266px;
color: #cccccc; background-color: #000000;
}

#saintmalo {
float:left;
width: 266px;
border-left: 1px solid orange;
color: #cccccc; background-color: #000000;

}
#surlacote {
float: left;
width: 265px;
border-left: 1px solid orange;
color: #cccccc; background-color: #000000;
}

#pieddepage {
width: 801px;
clear:both;
border-top:1px solid orange;
color: #cccccc; background-color: #000000;
}

p{margin:1em 0;}
a:link {color: #cccccc;}
a:visited {color: yellow;}
a:hover {color: red;}
a{text-decoration: none;}

-------
http://hubert35.com

répondre

poum le 13 avril 2009 à 18h06

tu y es presque.
tu as commis juste quelques minuscule erreurs

Pour le boder c'est normal, ta DIV Wrapper se termine avant le pied de page.
1) la </DIV> qui est en ligne 107 doit descendre en ligne 120, histoire de contenir également l'ensemble du tableau de sa DIV (pieddepage)

2) chage le DTD en haut de page. Je t'ai mis la bonne syntaxe, la revoiçi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3) pour finir, le boder qui n'arrive pas en bas. Supprime celui de la div SURLACOTE et ajoute à la DIV SAINTMALO : border-right: 1px solid orange;
Juste en dessous de border-left: 1px solid orange;

Et voilà :top:

Tout est ok, sous IE et FF et même sous Opéra et Chrome si tu veux le savoir

C'en sera de même dans 5 minutes chez toi

Si soucis, c'est inutile de mettre le code ici, je le récupère bêtement avec un Enregistrer-sous

(à condition qu'il soit en ligne évidement)

-->Message édité par poum le 13/04/2009 18:09:27<--

répondre

poum le 13 avril 2009 à 18h10

polov a écrit :

le DTD ça sert à dire au navigateur dans quel code est la page, car il existe plusieurs codes

Avec le HTML 4.0 IE ne comprends pas le margin:auto ? :chepa:

répondre

polov le 13 avril 2009 à 19h58

je ne sais pas pour les différences entre les DTD, il y a pleins de détails
c'est trop long

pour le margin:auto, parfois il suffit de lui ajouter une balise width pour que ça fonctionne
width:auto ou en px

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

poum le 13 avril 2009 à 20h11

polov a écrit :

width:auto

Ah bon ?
Je ne savais pas :chepa:

Et ça veut dire quoi width:auto ?

répondre

polov le 13 avril 2009 à 21h01

width:auto c'est quand la balise remplit la largeur de son conteneur

normalement c'est la position par defaut
mais justement dans certains cas lorsque la balise width est absente on a pas le même résultat
donc si on ne veut pas limiter la largeur on met auto ou 0

et même parfois un auto ce n'est pas pareil qu'un 0
margin:auto ou margin:0
cela dépend des autres balises présentes

et bien sur des balises dans le conteneur
puisqu'en css on fonctionne en cascade (Cascading S.S.)

-->Message édité par polov le 13/04/2009 21:07:27<--

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

poum le 13 avril 2009 à 21h18

donc width:auto = width:100% ?

répondre

polov le 13 avril 2009 à 22h40

bonne question = là c'est plutot contextuel
c'est à dire que l'effet est sans doute le même mais :

- le % ça sert surtout quand on fait un site élastique, c'est à dire que la div s'adapte automatiquement à la largeur de l'écran
- alors que auto tu lui dis de remplir toute la largeur mais plus par rapport à son conteneur
- après il y a peut etre l'influence de margin qui change aussi

faut tester !

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

hubert35 le 14 avril 2009 à 00h17

sur les derniers messages je ne vous suis plus mais pas grave.
J'ai bricolé comme tu as dit et je pense que le résultat est correct.
Voici la nouvelle version:
http://hubert35.com/sommaire-01net.htm

entre temps j'avais posé la question à un ami qui a tardé à me répondre mais qui vient de me créer une autre page et cette fois cela pourra être intéressant :bien:

car il arrive au même résultat dans le pied de page sans y mettre un tableau.
Je n'ai pas compris vraiment la technique :chepa:

mais voila la page et le CSS

http://hubert35.com/sommaire4.html
http://hubert35.com/sommaire4.css
http://hubert35.com/sommaire4-ie.css (variante pour IE)

avant de mettre en place pour de bon j'attends vos commentaires.
Encore merci.

-->Message édité par hubert35 le 14/04/2009 00:23:24<--

-------
http://hubert35.com

répondre

polov le 14 avril 2009 à 09h09

je n'ai pas lu en détail mais son travail est propre, et il a fait des regroupements
bravo

-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!

répondre

poum le 14 avril 2009 à 12h36

#footer li {
float:left;
width:33%;

En gros, il place les trois colonnes dans une liste.
Chaque élément de cette liste (les LI qui sont contenu dans la DIV FOOTER (donc ça ne concerne pas les autres liste du site)) possède une largeur du 1/3 de la DIV et par le float:left elles se suivent horizontalement.

On pouvait également faire la même chose avec 3 DIVs mais là, c'est encore plus propre au niveau du code

A vérifier si le contenu en hauteur d'une des liste (ex colonne de tableau) est plus grande que le contenu qui est à sa gauche. Je ne sait pas comment le site réagirait (glissade en dessous ? :chepa:

)

-->Message édité par poum le 14/04/2009 12:39:04<--

répondre

hubert35 le 14 avril 2009 à 14h50

pour le footer li c'est bien celà. J'ai compris le sytème et j'ai modifié pour une présentation en 4 colonnes et cela marche avec widht:25%;
Cela remplace avantageusement la présentation en tableau.
Merci de ton aide et de tes explications.

-------
http://hubert35.com

répondre

poum le 14 avril 2009 à 19h04

C'est tout à fait ça

répondre