人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

MTとcssの質問です。
background-imageでMTのヘッダーをつくりました。macで見るとどのブラウザでもは問題ないのですがwinのIEで見たらヘッダーがかくれてしまいます。
下のメニューとサイドバーはcssで位置を合わせています。(単位はpxです)
ヘッダーの隠れてしまう原因と解決法を教えてくださいよろしくお願いします。
Blogのアドレスはこちらです
http://sundaypark.cheap.jp/tissueblog/
メインページのテンプレート
http://www.shorttext.com/isznn
スタイルシートのテンプレート
http://www.shorttext.com/frkl

Macからとwinからの見た目
http://proxy.f3.ymdb.yahoofs.jp/bc/441d7995_fd2e/bc/5b4e/why.jpg?BCOCYHEB5rpCXEEm

●質問者: ayamon
●カテゴリ:ウェブ制作
✍キーワード:background-image blog CSS IE MAC
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● komorebi
●20ポイント

#header{

padding:16px 10px 60px;

height:90px;

}

ヘッダーの高さが90pxしかないからじゃないですか?

その前に、ブロック要素をインライン要素でくくっていたり、

(X)HTMLの勉強を先にされた方がよろしいようですよ。

http://www.w3.org/TR/xhtml1/

◎質問者からの返答

ご忠告ありがとうございます。

ただ、今回の質問のに関しては「ヘッダーの高さを90pxにしているから」だけだと、原因にも解決法にもなりません。

ちなみに単にヘッダーの高さを変えるだけだとsidebarとcontentが下に下がるのみです。


2 ● hamster009
●30ポイント

http://www.microsoft.com/

あと使ったIEはIE6ではないですか?こいつはcssの仕様が独自なのです。だから、そういう場合はIEに合わせるしかありません。今のところ最多なので。IE7なら大丈夫なはずなので、これが早く一般化すればいいのですが。直接の答えになってなくて申し訳ない。

◎質問者からの返答

ありがとうございます。勉強になります。

しかし使ったIEは5になります…。


3 ● Nori327
●20ポイント

http://www6.plala.or.jp/go_west/nextcss/index.html

「Macからとwinからの見た目」のURLが閲覧できません。この部分が表示されないということでよろしいのでしょうか?

<a href="http://sundaypark.cheap.jp/tissueblog/">
<div id="header">
<h1 lang="en">tissue blog</h1>
<h2>竹千代のBlogいじりたおし</h2>
</div>
</a>

だとしたら、

#header h1,#header h2
 {
 Display:none;
 }

と「ヘッダーを表示しない」ように指定しているので、表示されないのは当然だと思います。この部分を消去すれば、表示されます。環境:Windows、IE6、Firefox1.5。

komorebiさんがおっしゃっているとおり、aタグでdivタグをくくるなど、本来ありえないhtmlになっています。まずそこを修正すべきだと思います。

「Macからとwinからの見た目」のURLが閲覧できれば、もっとうまくアドバイスできるのですが…。

◎質問者からの返答

回答ありがとうございます。

ヘッダー(h1,h2)を表示しないようにはしました。

ええと、そこではなくて、画像部分の問題なのです。

続けて回答をあけてみることにします。


4 ● にゃるら
●100ポイント ベストアンサー

まず、XHTML+CSSでデザインする場合、正しいXHTMLを書く必要があります。そこから直さなきゃいけません。

ヘッダが隠れるというのはwindows版IE5のバグが原因です。(正確にはボックスモデルのバグ。)

参考:Internet Explorer (Windows) CSSバグリスト

#header {
padding:16px 10px 60px;
height:90px;
_height : 166px ;
}

のようにすれば問題は解決できると思います。

(ボックスモデルのバグについては「IE ボックスモデル バグ」などで検索してください。)

◎質問者からの返答

ドンピシャリです!

ありがとうございます!

ボックスモデルのバグに関しては自分の手元の書籍の中にも明記しておりました(回避法も…。)私の中のHTMLとCSSの知識は5年くらい前のものでそれが今回でまったく役に立たないことがわかりました…。(痛い…)

取り急ぎそこだけ直したいというのが今回のはてなの質問だったのですが、こうなったらXHTML辞典を買ってはじめから勉強する事にします。


5 ● Takumu
●30ポイント

IE6とIE5.5以前でCSSのwidth、heightの解釈違うために起こる現象だと思います。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

スマートなやり方でないですが、以下の方法で対処できると思います。ただ確認をIE6の互換モードでやってるのでもしかしたら直りきらないかもしれません(その時はすいません。

あと、WinFirefoxでもいちお確認しましてますが、MacSafari他では確認できてないため、別の問題が出るかもしれません(その時もすいません。。。。

css ----------------

div#header2 {

height: 90px;

}

html ---------------

<h1 lang="en"><$MTBlogName$></h1>

<h2><$MTBlogDescription$></h2>

◎質問者からの返答

回答ありがとうございます。

しかし、書き換えてみたところ、問題点になんの変化もなく、やはりnyarla-net さんの答えが正解だったようです。

(もっともXHTMLがめちゃくちゃらしいのでそっちの方が問題なのですが…。)

大事なTIPSとして勉強させてもらいます。ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