compabilité IE - Mozilla

Version imprimable

04/07/2008, 08h58
sfc2000

compabilité IE - Mozilla

Bonjour,
J ai un petit souci dans mon menu :http://www.geneveroule.ch en fait sur IE le fond (gris) du sous menu ne rempli pas totalement la case tans dis que sur mozilla il le fait correctement.

Auriez vous une idée pour rendre mon code compatible au 2 navigateurs?

Merci d avance

Salutations
04/07/2008, 09h29
E.Bzz

Bonjour,
ça dépend de l'objet auquel tu appliques le background ...
Sur les <A href>, on dirait (pas le temps de vérifier dans le .css) => essaye sur les <li> ...

A+
04/07/2008, 09h55
sfc2000

Citation:

Envoyé par E.Bzz

Bonjour,
ça dépend de l'objet auquel tu appliques le background ...
Sur les <A href>, on dirait (pas le temps de vérifier dans le .css) => essaye sur les <li> ...

A+

C'est un fond appliquer par la css.
Je crois avoir déjà essayé le <li> mais je vais m assurer de ca.
Merci
04/07/2008, 10h16
Thes32

salut,
ça pourrait provenir du padding par défaut de IE, vérifie dans ton css que ton padding est à zero.
04/07/2008, 10h22
le_chomeur

essaye de mettre le style display:block et une taille définit fixe ou un conteneur d'une taille fixe et tes liens en width:100%; ;)
04/07/2008, 15h55
sfc2000

Ben ca marche pas non plus je vais continuer a me creuser la tête et si vous avez une autre idée...

En tous cas merci déjà pour votre aide

tu n'as pas mis de taille !

Code:

1
2
3
4
5
6
7
8
9
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}

définit une taille ( 100% ) ...

04/07/2008, 16h03
E.Bzz

Citation:

Envoyé par le_chomeur

définit une taille ( 100% ) ...

Le problème du padding (géré différemment sous IE et FF) risque de persister ...

non car le padding s'ajoutera a la taille de 100% , et le padding , agrandit l'élément , et d'expérience , cela ne posera aucun problème :)

meilleur solution après avoir vu son code source :

- définir une taille FIXE pour les sous menu
- définir les lien ( balise A ) en display:block ET leur assigner une taille width:

voila voila

un exemple :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
	ul{
		list-style:none;
		padding:0px;
		margin:0px;
	}
	ul li{
		position:relative;
		width:200px;
	}
 
	.fonctionne{
		background-color:#00CC66;
	}
	.fonctionnepas{
		background-color:#990033;
	}
 
	.fonctionne ul li{width:200px;}
 
	.fonctionne ul li a{
		display:block;
		background-color:#FFFF00;
		width:100%;
	}
 
	.fonctionne ul{
		display:none;
		position:absolute;
		left:200px;
		top:0px;
		background-color:#00CCFF;
	}
 
 
 
	.fonctionnepas ul{
		display:none;
		position:absolute;
		left:200px;
		top:0px;
		background-color:#00CCFF;
	}
 
	.fonctionnepas ul li a{
		background-color:#FFFF00;
	}
 
	.fonctionne:hover ul{
		display:block;
	}
	.fonctionnepas:hover ul{
		display:block;
	}
</style>
</head>
 
<body>
<ul>
<li class="fonctionne">
	Fonctionne
	<ul>
    	<li><a href="#" style="padding:5px">avec padding</a></li>
        <li><a href="#">sans padding</a></li>
    </ul>
</li>
<li class="fonctionnepas">
Fonctionne pas
	<ul>
    	<li><a href="#" style="padding:5px">avec padding</a></li>
        <li><a href="#">sans padding</a></li>
    </ul>
</li>
</ul>
</body>
</html>

ps : j'ai remplacer le javascript par du CSS donc a tester sous IE7 t FF :)

04/07/2008, 16h31
E.Bzz

Si tu le dis :king:

A+
07/07/2008, 10h23
sfc2000

Un grand merci pour votre aide je vais pouvoir mettre "résolu"
Merci