Compatibilité IE & FF

**lieto** · 19/06/2006, 09h50

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

**kahya** · 19/06/2006, 09h58

ç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 =)

**<romain/>** · 19/06/2006, 09h59

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...

**IdF-Socrateus** · 19/06/2006, 10h19

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 !

**lieto** · 19/06/2006, 10h56

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

le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lieto** · 19/06/2006, 12h24

...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?

**IdF-Socrateus** · 19/06/2006, 13h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<!--[if IE]>
<style>
(corrections pour IE)
</style>
<![endif]-->

- 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

Compatibilité IE & FF

HTML

Vue hybride

Discussions similaires

Partager

Partager