[IE] UL + border-bottom et LI + padding
bonjour, voici un tout petit bout de code qui montre une solution qui fonctionne mais dont je voudrais supprimer le hack IE (* html) si possible...
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
|
<html>
<head>
<style type="text/css">
ul {
font-family: Verdana;
font-size: 11px;
position: relative;
list-style-type : none;
border-bottom: 1px solid gray;
height: 22px;
}
* html ul { /* IE */
border: none;
background: url('gray1x1.gif') repeat-x bottom;
}
ul li {
float: left;
margin-left: 4px;
}
ul li a {
float: left;
border: solid 1px gray;
background-color: silver;
padding: 4px;
text-decoration: none;
}
ul li a.active {
background-color: white;
border-bottom-color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active">actif</a></li>
<li><a href="#">inactif</a></li>
</ul>
</body>
</html> |
le problème est que sous IE, quel que soit la taille que je donne au UL, le border-bottom se trouve toujour en dessous des LI+A, alors que sous FF, Opera, Chrome, le border est bel et bien au même niveau que les border des LI+A.
Le hack consiste à placer un pixel gris répété horizontalement en bas du UL, il est donc bien à l'intérieur du UL, sous les LI+A.
Je pourrais évidemment utiliser ce pixel dans tous les navigateurs pour avoir le même code qui fonctionne chez tout le monde, mais la propriété Border est là pour ça, donc intellectuellement ça me gène :)
d'ailleurs si je vire le hack et utilise le pixel, il faut bel et bien augmenter la taille de l'UL à 23px pour que l'image soit bien positionnée à la fois sous IE et FF, en fait IE applique une taille de 23px dès qu'on défini height, même à 0px !!!
Merci
EDIT: petite précision, le pb est corrigé sous IE7+ en ajoutant un DOCTYPE strict...reste IE6 :)
