compabilité IE - Mozilla

**sfc2000** · 04/07/2008, 08h58

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

**E.Bzz** · 04/07/2008, 09h29

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+

**sfc2000** · 04/07/2008, 09h55

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

**Thes32** · 04/07/2008, 10h16

salut,
ça pourrait provenir du padding par défaut de IE, vérifie dans ton css que ton padding est à zero.

**le_chomeur** · 04/07/2008, 10h22

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%;

**sfc2000** · 04/07/2008, 15h55

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

**le_chomeur** · 04/07/2008, 16h00

tu n'as pas mis de taille !

Code :

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

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

**E.Bzz** · 04/07/2008, 16h03

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

**le_chomeur** · 04/07/2008, 16h08

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 :

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