配置した画像に余計な隙間(スペース)が出来る
HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。
解決策
CSSファイルに以下の設定を記述する。
[php]img {
vertical-align: top;
}[/php]
…
DD_belatedPNG
先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。DD_belatedPNGの入手
以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがありますので、そこをクリックします。
DD_belatedPNGの設置方法
ダウンロードしたファイルをサーバにアップして、以下のコードをhtmlファイルに設置します。
<!-- IE6を透過png対応させる -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, .wrap980 h1 a');
</script>
<![endif]-->
「if IE…」というのは、IE6の場合に以下のスクリプトを読み込む設定です。
上記のコードでは、imgタグ全てと、wrap980クラス内のh1のaタグが指定されています。
後者はサイトロゴの背景にpng画像を設置していたので、こういう書き方にしています。
普通に配置されているimg画像やCSSで背景に画像が設置されている場合は、上記のやり方で問題ありませんが、body・tr・td要素の背景には使えないなど、いくつか注意する点もあるようなので、もう少し情報が必要な方は以下のページが詳しく説明してくれていますので、参考にしてみてください。
graffiti on the web
この投稿へのコメント
コメントはまだありません。