Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business

|-  INTERNET


|||-  

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

 

10 utilisateurs inconnus
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

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

Prévenir les modérateurs en cas d'abus 
hubert35
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 11/04/2009 à 12:57:43  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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;}


---------------
http://hubert35.com
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 11/04/2009 à 20:25:39  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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


---------------
mon site : Photoshoplus.fr (tout pour Photoshop)
(Publicité)
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 11/04/2009 à 21:08:43  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
merci polov. J'ai supprimé les lignes en question.
 C'est toujours bon avec Firefox mais toujours mauvais avec IE8


---------------
http://hubert35.com
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 12/04/2009 à 07:08:09  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 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




---------------
http://www.onlyweb.fr
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 12/04/2009 à 11:15:39  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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 :D

 



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:


 :edit

 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 :D )


---------------
http://www.onlyweb.fr
(Publicité)
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 12/04/2009 à 12:01:22  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 12/04/2009 à 19:16:29  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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 :D

 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/D​TD/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 :D )



 Ca m'agaçait cette histoire  :whistle:
 Au moins je vais me coucher moins bête ce soir ;)


 



Satané IE





---------------
http://www.onlyweb.fr
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 12/04/2009 à 22:12:31  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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
(Publicité)
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 13/04/2009 à 07:11:55  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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 ;)


---------------
http://www.onlyweb.fr
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 13/04/2009 à 09:40:45  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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.fr (tout pour Photoshop)
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 13/04/2009 à 09:53:05  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
merci à vous. Je vais voir cela dans la soirée et je reviens


---------------
http://hubert35.com
(Publicité)
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 13/04/2009 à 13:07:30  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 13/04/2009 à 16:06:46  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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/D​TD/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 :)

 :edit

 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)


---------------
http://www.onlyweb.fr
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 13/04/2009 à 16:10:56  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

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:


---------------
http://www.onlyweb.fr
(Publicité)
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 13/04/2009 à 17:58:46  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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.fr (tout pour Photoshop)
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 13/04/2009 à 18:11:25  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

polov a écrit :

 
 width:auto
 




 Ah bon ?
 Je ne savais pas :chepa:

 Et ça veut dire quoi width:auto ? ;)


---------------
http://www.onlyweb.fr
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 13/04/2009 à 19:01:54  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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.)


---------------
mon site : Photoshoplus.fr (tout pour Photoshop)
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 13/04/2009 à 19:18:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
donc width:auto = width:100% ?


---------------
http://www.onlyweb.fr
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 13/04/2009 à 20:40:51  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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.fr (tout pour Photoshop)
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 13/04/2009 à 22:17:11  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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.


---------------
http://hubert35.com
  1. homepage
polov
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 14/04/2009 à 07:09:03  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
je n'ai pas lu en détail mais son travail est propre, et il a fait des regroupements
 bravo


---------------
mon site : Photoshoplus.fr (tout pour Photoshop)
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 14/04/2009 à 10:36:42  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
#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: )



---------------
http://www.onlyweb.fr
  1. homepage
hubert35
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 14/04/2009 à 12:50:10  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
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
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 14/04/2009 à 17:04:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
C'est tout à fait ça ;)


---------------
http://www.onlyweb.fr
 Page :
1

Aller à :
 

Sujets relatifs
Plus de sujets relatifs à : (résolu) différence affichage IE8 et FF3

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
Création d'un intranet 9
Comment remettre à jour un site 6
créer un temps d'arrêt avant changement de page [résolu] 9
Impossible de trouver une erreur de syntaxe 14
Comment creer un site internet... 8