28173 sujets

CSS et mise en forme, CSS3

[Résolu] OverFlow/Disparition de bordure sur des div de largeur x%

Salut,

Bon, j'ai constaté un comprtement étrange des navigateurs (IE et FF). Prenez le code suivant :


<div id="parent" style="width:100%">
  <div style="width:100%;border:solid 1px black">fils</div>
</div>

Sous IE, la bordure droite n'apparait pas, comme si elle passait "sous" l'élément parent. Sous FF, la bordure droite apparait, mais 2px après (normal, 2*1pixel de bordure), une sorte d'overflow. Donc, dans les deux cas, c'est pas beau. Alors forcément, si je règle les diffrentes tailles en pixel, plus de problème, mais là, j'ai besoin de travailler en %.

Des pistes ?

Nota : DTD XHTML 1.0 Transitionnal
Modifié par Zadig (01 Aug 2006 - 10:26)
Bonjour,

Il doit manquer quelque-chose à ton code pour reproduire ce que tu dis avoir observé.

(En flux, les éléments div ont une largeur par défaut de 100%, le code ci-dessus revient en fait à un simple border:solid 1px black)
Effectivement, mon code n'est pas complet. Pour observer le problème, il faut copier coller le code suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page sans titre</title>
</head>
<body>
    <div id="parent" style="width: 50%;height:150px;background-color:Gray">
        <div style="width: 100%; border: solid 1px black">
            fils</div>
    </div>
</body>
</html>


Là, sous FF on voit bien la bordure qui dépasse et sous IE, elle est bien "mangée".
Modifié par Zadig (01 Aug 2006 - 09:43)
Bonjour,

Pas de bordure "mangée" sous IE.

Pour corriger le rendu FF, il suffit le supprimer le width:100% et de laisser le bloc déterminer sa largeur.
Ok, c'est bon, problème résolu. Il faut effectivement laisser le bloc déterminer sa largeur.

Merci

Comment on fait pour faire précéder un post par [Résolu] ?
Bonjour,
Zadig a écrit :

Comment on fait pour faire précéder un post par [Résolu] ?

Tu cliques sur le bouton "éditer" de ton premier message, et tu ajoutes [Résolu] dans le titre Smiley cligne
Sujet clos
Aller à