Compatibilité IE & FF

Version imprimable

19/06/2006, 09h50
lieto

Compatibilité IE & FF

Bonjour
Je suis complétement néophite en css sous ff.
J'ai développé une appli web, dont le rendu sous IE est exactement ce que je veux. Cependant, sous FF, ça donne absolument n'importe quoi (mais span, aligné horizontalement sous ie, sous ici les uns sous les autres, pas alignés du tout...).
Comment est ce que je peux faire pour me retrouver avec un rendu correct sous les 2 navigateurs?

Merci d'avance
19/06/2006, 09h58
kahya

ça dépends des options qui clochent, donne nous ton code, et un exemple visuel si possible ou au moins une description précise de ce qui ne va pas =)
19/06/2006, 09h59
<romain/>

hum il ya beaucoup de probleme de comptabilite avec les deux, ca viens du fait que IE ne gere pas bien les standards.

Montre nous ton code xhtml et ton css, on devrait pouvoir t'aider.

Mais a l'avenir fait ton site pour firefox et fait les arrangements pour IE... Car firefox gere les standards de facon correct...;)
19/06/2006, 10h19
IdF-Socrateus

d'accord avec <romain/>, garde ta mise en page, IE, et utilise un include conditionnel du CSS pour IE (voir ce topic : http://www.developpez.net/forums/sho...d.php?t=165168).
Puis tu fais une version FF conforme aux standards.
Ca fait un peu plus de boulot, mais t'auras pas à le refaire... parceque si tu t'essaies à une compatibilité parfaite entre FF et IE, tu vas vraiment galérer !
Bon courage !

2 pièce(s) jointe(s)

ok, je vais voir pour le css conditionnel. En attendant, voila mon code

le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
body
{
	overflow:hidden;
	height:100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
}
 
 
.dragDrop 
{	
	position:absolute;
	left:216px;
	font-family:Arial;	
	font-size:10pt; 
	font-weight:bold; 
	cursor:hand;
	height:26px;
	margin: 0px;
	padding: 0px;
	border: none;
	text-align: center;
 
 
} 
#background1
{
	vertical-align:middle;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
	background-color:#DEF1F5;
	height:26px;
	width:56px;
 
}
 
.icones
{	
	border:0px;
	margin:0px;
	vertical-align:middle;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
	height:26px;
	width:56px;
	background-color:#DEF1F5;
 
}
 
.image
{
	border:0px;
	margin:0px;
	height:26px;
	vertical-align:middle;
	background-image:url(float/bouton1bis.gif;
 
 
}
 
.barre1
{
	background-image:url(float/geomap.gif);
	background-repeat:no-repeat;		
 
}
 
bouton_fin
{
 
}
 
a.onrollover img{ opacity:0.6; filter:alpha(opacity=100);} 
a.onrollover:hover img{ opacity:1; filter:alpha(opacity=100);} 
 
a.onrollover img{ -moz-opacity:1;} 
a.onrollover:hover img{ -moz-opacity:1;}

et le html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <body onload="load()"> 
        <span id ="Toolbar1" class="dragDrop" style="top:47px; z-index:1"> 
            <span class="barre1">
                <img id ="image_icone_1" src="float/geomap_gauche.gif" alt="curseur de déplacement" style="vertical-align:middle"/>
            </span>
            <span id="background1" style="position:relative">
                <table>
                    <tr>
                        <td width="26" height="26"><img src="float/case_vide.gif" alt="bouton vide" /></td>
                        <td width="26" height="26"><img src="float/case_vide.gif" alt="bouton vide" /></td>
                    </tr>
                </table>
            </span>
            <span style="position:relative; right:60px; top:11px"><img src="float/adduser2.gif"alt="ajout d'users"/></span>
            <span style="position:relative; right:65px; top:11px"><img src="float/filter.gif"alt="ajout de filtres"/></span>      
            <span id="barre1_fin" class="bouton_fin" style="position:relative; right:72px ">
                <img src="float/geomap_droit.gif" alt="curseur de fermeture" style="vertical-align:middle" onclick="onoffdisplay(background1,barre1_fin);"/>
            </span>
        </span> 
        <iframe id="ifrMap" width="100%" height="100%" src="http://flieto/mapguide/mapviewerajax/?WEBLAYOUT=Library://Samples/Sheboygan/Layouts/SheboyganPhp.WebLayout" name="ViewerFrame" border="0">
        </iframe>
    </body>

19/06/2006, 12h24
lieto

...bon, ok, le problème venait de l'utilisation des position:relative.
Ma "hierarchie" vient de me dire que l'emploi d'absolute ne pose pas de problème, donc, c'est déjà ça de régler.
Malgré tout, j'ai tout de même de léger décalages, horizontalement ou verticalement. Quelqu'un peut m'expliquer pourquoi, et comment y remédier?
19/06/2006, 13h20
IdF-Socrateus
IE et FF ne gèrent pas pareil l'affichage avec css, et en particulier la prise en compte ou pas des marges et autres border dans la dimension totale du bloc.
- Soit tu peux essayer de régler ça en ajoutant
html {margin:0; border:0; padding:0;}
- soit tu fais 2 css, un général, et un qui corrige les bugs d'IE (c'est là qu'il te faut un
Code:

1 2 3 4 5 6 
- placé après le style normal),
- soit tu fais une recherche sur les 'hack' pour IE, mais ça va être la joie si quelqu'un doit changer les feuilles de style après toi :mouarf:

...pour la solution2, ce que tu me dis de faire, ca donnerait:

Code:

1
2
3
4
5
6
7
8
9
 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" title="mainstyle">
        <!--[if IE]>
            <style> ...........
            </style>
        <![endif]-->
    </head>

C est ça?

19/06/2006, 15h17
IdF-Socrateus

exactement ! comme tu modifie certains paramètres, mais juste pour IE.
19/06/2006, 15h19
lieto

....ok mais la, mon boss me tape sur l'épaule en me disant "oui, mais faudrait qu'on puisse modifier la présentation sans avoir a changer la moindre ligne de code du fichier htm"... c est faisable? autrement dit, peut on transférer les modifications exclusive pour IE dans le fichier CSS?

déjà tu peux faire ça :
Code:

1 2 3 4 5 6 7 8 <div style="text-align: left;"><html> <head> <link rel="stylesheet" type="text/css" href="styles.css" title="mainstyle">  </head></div>
ensuite je crois que  fonctionne aussi dans le css, à tester.

si ça marche pas, dis-moi, y'a un autre petit hack à utiliser, mais c'est moins 'propre'...

19/06/2006, 15h25
lieto

ok, je regarde ça