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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/03/20 00:37:11
  • 終了:2006/03/25 03:19:02

ベストアンサー

id:nyarla-net No.4

にゃるら回答回数35ベストアンサー獲得回数22006/03/20 11:35:28

ポイント100pt

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

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

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

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

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

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

id:ayamon

ドンピシャリです!

ありがとうございます!

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

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

2006/03/25 03:00:53

その他の回答(4件)

id:komorebi No.1

komorebi回答回数133ベストアンサー獲得回数82006/03/20 00:58:59

ポイント20pt

#header {

padding:16px 10px 60px;

height:90px;

}

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

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

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

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

id:ayamon

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

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

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

2006/03/20 01:19:27
id:hamster009 No.2

hamster009回答回数3431ベストアンサー獲得回数502006/03/20 01:16:45

ポイント30pt

http://www.microsoft.com/

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

id:ayamon

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

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

2006/03/20 01:33:49
id:Nori327 No.3

Nori327回答回数65ベストアンサー獲得回数32006/03/20 03:09:52

ポイント20pt

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が閲覧できれば、もっとうまくアドバイスできるのですが…。

id:ayamon

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

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

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

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

2006/03/25 03:14:18
id:nyarla-net No.4

にゃるら回答回数35ベストアンサー獲得回数22006/03/20 11:35:28ここでベストアンサー

ポイント100pt

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

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

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

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

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

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

id:ayamon

ドンピシャリです!

ありがとうございます!

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

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

2006/03/25 03:00:53
id:Takumu No.5

Takumu回答回数25ベストアンサー獲得回数22006/03/20 11:48:21

ポイント30pt

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>

id:ayamon

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

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

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

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

2006/03/25 03:13:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません