Incompatibilité sous IE [Résolu]

[Julianinho]

Bonjour,

J'ai un petit souci avec un site que je suis en train de créer. Jusqu'à présent les sites que j'ai réalisé avaient exactement la même présentation sous Mozilla que sous IE mais pas cette fois.

Voilà ce que mon menu donne sous Mozilla : [IMG=http://img66.xooimage.com/files/b/8/d/capture-mozilla-2e3b7d8.jpg][/IMG]
Et sous IE : [IMG=http://img67.xooimage.com/files/d/2/c/capture-ie-2e3b7f6.jpg][/IMG]

Le texte était peut-être un tout petit peu haut sous Mozilla mais alors sous IE c'est pire.

Je pense que cela a un rapport avec les hack css mais comme je débute avec ces derniers, je préfère demander conseil. De plus, j'ai déjà essayé avec quelques conseils en CSS trouvés sur internet mais ça change rien.

Voilà le code html du menu :

Code :

1
2
3
4
5
6
7
8
9
10
<div id="top-menu">
	<dl>
		<dd><a href="index.html" title="accueil" id="on">Accueil</a></dd>
		<dd><a href="concept.html" title="concept">Concept</a></dd>
		<dd><a href="solutions.html" title="solutions">Solutions</a></dd>
		<dd><a href="avantages.html" title="avantages">Avantages</a></dd>
		<dd><a href="tarifs.html" title="tarifs">Tarifs</a></dd>
		<dd><a href="contact.html" title="contact">Contact</a></dd>
	</dl>
</div>

Et 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
/* Lien pour MENU DES ONGLETS */
#top-menu {
margin-left:380px;
width: 764px;
height: 35px;
text-align: center;
}
#top-menu dl {
width: 896px;
margin: 0;
}
#top-menu dd {
width: 136px;
height: 35px;
font-family: Gabriola; 
text-align: center;
background-image: url("../images/off.jpg");
background-repeat: no-repeat;
background-position: left top;
display: inline;
float: left;
margin: 0;
}
#top-menu a:link, #top-menu a:visited {
width: 136px;
height: 35px;
display: block;
color: #3d3d3d;
font-weight: bold;
background-color: transparent;
text-decoration: none;
}
#top-menu a:active, #top-menu a:hover, #top-menu #on {
width: 136px;
height: 35px;
display: block;
color: white;
text-decoration: none;
background-image: url("../images/on.jpg");
background-repeat: no-repeat;
background-position: left top;
}

Merci d'avance

[oceane751]

as tu testé les hack conditionnels?

[miss_socrates]

J'ai testé sous IE 9 et à part la largeur des images, je n'ai pas vu de différence.
Peut-être que le problème se retrouve avec d'autres versions d'IE...

[Julianinho]

Bonjour,

Concernant IE9 c'est justement avec cette version que j'ai testé et ça donne la deuxième capture de mon premier post : les noms des onglets sont décalés.

Je veux bien essayer avec les hack conditionnels mais je suis un peu perdu, si quelqu’un peut m'aider.

[Julianinho]

Bonsoir,

Finalement j'ai trouvé la solution, j'ai changé la police dans mon css et ça marche.