Tom's Guide > Forum > Programmation > Probleme de difference graphique entre IE et FF.

Probleme de difference graphique entre IE et FF.

Forum Programmation : Probleme de difference graphique entre IE et FF.

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Bonjour,

j'ai un soucis d'adaptation entre FF et IE.

Je ne sais pas trop comment faire.

J'ai mi mis site en ligne pour que vous puissiez me dire ce que vous en pensez.

http://www.gagner-argent-gratuitement.com/

et voici mon CSS:

body {
width : 1024px;
margin : auto;
background : #dee2e3 url(theme/fond-bg.jpg) no-repeat top center;
font-family : Helvetica, Arial, sans-serif;
font-size : 12px;
}
a {
text-decoration : none;
font-weight : bold;
color : #000000;
}
a:hover {
color : #fe7f00;
}
.clear {
clear : both;
}
#en_tete {
width : 455px;
height : 131px;
background-image : url(theme/new-logo.png);
margin-top : 40px;
margin-left : 30px;
margin-bottom : 10px;
}
#conteneur_gauche {
float : left;
width : 158px;
margin-right : 20px;
margin-top : 60px;
}
#menu_gauche {
background : url(theme/menu-g-h.png) no-repeat bottom left;
height : 42px;
width : 158px;
margin-left : 2px;
margin-bottom:12px;
}
#menu_gauche ul li {
list-style : none;
float : left;
width : 158px;
}
#menu_gauche ul li a {
height : 36px;
width : 140px;
font-size : 12px;
text-decoration : none;
text-align : center;
display : block;
background : url(theme/actualite-over.png) no-repeat top left;
line-height : 34px;
color : #000000;
margin : 8px 0 -16px -35px;
}
#menu_gauche ul li a:hover {
background-position : bottom left;
}
#contenu_gauche {
background : url(theme/menu-gauche-milieu.png) repeat-y left bottom;
margin-left : 2px;
overflow: hidden;
}
#contenu_gauche ol li {
list-style : none;
text-align : center;
padding-right : 20px;
margin-left : -25px;

}
#contenu_gauche ol li a {
font-size : 11px;
text-decoration : none;
text-align : center;
line-height : 11px;
}
#contenu_gauche {
background : url(theme/menu-gauche-milieu.png) repeat-y left bottom;
margin-top : -12px;
}
#contenu_gauche ul li {
list-style : none;
}
#contenu_gauche ul li a {
height : 36px;
width : 140px;
font-size : 12px;
text-decoration : none;
text-align : center;
display : block;
background : url(theme/actualite-over.png) no-repeat top left;
line-height : 34px;
color : #000000;
margin : 0 0 -10px -35px;
padding-left : 2px;
}
#contenu_gauche ul li a:hover {
background-position : bottom left;
}
#contenu_gauche_bottom ol li {
list-style : none;
margin-top : 0;
}
#contenu_gauche_bottom ol li a {
font-size : 11px;
text-decoration : none;
text-align : center;
line-height : 11px;
}
#contenu_gauche_bottom_bas {
background : url(theme/menu-g-b.png) no-repeat left bottom;
height : 26px;
width : 158px;
margin-left:2px;
}
#conteneur_milieu {
width : 726px;
margin : auto;
}
#menu_milieu {
background : url(theme/bande-h.png) no-repeat bottom left;
height : 81px;
width : 726px;
margin : -15px 0 0 3px;
font-size : 11px;
text-align : center;
text-decoration : none;
line-height : 22px;
}
#menu_milieu ul li {
list-style : none;
float : left;
}
#menu_milieu ul li a {
height : 44px;
font-size : 12px;
text-decoration : none;
text-align : center;
display : block;
background : no-repeat top left;
line-height : 50px;
font-size : 15px;
color : #000000;
}
#menu_milieu ul li a:hover {
background-position : bottom left;
line-height : 40px;
}
#menu_milieu ul li a.index {
background-image : url(theme/btn-index.png);
width : 98px;
margin : 0 0 0 -35px;
font-size : 13px;
text-align : center;
}
#menu_milieu ul li a.argent {
background-image : url(theme/btn-argent.png);
width : 198px;
font-size : 13px;
text-align : center;
}
#menu_milieu ul li a.filleuls {
background-image : url(theme/btn-filleuls.png);
width : 202px;
font-size : 13px;
text-align : center;
}
#menu_milieu ul li a.forum {
background-image : url(theme/btn-forum.png);
width : 107px;
font-size : 13px;
text-align : center;
}
#menu_milieu ul li a.contact {
background-image : url(theme/btn-contact.png);
width : 95px;
font-size : 13px;
text-align : center;
}
#global_corps {
width : 746px;
margin : auto;
float : left;
}
#corps_haut {
background : url(theme/milieu-h.png) no-repeat left;
background-position : bottom left;
height : 21px;
width : 746px;
margin-left : -35px;
}
#corps_milieu {
background : url(theme/milieu-m.png) repeat-y left;
margin-left : -39px;
padding-right : 80px;
padding-left : 35px;
min-height : 500px;
display : block;
overflow: hidden;
}
#contenu {
display : block;
}
#contenu .titre {
background : url(theme/cadre-interieur-titre.png) no-repeat top left;
font-size : 15px;
display : block;
width : 746px;
line-height : 31px;
font-weight : bold;
padding : 0 0 10px 10px;
margin-top : 10px;
margin-bottom : 10px;
float : left;
}
#corps_milieu div:first-letter {
float : left;
font-size : 2.5em;
font-weight : bold;
margin : 7px 2px 0 0;
width : 740px;
}
#conteneur_droite {
float : left;
width : 152px;
margin-left : 870px;
margin-right : 10px;
margin-top : -540px;
}
#menu_droite {
background : url(theme/menu-g-h.png) no-repeat bottom left;
height : 54px;
width : 152px;
}
#menu_droite ol li {
list-style : none;
float : left;
width : 152px;
margin-bottom:10px;
}
#menu_droite ol li a {
height : 36px;
width : 140px;
font-size : 12px;
text-decoration : none;
text-align : center;
display : block;
background : url(theme/actualite-over.png) no-repeat top left;
line-height : 36px;
color : #000000;
margin : 18px 0 -16px -35px;
}
#menu_droite ol li a:hover {
background-position : bottom left;
}
#contenu_droite {
background : url(theme/menu-gauche-milieu.png) repeat-y left bottom;
overflow: hidden;
margin-top:6px;
}
#contenu_droite ul li {
list-style : none;
}
#contenu_droite ul li a {
font-size : 11px;
text-decoration : none;
text-align : center;
line-height : 11px;
margin-left : -15px;
margin-top:-5px;
}
#contenu_droite_bas {
background : url(theme/menu-g-b.png) no-repeat left bottom;
height : 26px;
width : 146px;
}
#corps_bas {
background : url(theme/milieu-b.png) no-repeat;
width : 746px;
height : 54px;
margin : 0 0 0 139px;
padding : 22px 0 0 0;
font-size : 12px;
text-align : center;
line-height : 12px;
float : left;
}

