ネットスケープ（Netscape）だけ背景が表示されない
2008/06/12 Thu [Edit]
CSS の覚え書き。
お仕事中、background プロパティで指定した背景色と背景画像が、ネットスケープ（Netscape）だけ表示されない状況に遭遇。
他のブラウザでは何も問題なく表示されているのに、ネスケだけ background プロパティの指定が適用されていない。
今回の解決策は
background : url(image/hoge.gif) 10px center no-repeat #eee;
上の赤いソース部分 center を
background : url(image/hoge.gif) 10px 5px no-repeat #eee;
上のように、実数値の指定（5px）に修正すると、ネットスケープでも背景色と背景画像が無事表示される♪
●結論
ネットスケープだけに無視されている時はプロパティの値を統一すると吉かも。
Comments
はじめまして。
「h007-3middle」をカスタマイズして使用させていただいています。
質問があるのですが、画像に文字を回り込ませようと思って記事の作成画面で画像を挿入したあとに、「align="right" hspace="10"」と追加しても画像の左右に余白が反映されないのですがどうしてなのでしょうか？
アドバイスよろしくお願いいたします。
mbw183さん、はじめまして！
この度はテンプレートのご利用＆ご質問ありがとうございます。
少々説明が長くなると思いますが、お付き合い頂けたらと思います。
早速ご質問内容を、当ブログで試してみました。
まず、img 要素の align 属性は問題ありませんでした。right と指定すると img 要素は右へと移動しました。
おそらく mbw183 さんの環境でもここまでは宜しいのではないでしょうか？
次に hspace 属性の値に 50 と指定したところ、うんともすんともありませんでした。
mbw183 さんもご質問で書かれていますが、hspace 属性は要素の周りの「余白」の指定です。
先に原因を説明させて頂くと、現在 mbw183 さんがご利用中のテンプレートのスタイルシートの最初の方で下記の指定が見つかると思います。
/* ブラウザの初期化 */
* { margin : 0; padding : 0;}
これは全称セレクタを使い、全ての要素の margin（外側の余白）と padding（内側の余白）を0にする指定です。
hspace 属性は要素の外側（左右）に余白を指定する属性なので、margin の指定とぶつかり反映されていない状態でした。
つまり上記のスタイルシートの指定から margin に関する指定を削除してしまえば hspace 属性での指定が反映されます。下が削除後の指定です。
/* ブラウザの初期化 */
* { padding : 0;}
しかし、この方法では他の問題が発生してしまいます。
どんな問題かをご説明するには、全称セレクタを使い、何故、全ての要素の余白を0（リセット）していたのかについて言及しなければならないと思います。
ご存知かも知れませんが、ブラウザはデフォルトで要素の周りに余白を持っています。その余白はブラウザによりマチマチです。
細かいデザイン上の調整をするには、そのマチマチがとても邪魔なので、多くのブラウザでの見た目を統一させる目的でリセットしていた訳です。
つまり問題とはそのマチマチの余白が復活してしまうと言うことです。
それではあまりに乱暴な解決策だと思うので、幾つか別の方法を提案致しますので、mbw183さんの今後のブログ運営を踏まえお選びください。
■解決策1
全称セレクタの使用を止め、img 要素以外の余白だけ初期化する。
/* ブラウザの初期化 */
* { margin : 0; padding : 0;}
を下のようなソースに置換
body , div , p , a { margin : 0; padding : 0;}
あくまで参考ソースです。もしも別の要素に変な余白が発生するようでしたらセレクタを,（カンマ）で区切り要素名を足してください。
■解決策2
CSS でレイアウトする。
例えば今回の場合、valign 属性は float プロパティ、hspace 属性は margin プロパティで指定できます。
CSS の指定をそのまま要素に style 属性を使い書く方法（インライン）か、スタイルシートで class を使い設定を決め、要素へは class 属性で適用させます。
○参考ソース（インライン）
※注意：HTMLソースです。
<img src="hoge.jpg" style="float:right; margin-right:10px;" alt="" />
○参考ソース
※注意：上はCSSソース、下はHTMLソースです。
.mbw-layout {
float:right;
margin-right:10px;
}
<img src="hoge.jpg" class="mbw-layout" alt="" />
私としては１番下の方法がお勧めです。理由はこれからも同じような指定を適用したい img 要素が出てきた時に、class 属で適用させれば何回でも同じ指定が適用されますし、CSS の指定を調整したくなった時、同じ class 名を持つ要素の管理なら一括で行えます。
補足として、今回の align 属性や hspace 属性は非推奨な属性です。将来的に対応しないブラウザが出てくる可能性があるので・・・あるの？？
・・・詳しいことは割愛させて頂きますが CSS で出来ることは CSS でやっておくのが最近の流れのようです。
それと、mbw183さんのカスタマイズ、ちゃっかり拝見させて頂きました。良い感じですね。刺激を受けました＾＾
アップル製品などの情報量も凄いですね。素敵です。
最後にご報告として IE6 でmbw183さんのブログを閲覧すると現在カラム落ちしてしまっていますよ。
当ブログの下の記事をご覧頂けると解決に繋がるかも知れません。
http://hajimetedesign.blog77.fc2.com/blog-entry-57.html
また何かご質問ありましたらお気軽にどうぞ＾＾
こんばんは。
詳しく教えていただきありがとうございます。
すごくわかりやすい説明でした^^
おかげさまで無事に余白を反映させることができました。
IE6用に「hack007.css」を書き換えてみたのですがうまく表示されていますでしょうか？^^;
mbw183さん、こんばんは★
いえいえ、どういたしまして＾＾
余白反映できたようで何よりです。
それと Windows の IE6 だとカラム落ちしたままでした。
mbw183さんのブログで使用中の「hack007a.css」を確認しよとソースを開いたのですが、文字化けしてしまっていました。
FC2ブログのサーバーは文字のエンコーディングが「EUC-JP」です。現在「shift_JIS」で保存されているようです。まずは文字化けを解決してみてください。
それと IE6 での見栄えをご自身でご確認をされたいような時は当ブログの下の記事がお役に立つかもです。
http://hajimetedesign.blog77.fc2.com/blog-entry-37.html
私がサクッと確認出来る時は良いのですが、お返事が遅くなってしまうこともあると思うので、宜しかったらご覧ください＾＾
こんばんは。
「hack007a.css」が文字化けしていたとは^^;
修正して教えていただいたサイトでチェックしてみたところちゃんと表示されるようになったみたいです。
丁寧に教えていただきありがとうございました。
また何かあったら質問しにきます^^;
mbw183 さん、こんにちは！
いえいえ＾＾
少しでもお役に立てたようで嬉しいです♪
私では解決に至らないことや、返信が送れてしまうことがあるとは思いますが、お気軽にご質問頂けると嬉しいです。
IE6 パッチリですね！
ではでは＾＾
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Track Backs
TB URL
で良いと思うに一票。
