Menu CSS avec bordures - fonctionne firefox, pas ie [Sources]

**Romalafrite** · 21/11/2004, 02h09

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 html :

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

**Swoög** · 21/11/2004, 12h17

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

**Swoög** · 21/11/2004, 13h23

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

:

Code html :

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

**Romalafrite** · 21/11/2004, 14h21

génial swoog, merci pour tout

Code :

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

1
2
3
4
<html>
<head>(... [edit : inutile] ...)
</body>
</html>

**Swoög** · 21/11/2004, 14h24

Hep, psssssssst : j'ai mis le même au-dessus

**Romalafrite** · 21/11/2004, 15h40

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

Menu CSS avec bordures - fonctionne firefox, pas ie [Sources]

CSS

Discussions similaires

Partager

Partager