Menu CSS avec bordures - fonctionne firefox, pas ie

Version imprimable

Salut à tous, je suis en train de tester un système de menus... ça marche parfaitement sous firefox mais pas sous ie... si vous avez des modifications à apporter pour que ça marche...

voici le code intégral (copier coller ;))

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
<html>
<head>
<style type="text/css">
body {
        font-family: , verdana, sans-serif;
}
.haut {
        position: relative;
        padding-bottom: 4px;
        border-style: solid;
        border-color: #CCCCCC;
        border-width: 1 1 6px 1;
        z-index:1;
}
.logo {
        position: relative;
        font-size: 16pt;
        margin-right: 20px;
        font-weight: bold;
        z-index:2;
}
.item1 {
        position: relative;
        font-size: 8pt;
        padding-bottom: 4px;
        font-variant: small-caps;
        margin-left: 10px;
        z-index:2;
}
.item2 {
        position: relative;
        padding-bottom: 5px;
        font-size: 8pt;
        font-variant: small-caps;
        margin-left: 10px;
        border-style: solid;
        border-color: red;
        border-width: 0 0 6px 0;
        z-index: 3;
}
a.menu, a.menu:visited {
        color: black;
        text-decoration: none;
}
a.menu#on {
        color: red;
}
a.menu:hover, a.menu#on:hover, a.menu:visited:hover, a.menu#on:visited:hover {
        text-decoration: none;
        color: orange;
        padding-bottom: 5px;
        border-style: solid;
        border-color: orange;
        border-width: 0 0 6px 0;
}
</style>
</head>
<body>
<span class="haut">
<span class="logo"><font color="black">ANDORRA</font><font color="orange">PRO</font></span>
<span class="menu_h">
	<span class="item2"><a href="" class="menu" id="on">accueil</a></span>
	<span class="item1"><a href="" class="menu">offres d'emploi</a></span>
	<span class="item1"><a href="" class="menu">demandes d'emploi</a></span>
	<span class="item1"><a href="" class="menu">inscription</a></span>
</span>
</span>
</body>
</html>

21/11/2004, 12h17
Swoög

Salut !

En fait, je pense que IE a du mal avec les supperpositions de bordure, j'ai eu le même problème sur un de mes sites, où j'ai du jouer sur le padding pour décaler un div en float, sinon il me bouffait une partie de la bordure sous IE :( (le footer gauche de http://www.GLYS.fr.st )

ce que je pourrais te proposer serait d'appliquer le style "rouge" (actif) sur le lien (comme tu le fait pour le style "orange" au hover), ainsi, le :hover surpassera le style normal, et il ne devrait alors plus y a avoir de problèmes...

Bonne Continuation,
Swoög

J'ai trouvé un moyen d'avoir exactement le même rendu sous IE et sous FF :D :

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
<html>
<head>
<style type="text/css">
body {
   font-family: , verdana, sans-serif;
}
.haut {
   float: left;
   position: relative;
   padding-bottom: 4px;
   border-style: solid;
   border-color: #CCCCCC;
   border-width: 1 1 6px 1;
   z-index:1;
}
.logo {
   position: relative;
   font-size: 16pt;
   margin-right: 20px;
   font-weight: bold;
   z-index:2;
}
.item1 {
   position: relative;
   font-size: 8pt;
   padding-bottom: 4px;
   font-variant: small-caps;
   margin-left: 10px;
   z-index:2;
}
a.menu, a.menu:visited {
   color: black;
   text-decoration: none;
}
a.menu#on {
   padding-bottom: 5px;
   color: red;
   border-style: solid;
   border-color: red;
   border-width: 0 0 6px 0;
}
a.menu:hover, a.menu#on:hover, a.menu:visited:hover, a.menu#on:visited:hover {
   text-decoration: none;
   color: orange;
   padding-bottom: 5px;
   border-style: solid;
   border-color: orange;
   border-width: 0 0 6px 0;
}
</style>
</head>
<body>
<span class="haut">
<span class="logo"><font color="black">ANDORRA</font><font color="orange">PRO</font></span>
<span class="menu_h">
   <span class="item1"><a href="" class="menu" id="on">accueil</a></span>
   <span class="item1"><a href="" class="menu">offres d'emploi</a></span>
   <span class="item1"><a href="" class="menu">demandes d'emploi</a></span>
   <span class="item1"><a href="" class="menu">inscription</a></span>
</span>
</span>
</body>
</html>

et c'est le bon, me demande pas pourquoi, ni comment, mais ça marche !
Je peux même te certifier que ça fonctionne sous Opera, elle est pas belle la vie !?

21/11/2004, 14h21
Romalafrite
génial swoog, merci pour tout
Code:

1 2 3 4 <html> <head>(... [edit : inutile] ...) </body> </html>
21/11/2004, 14h24
Swoög

Hep, psssssssst : j'ai mis le même au-dessus :D ;)
21/11/2004, 15h40
Romalafrite

lol, j'avais pas réactualisé...