Catégorie : CSS

L’affichage par défaut des listes et lignes de listes peut varier d’un navigateur à l’autre – il faut toujours tester et stabiliser avec des margin et padding explicites :

• une marge (margin) par défaut est créée dans IE.
• une marge intérieure (padding) par défaut est créée dans les navigateurs « sains ».

Voir ici : Styling an input type="file" <archivé>

Corrections apportées à IE 6 et IE 5.5 par ce patch :

• transparence des images PNG
• box model
• positionnement fixe d’éléments
• directives Mini et Maxi
• marges automatiques
• sélecteurs avancés, pseudo-classes avancés

voir aussi :

http://www.christopher-jablonski.com/fr/reperes/
https://sourceforge.net/
http://dean.edwards.name/IE7/install.html
http://dean.edwards.name/IE7/usage/
http://www.estvideo.com/

Notes importantes à propos de la transparence PNG

Le patch de Dean Edwards agit uniquement :

• sur les images se terminant par « -trans.png »
• sur les images dont la hauteur et la largeur sont mentionnées !

Voir un modèle de boîtes flottantes.

Remarques :

• « Quand vous définissez pour un élément une mention sur float (cours du texte) vous devez définir aussi une mention sur width (Largeur) » – dixit selfhtml…
  note : « width » peut être réglé sur « auto ».
• Pour que le bloc contenant les boites flottantes englobe graphiquement (vérifier avec une bordure par ex.) tout son contenu :
  • il suffit qu’un objet quelconque avec la propriété clear: both vienne à la suite des blocs flottants dans le même bloc contenant
  • ou que le bloc contenant ait la propriété overflow: hidden

  il est utile de lui attribuer la propriété overflow: hidden;.

clear (suite pour le cours du texte)

Avec clear : on peut interrompre le cours du texte pour en forcer la poursuite sous l’élément/le passage entouré. Les données suivantes sont possibles :

clear: left impose pour float: left la poursuite en dessous.
clear: right impose pour float: right la poursuite en dessous.
clear: both impose dans chaque cas la poursuite dessous.
clear: none n’impose pas de poursuite dessous. (réglage normal).

Un exemple

le css :

#conteneur {
	padding: 5px;
	background: #F8F8F8;
	border: 1px solid #666666;
	width: 380px;
	overflow: hidden; /* étend la hauteur du bloc pour contenir tous les blocs flottants */
}
.float {
	width: auto; /* mention width indispensable si mention float présente */
	background: #FFFFFF;
	border: 1px solid #000000;
	float: left;
	padding: 5px;
	margin: 2px;
}

le html :

<div id="conteneur">
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
</div>

C’est LA galère du CSS (lorsqu’on cherche à appliquer le centrage vertical sur des objets de hauteur variable).

voir l’article d’Alsacreations sur le sujet

Le plus intéressant est parfois de se résoudre à recourir à une cellule de tableau pour centrer verticalement un élément – parfois d’ailleurs la seule façon d’obtenir exactement le résultat voulu :

<table>
<tr><td style="vertical-align:middle"><img src="image.jpg"></td></tr>
</table>

référence Microsoft ici

On peut utiliser la méthode avec filter + AlphaImageLoader :

objet {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader([Enabled], sizingMethod, src)
}

avec pour sizingMethod la valeur scale (l’image s’étire pour couvrir la surface de l’objet) ou crop (dimension originale fixe)

références :

http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms532920(VS.85).aspx

Autres méthode pour les PNG-24 ici : sur le blog de la blonde.

un article : http://css-tricks.com/css-transparency-settings-for-all-broswers/

div.transparent {
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}

opacity : 0.5; est la norme CSS
filter:alpha(opacity=50); est spécifique à IE
-moz-opacity : 0.5; pour les navigateurs « Mozilla » anciens (Netscape…)
-khtml-opacity : 0.5; pour les navigateurs « khtml » anciens (Safari 1.x…)

Le contenu d’un bloc transparent devient normalement lui aussi transparent.