Bonjour, j ai souci avec les liens images, je souhaite faire un menu horizontale de type graphique (genre boutons ou icônes). J arrive a le faire et le résultat sous firefox est correct, cependant avec IE7 il y a une petite différence, les images de liens ne sont pas alignées avec les les images fixe. il apparait un léger décalage verticale vers le bas. je suppose qu il doit y avoir un moyen d empêcher IE7 de générer cette mise en forme mais je ne la trouve pas.

Histoire de vous fixer sur le problème je vous passe le code dans lequel j utilise une image fixe quelconque, et une image servant de lien. Donc vous pourrez facilement mettre une image de votre choix a leurs place, peu importe le contenu, il apparait un recalage sur IE7 et pas sur firefox.

Code xhtml : 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
 
<!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">
<!--
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #333333;
        margin: 0; 
        padding: 0;
        text-align: center;
        color: #ffffff;
}
.oneColFixCtr #container {
        width: 1024px; 
        background: #000000;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left; 
}
a#img1:link {
        text-decoration:none;
        background-image: url(ressources/boutonlien.png);
        display: inline-block;
        height: 30px;
        width: 100px;
        background-position: top;
}
a#img1:visited {
        text-decoration:none;
        background-image: url(ressources/boutonlien.png);
        display: inline-block;
        height: 30px;
        width: 100px;
}
-->
</style></head>
 
<body class="oneColFixCtr">
<div id="container">
    <h1> menu </h1>
	  <img src="ressources/barre.png" width="100" height="30" /><a href="http://www.google.fr" id=img1></a><img src="ressources/barre.png" width="100" height="30" /><a href="http://www.google.fr" id=img1></a><img src="ressources/barre.png" width="100" height="30" />
 
    <h1> Contenu principal </h1>
    <p>bla bla bla.</p>
</div>
</body>
</html>
Bien sur c est pas du meilleur gout mais j ai fait au plus simple.Donc si quelqu'un un a une idée et je suis sur que ca ne tiens pas a grand chose, merci de m informer