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
まず、XHTML+CSSでデザインする場合、正しいXHTMLを書く必要があります。そこから直さなきゃいけません。
ヘッダが隠れるというのはwindows版IE5のバグが原因です。(正確にはボックスモデルのバグ。)
参考:Internet Explorer (Windows) CSSバグリスト
#header { padding:16px 10px 60px; height:90px; _height : 166px ; }
のようにすれば問題は解決できると思います。
(ボックスモデルのバグについては「IE ボックスモデル バグ」などで検索してください。)
#header {
padding:16px 10px 60px;
height:90px;
}
ヘッダーの高さが90pxしかないからじゃないですか?
その前に、ブロック要素をインライン要素でくくっていたり、
(X)HTMLの勉強を先にされた方がよろしいようですよ。
ご忠告ありがとうございます。
ただ、今回の質問のに関しては「ヘッダーの高さを90pxにしているから」だけだと、原因にも解決法にもなりません。
ちなみに単にヘッダーの高さを変えるだけだとsidebarとcontentが下に下がるのみです。
あと使ったIEはIE6ではないですか?こいつはcssの仕様が独自なのです。だから、そういう場合はIEに合わせるしかありません。今のところ最多なので。IE7なら大丈夫なはずなので、これが早く一般化すればいいのですが。直接の答えになってなくて申し訳ない。
ありがとうございます。勉強になります。
しかし使ったIEは5になります…。
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)を表示しないようにはしました。
ええと、そこではなくて、画像部分の問題なのです。
続けて回答をあけてみることにします。
まず、XHTML+CSSでデザインする場合、正しいXHTMLを書く必要があります。そこから直さなきゃいけません。
ヘッダが隠れるというのはwindows版IE5のバグが原因です。(正確にはボックスモデルのバグ。)
参考:Internet Explorer (Windows) CSSバグリスト
#header { padding:16px 10px 60px; height:90px; _height : 166px ; }
のようにすれば問題は解決できると思います。
(ボックスモデルのバグについては「IE ボックスモデル バグ」などで検索してください。)
ドンピシャリです!
ありがとうございます!
ボックスモデルのバグに関しては自分の手元の書籍の中にも明記しておりました(回避法も…。)私の中のHTMLとCSSの知識は5年くらい前のものでそれが今回でまったく役に立たないことがわかりました…。(痛い…)
取り急ぎそこだけ直したいというのが今回のはてなの質問だったのですが、こうなったらXHTML辞典を買ってはじめから勉強する事にします。
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として勉強させてもらいます。ありがとうございました。
ドンピシャリです!
ありがとうございます!
ボックスモデルのバグに関しては自分の手元の書籍の中にも明記しておりました(回避法も…。)私の中のHTMLとCSSの知識は5年くらい前のものでそれが今回でまったく役に立たないことがわかりました…。(痛い…)
取り急ぎそこだけ直したいというのが今回のはてなの質問だったのですが、こうなったらXHTML辞典を買ってはじめから勉強する事にします。