PB de hauteur d'une liste UL conttenant LI en float

Bonjour,

J'ai un liste simple :
<ul id="alphabet">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li class="last">G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li class="last">N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li class="last">U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>

et le CSS qui va avec :

ul#alphabet
{
border:0;
list-style-type: none;
margin:0;
padding:2px;
padding-right:0;
padding-bottom:0;
width: 168px;
border:1px solid #E4D3A9;
margin-top:5px;
height:1%;
display:block;
}

ul#alphabet li
{
float: left;
width: 18px;
line-height: 18px;
padding:1px;
margin-right:2px;
margin-bottom:2px;
border:1px solid #E4D3A9;
text-align:center;
color: #000000;
}

ul#alphabet li.last
{
margin-right:0;
}

Sous IE, j'ai bien le résultat attendu.
Sous Firefox, Opera, NS7 par contre, la bordure du conteneur (UL) ne s'adapte pas au contenu en hauteur !

Un image vaut mieux que de longues explications :



J'ai tout essayé mais sans succès...
Je suis souvent confronté à ce problème alors j'ai hâte de connaitre la solution !

Merci à tous pour votre aide !

PS : si vous avez une solution plus "light" pour ce genre de liste (je pense à la classe "last" ...) je suis preneur aussi

Re merci

Hello frederes et bienvenue ici

Attention à ne pas te précipiter et de prendre le temps de lire les premières étapes et règles du forum.
Tu as un lien important à suivre dans le bandeau "Nouveau sur le forum ?".
Il t'indique notamment les règles à suivre, dont celle que tu n'as pas appliquée : afficher correctement les codes dans les messages.

Merci de bien vouloir modifier ton premier messsage et d'appliquer cette consigne.

Pour répondre à ta question, c'est le comportement normal des éléments flottants, ils sortent de leur conteneur.
C'est IE qui ne l'interprête pas correctement et allonge le conteneur.

La réponse se trouve, comme souvent, dans la première ressource à suivre, la FAQ :
http://forum.alsacreations.com/faq/#item6
Modifié par Raphael (04 Nov 2005 - 12:25)

Bonjour,

Plutôt qu'une question de style, se poser la question de la structure choisie.

Cette interminable liste non ordonnée donnera un résultat à l'ergonomie médiocre sans support CSS. Un tableau HTML sera déjà nettement plus agréable.