28217 sujets

CSS et mise en forme, CSS3

[resolu] Border-collapse sur des <a> qui ne prend plus effet...

Salut à tous,

pour faire les partie administrateurs de site, je réutilise toujours le meme menu, son habillage est tout en CS, aucunes images.
Les liens ont une couleur de fond et une bordure, ils sont collés, aussi je demande à ceux ci que leurs border collapsent.

Et , régulièrement je perd cet effet sans comprendre pourquoi.

Là c'est sur IE que j'ai perdu le border-collaspe de mes <A> du menu central du haut, sous Firefox ça fonctionne (enfin, ils collapsent pas sur leurs bords hauts et bas pour les sous menu, alors qu'a l'origine ça la fait...)

Quelqu'un sait ce que je fait mal ?

J'ai reconstitué rapidemment la page en question :

Page de tests

Merci. Smiley smile
Modifié par Hum (31 May 2007 - 20:03)
Bonjour,

De mémoire cette propriété ne s'applique t'elle pas aux cellules d'un tableau ?
Pourquoi ne pas utiliser border-botton: 0; etc ?
Bonjour,

border-collapse n'ayant en effet aucun rôle en dehors du modèle de rendu "tableau", la question est plutôt: mais pourquoi diable certaines combinaisons de largeur des liens et des <li> provoquent-ils le rognage d'une des bordures latérales des liens dans FF, Opera, etc ? Smiley ravi

<edit>
Une version simplifiée du code, pour les curieux prêts à se creuser la tête:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
   
li {
list-style-type: none;
width: 240px;
float: left;
}
a {
width: 239px;  
display: block;
border: 1px solid;
}

-->
</style>
</head>
<body>
<ul>
   <li><a href="#">lorem</a></li>
   <li><a href="#">lorem</a></li>
   <li><a href="#">lorem</a></li>
</ul>
</body>
</html>


</>
Modifié par Laurent Denis (29 Jan 2007 - 15:55)
Oui, mais non :

240 + 2 * 1 > 240 aussi. Mais avec un résultat tout à fait différent Smiley ravi

En fait, il est très amusant de faire varier la largeur des liens dans cet exemple...

Allez... Il y a un mot magique, pour expliquer le tout . Mais lequel ? Smiley cligne
Modifié par Laurent Denis (29 Jan 2007 - 17:34)
a écrit :
Allez... Il y a un mot magique, pour expliquer le tout . Mais lequel ?


Padding ?
perdu...

ça commence par un "o...", et ça a des relents de Screamin' Jay Hawkins (enfin, je trouve) Smiley cligne
Modifié par Laurent Denis (29 Jan 2007 - 19:26)
Laurent Denis a écrit :
perdu...

ça commence par un "o...", et ça a des relents de Screamin' Jay Hawkins (enfin, je trouve) Smiley cligne
Ca finit par un w ? Smiley smile
Voui.

Les <li> en float sont doté d'une largeur explicite en pixel.

Les <a> sont donc soumis à l'overflow:visible par défaut.

Quand le <a> dimensionné plus ses deux pixels de bordure dépassent de la largeur du <li> d'un seul pixel, le contenu du <a> déborde... mais le pixel en trop se trouve affiché sous la bordure droite du <li>, et ne se voit pas. D'où l'impression qu'il y a un "border-collapse".

Dans IE, en revanche, le width des <li> est interprété comme un min-width... Chaque <a> élargit donc le <li> pour pouvoir s'afficher avec ses 2 bordures latérales. La technique est inapplicable dans ce navigateur sous cette forme Smiley cligne
Modifié par Laurent Denis (29 Jan 2007 - 20:04)
Merci Laurent,

j'ai pourtant des cas de pages avec le meme genre de code où j'ai eu mes "bordures simples" sous IE...

Je vais donc chercher une de ces pages demain pour regarder, et je la posterai.



Smiley smile
Modifié par Hum (29 Jan 2007 - 20:12)
Sujet clos
Aller à