Merci d'avance a tout ceux qui pourront faire quelque chose pour moi !

edit: j'ai reussi a arranger les menu de gauche et droite avec des overflow: hidden; mais pour le menu du haut, je n'y arrive pas.
J'ai mis le CSS du dessus a jour.

Message édité par pampa77 le 15-03-2009 à 11:40:23

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Code :

Nom = navigator.appName;
ns = (Nom == 'Netscape') ? 1:0
ie = (Nom == 'Microsoft Internet Explorer') ? 1:0
m = (Nom == 'Mozilla') ? 1:0
if (ns) {
document.write('<link rel="stylesheet" type="text/css" href="date_m.css">')
}
else if (ie) {
document.write('<link rel="stylesheet" type="text/css" href="date_ie.css">')
}
else if (m) {
document.write('<link rel="stylesheet" type="text/css" href="date_m.css">')
}

Code :

<script type="text/javascript" src="test.js"></script>

HTML.

Refait ton site pour les utilisateurs de IE.

------------------------------ En Restaurant, le coeur de breizh
Répondre à Tybbow

et si la personne a JS désactivé, ça fonctionnera quand même le filtrage ?

On m'a donné ça comme solution :



je l'ai essayé mais ça mets tout en commentaire et donc ça fonctionne pas.

Ou alors c'est mal tapé je ne sais pas.

