Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[CSS] Bug dans Mozilla ?

5 réponses
Avatar
David
J'aimerai réaliser une page de ce genre :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>TEST</title>
<style type="text/css">
a {
color: red;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: green;
text-decoration: underline;
}
#gauche {
border: 1px dashed silver;
padding: 20px;
float: left;
}
#droite {
border: 1px dashed silver;
padding: 20px;
float: right;
}
#centre {
margin: auto;
display: table;
}
</style>
</head>
<body>
<div id="centre">
<div id="gauche">
...contenu de gauche...<br />
<a href="unepage.htm">lien de gauche</a>
</div>
<div id="droite">
...contenu de droite...<br />
<a href="uneautrepage.htm">lien de droite</a>
</div>
</div>
</body>
</html>


La feuille de style indique bien que lorsqu'on place le pointeur sur
un lien, celui-ci doit apparaître en vert et souligné. Or, avec
Mozilla il ne se passe rien ! ça marche pourtant très bien avec Opéra.

Si on enlève que les float, ça marche; si on enlève que le
display:table, ça marche aussi; et si on enlève que le margin:auto ça
marche encore. Donc, le problème vient apparemment de la combinaison
de ces trois propriétés.

Autre problème : lorsqu'on augmente ou diminue la taille de la police
par le navigateur, les deux boîtes se retrouvent l'une au dessus de
l'autre !

La page est pourtant bien valide XHTML 1.0 Strict et CSS2. Alors
est-ce un point du standard CSS qui m'a échappé ou un bug de Mozilla ?


David

5 réponses

Avatar
loufoque
Message d'origine de David :

Tu connais la largeur des éléments flottants ?




Non, et c'est bien pour ça que je souhaite utiliser display:table, car
j'utilise une même feuille de style pour différentes pages formées
selon le même modèle du test, et dont le contenu des éléments
flottants (donc la largeur du #centre) varie pour chaque page. Il faut
donc que la largeur de #centre s'adapte automatiquement en fonction de
son contenu et non pas qu'elle soit fixée par un width (que ce soit en
pourcentage ou en pixels), tout en faisant en sorte que le #centre
reste toujours centré horizontalement (d'où margin:auto nécessaire).



Et si tu fais display: inline sur les éléments concernés plutôt que de
les "floater" ?
Avatar
loufoque
Message d'origine de David :

J'AI TROUVÉ ! :-)

Il suffit de rajouter un div dans #centre, qui ne sert à rien, mais
qui annule le bug !
Bon évidemment, il reste le cas IE, qui ne reconnaît pas le
display:table :-(




En même temps c'est normal, un tableau est structuré ainsi
<table>
<tr>
<td>cellule</td>
<td>cellule</td>
</tr>
</table>

Donc si tu veux utiliser display: table, il faut avoir la même structure.
Enfin bon, l'utilisation de ces propriétés est totalement stupide, ça
revient à utiliser des tableaux pour le design...
Avatar
loufoque
Message d'origine de David :

Tu connais la largeur des éléments flottants ?




Non, et c'est bien pour ça que je souhaite utiliser display:table, car
j'utilise une même feuille de style pour différentes pages formées
selon le même modèle du test, et dont le contenu des éléments
flottants (donc la largeur du #centre) varie pour chaque page. Il faut
donc que la largeur de #centre s'adapte automatiquement en fonction de
son contenu et non pas qu'elle soit fixée par un width (que ce soit en
pourcentage ou en pixels), tout en faisant en sorte que le #centre
reste toujours centré horizontalement (d'où margin:auto nécessaire).




Suis-je bête. C'est très simple...
Tu mets #gauche en float: left, et #droite aussi...
Et le tour est joué.
Avatar
Pascal Chevrel
Le 08/01/2004 13:45, loufoque a écrit :

Message d'origine de David :

J'AI TROUVÉ ! :-)

Il suffit de rajouter un div dans #centre, qui ne sert à rien, mais
qui annule le bug !
Bon évidemment, il reste le cas IE, qui ne reconnaît pas le
display:table :-(




En même temps c'est normal, un tableau est structuré ainsi
<table>
<tr>
<td>cellule</td>
<td>cellule</td>
</tr>
</table>

Donc si tu veux utiliser display: table, il faut avoir la même structure.
Enfin bon, l'utilisation de ces propriétés est totalement stupide, ça
revient à utiliser des tableaux pour le design...



C'est vrai, on devrait même supprimer display:block et display/inline,
et puis tous les CSS en fait...

Pascal

--
Pascal Chevrel - Mozilla Champion
FAQ Mozilla/Netscape 7 en français : http://pascal.chevrel.free.fr/
Foros Mozilla en español : http://www.chevrel.org/es/foros/
Avatar
Pierre GOIFFON
Olivier Miakinen wrote:
Les CSS peuvent servir pour une restitution sonore dans un navigateur
vocal par exemple. Ce n'est clairement pas de l'affichage.



J'était passé trop vite fait sur la restitution sonore ! Daniel, merci de la
correction, et Pascal et Olivier des détails !

--
Pour me répondre par mail privé, merci de supprimer _NOSPAM_ de mon
adresse.

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php