2008年05月11日

自分のブログ上部のバナー画像が表示されません。

こんにちは。
ブログタイトルのbackgroundに自作のGIF画像を貼っていますが、ブラウザによって表示されなくなってしまいます。


OS：mac OSX 10.4.11

ブラウザ：safari 3.1.1 → 表示される
　　　　　IE 5.2.3 → 表示されない

safariで見ると問題無いのですが、IEだと表示されなくなってしまいます。
画像のサイズは750×250ピクセルで、20kb程です。
photoshopで作成、インデックスカラーに減色する際は「web用」を選択、透過データは含まれていません。
ちなみに全く同じ画像をjpgでアップし直して貼り替えても同じ現象がおきました。

他にも、IEだとカレンダー部分等のレイアウトが微妙に崩れていたりするのですが、それは良しとして
とりあえずタイトル画像が表示されない原因は何が考えられるでしょうか。

よろしくお願いします。

Posted by Daaii  at 16:41 │Comments(6) │TrackBack(0)
« 前の記事へ│このBlogのトップへ│次の記事へ »

この記事へのトラックバックURL

http://oshiete.slmame.com/t236500
この記事へのコメント
もしかしてそのファイル名は３３文字ですか？
３３文字だとIE 5.2.3では表示されないというバグがあるという
記事を見ましたが。。
Posted by キー at 2008年05月12日 07:14
IE5は古いブラウザですから、閲覧対象に含めると色々と問題が起きます。
バナー部分のHTMLとCSSを教えてもらえますか？
Posted by 77 at 2008年05月13日 05:02
＞キーさん
残念ながら11文字でした。
なんか都市伝説みたいですね、真相が気になります。

＞7さん
なぜIE5かと言うと、自分はmac使いなのですが、mac用のIEの開発が5で終わっているため手元にある5でしか確かめられなかったというだけです。最新のIEがバージョンいくつなのかすらも知らないのでお恥ずかしいです。

要は一般的なブラウザ（＝IEかな、となんとなく。他によく使われているブラウザってあるんでしょうか？）できちんと表示されていれば問題ないです。
HTMLもほぼ初心者で、どの部分を抜き出してよいのか微妙なので、まだ準備中ですが一時的にブログを公開させていただきます。

http://daaii.slmame.com/

お手数ですがご確認のほどよろしくお願いします。
Posted by DaaiiDaaii at 2008年05月13日 10:13
わざわざ公開してくださり、ありがとうございます。
原因は、 CSS（スタイルシート）の #banner で指定している overflow: hidden; です。

MacIE5では overflow プロパティに visible 以外の値が指定された要素が表示されないというバグがあります。
参照：http://cssbug.at.infoseek.co.jp/detail/macie/b013.html
なので、 #banner の中の overflow: hidden; の部分を下記と差し替えてみてください。

/*hide￥*/overflow:hidden;/*Mac IE*/

半角の￥が付くことで Mac IE 5ではコメント扱いになり無視されますが、他のモダンブラウザでは認識されます。
Posted by 77 at 2008年05月13日 17:07
書き忘れました。

Mac でよく使用されているブラウザですが、配布が終了した Mac IE 5を閲覧対象に含めるサイトが少なくなってきたこともあり、Safari, Firefox, Opera 辺りがよく使われていると思います。
Posted by 77 at 2008年05月13日 17:21
＞7さん
こちらこそご丁寧にありがとうございます。
ご指摘の記述に変えてみたところ、無事うちのIE5で表示されました！

僕自身Safariをメインに使用していてIEはほとんど使っていなかったですし、お話を聞いてMac IE5のことはさほど考慮しなくてもよさそうだということが分かりましたが、IE5を対象にした解決法までバッチリ教えていただいて感激しております。

些細なことでお騒がせしてしまいましたが、大変勉強になりました。＾＾
ありがとうございました。
Posted by DaaiiDaaii at 2008年05月13日 18:04
このページの上へ▲