Message édité par pampa77 le 14-03-2009 à 20:33:50

Répondre à pampa77

edit: j'ai reussi a arranger les menu de gauche et droite avec des overflow: hidden; mais pour le menu du haut, je n'y arrive pas.
J'ai mis le CSS du dessus a jour.

Je cherche donc toujours une solution pour le menu du haut..
Si quelqu'un a une solution, je suis preneur.

Merci d'avance

Répondre à pampa77

comme te la conseiller Tybbow tu devrais refaire les pages CSS pour les utilisateurs de IE en utilisant :



Comme ça ton site marchera très bien sous FF et sous IE sans te casser trop la tête !

Répondre à sebdetroyes

Bonjour,

je pense qu'avant de tenter de corriger l'affichage pour IE , il te faudrait reprendre ta decoupe , du moins valider ta structure html et commencer par positionner chacunes de tes zones correctement .

Ensuite , t'attaquer aux details de ces zones . Tu as du passer un sacré moment a faire ça , malheureusement tes connaissances en mise en formes ne te permettent pas encore de faire une page stable , puis tes images de fond translucide se chevauchent , le résultat n'est pas convaincant .

Personnellement , si je me trouvais dans la situation a devoir reprendre ta page , je repartirais de zero pour avoir quelque chose de plus propre visuellement et plus coherent coté css . Ne cherche pas a corrigé pour IE maintenant , tu risques de perdre de nombreuse autres heures et, peut-etre jeté l'éponge au final .

Si tu veut impérativement codé ta page seul , alors base toi sur un tableau 3 colonnes pour commencé et pouvoir le mettre en ligne dans un délai raissonable. Tu auras ensuite le loisir sans stress d'apprendre et prendre conseil pour effectué ta decoupe sans faire usage de tableaux. les flottants , le layout/contexte de formatages et autres bugs variées sont quasi ingérable pour un débutant . (cependant , 2 mois avec de bon tutos permettent deja une approche plus aisée et ensuite encore quatre mois de recherche , apronfondissement lectures et test te permettront de te sentir a l'aise et mettre ce genre de page en place sans soucis majeures )

Désolé si je ne semble pas trés sympas , mais parti comme c'est , tu vas avoir beaucoup de mal a finalisé

Cordialement

GC

Autrement adresse toi a quelqu'un d'avertit en terme d'intégrations.

------------------------------ etape par etape, observer prendre conseil et apprendre, se tromper, avancer ,etc...
Répondre à gccyrillus

Salut,
Si aucune des solutions ne fonctionne et si ton hébergeur te permet l'utilisation du PHP, tu peux toujours utiliser les fonctions PHP pour détecter le navigateur utilisé par le visiteur et ensuite rediriger vers la bonne feuille de style.
@+

Répondre à the stalker

Bonsoir,

vraiment , il vaudrait mieux d'abord partir sur une basse saine , et ensuite , éventuellement faire des feuilles de styles complémentaire ou correctives pour IE . ... en faisant usage des commentaires conditionnels, qui servent a ça .

Autant faire propre et simple dés le debut , ça ne passe déja pas bien dans Firefox ...

Dernier conseil cordial .

------------------------------ etape par etape, observer prendre conseil et apprendre, se tromper, avancer ,etc...
Répondre à gccyrillus

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > Probleme de difference graphique entre IE et FF.

Aller à :

Aide |
Règles du forum

Il y a 333 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,465 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens