Pas très compliqué, mais il fallait le trouver !
html{
overflow-y: scroll;
}
Ce Css n’est pas valide, mais il fonctionne sur tous les navigateurs sauf Opera. Ceci est utile pour préserver la largeur quelque soit l’écran (débordant verticalement ou pas), et donc, par exemple, pour centrer le bloc principal sur la totalité du site.
Leave a Comment » | 
css | 
Permalien
Publié par cweben
En mettant à jour, une page html concernant l’instinct de mort de Jacques Mesrines, j’ai un peu galéré aujourd’hui autour du simple centrage d’un élément sur une page sous IE 6 :
Le problème est assez simple, je souhaitais centrer un div. La technique officielle consiste à utiliser la propriété « margin » en « auto » à gauche et à droite, et à définir la largeur (« width ») de manière fixe : Ce qui veut dire que les marges à gauche et à droite seront calculées en fonction de l’élément central.
<style type="text/css"> <!-- centrer{ margin-left : auto; margin-right : auto; width : 760px; } --> </style> <body> <div class="centrer">élément centré</div> </body>
En utilisant les raccourcis css, on peut déclarer « margin : 0 auto; » ce qui signifie que les marges hautes et basses seront nulles, et que les marges gauches et droites seront calculées automatiquement.
<body>
<div style="margin : 0 auto; width : 760px;">élément</div>
</body>
Oui, mais voilà, ca ne fonctionne pas sous Internet Explorer 6. Il faut centrer l’élément avec la propriété text-align au niveau supérieur :
<body style="text-align:center;">
<div>élément</div>
</body>
Pour que l’élément fonctionne sur tous les navigateurs :
<body style= »text-align:center; »>
<div style= »margin : 0 auto; width : 760px; »>élément</div>
</body>
Si l’on rajoute cette difficulté au problème du float internet explorer, ca commence à faire beaucoup pour un navigateur !
Leave a Comment » | css, html | Permalien
Publié par cweben
Cette page est librement inspirée de la page « The IE Doubled Float-Margin Bug » du site anglais positioniseverything.net.
Il existe un bug css sous Internet Explorer qui peut vous causer quelques ennuis.
Ce bug concerne les paramêtres css de la marge qui est anormalement doublée dans certains cas.
Il s’agit typiquement d’un bug casse-pompom qui peut vous faire perdre un temps monstrueux s’il n’est pas connu au moment de votre mise en page.
Un développeur place innocemment un float css gauche dans une cadre (élément html div) et utilise une marge gauche sur le cadre pour le pousser du côté gauche du récipient. Ca semble assez simple, hein ? Hé bien, ca l’est jusqu’à ce que vous le regardiez dans l’Explorateur pour Windows. Dans ce navigateur, la marge gauche du cadre a mystérieusement doublé de longueur !
L’image au-dessous vous montre un div simple (le carré fauve) contenant un cadre aligné à gauche (le carré vert) . Le carré vert a une marge gauche de 100 pixels, produisant un trou de 100 pixels entre le bord gauche du rectangle fauve et du bord gauche du carré vert. Jusqu’ici tout va bien.
.floatbox {
float : left;
width : 150px;
height : 150px;
margin : 5px 0 5px 100px;
/*C'est la dernière valeur qui indique 100px de marge à gauche */
}
Cet exactement le même code css vu par Internet Explorer : Il est affiché d’une façon différente . L’image ci-dessous montre ce que Internet Explorer fait de la marge.
Ne posez pas des questions aussi stupides! Vous rappelez-vous que c’est IE ? Le respect des normes ne peut être qu’espéré, pas attendu. Ce qui est important c’est ce qui arrive vraiment.
Ce bug se produit seulement quand la marge de l’élément « float » est dans la même direction que l’élément lui-même et est piégée directement entre l’élément et le bord intérieur de l’élément. N’importe quel suite d’éléments avec une marge semblable ne montrera pas la marge doublée. Seulement le premier flotteur dans n’importe quel rang de flotteur donné souffrira de l’insecte. Aussi, la marge doublée affiche la symétrie, en travaillant la même voie vers la droite qu’il fait vers la gauche.
Jusqu’en janvier 2004, ce bug a été infixable et était généralement contrôlé en remplaçant la marge défectueuse avec une bourre gauche sur un flotteur non-visible, avec une boîte intérieure nichée pour servir de la boîte visible dans le flotteur invisible, ou en tailladant une moitié de la valeur de marge pour IE seulement. Ca fonctionne, mais ca salit le code source. C’est partout Ok maintenant.
Steve Clason a trouvé comment corriger ce bug en rajouter la propriété inline de la manière suivante :
.floatbox {
float : left;
width : 150px;
height : 150px;
margin : 5px 0 5px 100px;
display : inline;
/*C'est la dernière valeur qui indique 100px de marge à gauche */
}
Et ca suffit ! Et ca fonctionne partout !
2 commentaires | css | Permalien
Publié par cweben
Pour faire suite à des interprétations de css différentes entre IE6 et Firefox, je m’aperçois (avec effroi) que j’ai mal interprété les recommandations du W3c.
Explications :
Si l’on observe les 2 éléments suivants :
<div style="width: 200px;">
<div style="width: 100%; padding-left : 50px; background : blue;">avec padding</div>
</div>
et
<div style="width: 200px;">
<div style="width: 100%; background : red;">sans padding</div>
</div>
On pourrait penser que ces 2 éléments ont la même taille de 200 pixels de large, mais il n’en est rien, la preuve :
(le premier élément à une longueur de 250 pixels de large,
le second 200 pixels seulement.)
Pourquoi ces 2 éléments n’ont-ils pas la même taille ?
On trouve la réponse dans le « box model » css du W3c :
« La taille des éléments préciser par width n’inclut, ni les marges (margin), ni les bords (border), ni les espaces intérieurs (padding).
Quelques exemples de layout fluides après ca :
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
Leave a Comment » | css | Tagué: css | Permalien
Publié par cweben
Elucubrations d'un geek 