ZONE CSS
Information accessibilité
Détail du bug css de la css : width
Explication de la gestion des bugs width css
Définition bugs width
Vous trouverez ci-dessous divers bugs d'interprétation de la css width.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart de bugs css "non vérifiés", ils sont soit sur des navigateurs MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui
Bug width n°1
Bug width mis par behess
Système d'exploitation : windows xp
Navigateur : Firefox 1.5.
Bug vérifié : oui
Problème avec width:
Problème de lecture en javascript des valeurs des attributs height et width d'un DIV sur tous les navigateurs.
var test;
test = document.getElementById("test");
alert(""+test.style.width+" / "+test.style.height);
//-> /
</script>
La lecture via le script fonctionne bien si les attributs sont définis dans un attribut style de la balise :
Mais si la déclaration est faite de manière générale (ou dans un fichier séparé) :
#test { width:64px; height:64px; }
</style>
Le script ne fonctionne pas ...
Solution de behess : Utiliser des déclarations locales pour width et height... mais ce n'est pas très pratique.
Autre solution de Dmc :
Si vous voulez récuper les propriétés en pixel, vous pouvez utiliser la propriété javascript :
offsetHeight et offsetWidth qui vous donneront la taille exact du bloc.
Ces dernières peuvent être différentes des tailles spécifiées dans la css si par exemple le contenu est trop grand.
Cependant, il y a toujours ce problème de bordures suivant la DTD (voir border)
var test;
test = document.getElementById("test");
alert( test.offsetWidth+" / "+test.offsetHeight);
//-> 64 / 64
</script>
Navigateur : Firefox 1.5.
Bug vérifié : oui
Problème avec width:
Problème de lecture en javascript des valeurs des attributs height et width d'un DIV sur tous les navigateurs.
Exemple de code :
<script type="text/javascript">var test;
test = document.getElementById("test");
alert(""+test.style.width+" / "+test.style.height);
//-> /
</script>
La lecture via le script fonctionne bien si les attributs sont définis dans un attribut style de la balise :
Exemple de code :
<div id="test" style="width:64px;height:64px;"></div>Mais si la déclaration est faite de manière générale (ou dans un fichier séparé) :
Exemple de code :
<style type="text/css">#test { width:64px; height:64px; }
</style>
Le script ne fonctionne pas ...
Solution du problème par DMC :
Solution de behess : Utiliser des déclarations locales pour width et height... mais ce n'est pas très pratique.
Autre solution de Dmc :
Si vous voulez récuper les propriétés en pixel, vous pouvez utiliser la propriété javascript :
offsetHeight et offsetWidth qui vous donneront la taille exact du bloc.
Ces dernières peuvent être différentes des tailles spécifiées dans la css si par exemple le contenu est trop grand.
Cependant, il y a toujours ce problème de bordures suivant la DTD (voir border)
Exemple de code :
<script type="text/javascript">var test;
test = document.getElementById("test");
alert( test.offsetWidth+" / "+test.offsetHeight);
//-> 64 / 64
</script>
Bug width n°2
Bug width mis par Dmc
Système d'exploitation : windows xp
Navigateur : Internet Explorer 6
Bug vérifié : oui
Problème avec width:
Sous Internet Explorer, lorsque l'on met un width sur un ol ou ul, les puces disparaissent.
Code CSS
width: 300px;
}
Code HTML
<li>Bug sur liste Bug sur liste Bug sur liste Bug sur liste Bug sur liste </li>
<li>Bug sur liste</li>
</ol>
Résultat :
Copie d'écran :
POur régler le propblème vous devez redéfinir les marges gauches de votre liste :
width: 260px;
margin-left:0;
padding-left:40px;
}
Résultat :
Pour plus d'information sur les marges des liste voir la propriété css padding ou la propriété css margin.
Navigateur : Internet Explorer 6
Bug vérifié : oui
Problème avec width:
Sous Internet Explorer, lorsque l'on met un width sur un ol ou ul, les puces disparaissent.
Code CSS
Exemple de code :
.avecwidth{width: 300px;
}
Code HTML
Exemple de code :
<ol class="avecwidth"><li>Bug sur liste Bug sur liste Bug sur liste Bug sur liste Bug sur liste </li>
<li>Bug sur liste</li>
</ol>
Résultat :
- Bug sur liste Bug sur liste Bug sur liste Bug sur liste Bug sur liste
- Bug sur liste
Copie d'écran :
Solution du problème par DMC :
POur régler le propblème vous devez redéfinir les marges gauches de votre liste :
Exemple de code :
.avecwidth{width: 260px;
margin-left:0;
padding-left:40px;
}
Résultat :
- Bug sur liste Bug sur liste Bug sur liste Bug sur liste Bug sur liste
- Bug sur liste
Pour plus d'information sur les marges des liste voir la propriété css padding ou la propriété css margin.