DIVの高さを揃えるスタイルを適応したのですが、一部だけ上手く表示できません。

ttp://coliss.com/articles/build-websites/operation/css/558.html
ここの方法に習って
ttp://kotekote.web.fc2.com/test_a.html
ttp://kotekote.web.fc2.com/test_b.html
を作成しました。
test_a.htmlはindex.htmlとなるもので、1ページだけレイアウトが異なるのですが、これだけ上手く表示できません…。
CSSファイルは以下です。
ttp://kotekote.web.fc2.com/css/base.css

WindowsXPで確認したところFirefox2.0やIE7では表示されており、IE6だけ表示が上手くいかないようです。
ご助力お願いいたします…。

回答の条件
  • 1人10回まで
  • 登録:2008/05/29 19:07:57
  • 終了:2008/05/31 00:30:04

ベストアンサー

id:Hi32 No.1

Hi32回答回数3ベストアンサー獲得回数12008/05/29 23:00:31

ポイント50pt

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


これを消してみてはいかがでしょうか?


理由は

http://128bit.blog41.fc2.com/blog-entry-117.html

に詳しいです。

幸いなことにfc2ブログをご使用のようですので。

id:lasa007

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

ただ、今アップしてるのは仮の環境で、実際には公な機関での使用になりますので、宣言文はなるべく省かず、ハックなどで処理できれば・・・と考えています。

現在分かっていることなのですが、

#master(width:960px)内に

#bg_l(左グラデ,width:30px),#main(ログイン部分,width:900px),#bg_r(右グラデ,width:30px)があり、

例えば#mainにborder:1px solid redのように指定して、合計のpxが#masterのwidth:960pxを越えるようになると、

表示されるようになります。(ただし、#masterから溢れた#bg_rは下にずれますが…)

他のページ(例:test_b.html)のような構造の場合は、このようなことはなく何もしなくても見えます。

ログインだけ階層が複雑になりすぎているからでしょうか…。

2008/05/29 23:44:11

その他の回答(1件)

id:Hi32 No.1

Hi32回答回数3ベストアンサー獲得回数12008/05/29 23:00:31ここでベストアンサー

ポイント50pt

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


これを消してみてはいかがでしょうか?


理由は

http://128bit.blog41.fc2.com/blog-entry-117.html

に詳しいです。

幸いなことにfc2ブログをご使用のようですので。

id:lasa007

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

ただ、今アップしてるのは仮の環境で、実際には公な機関での使用になりますので、宣言文はなるべく省かず、ハックなどで処理できれば・・・と考えています。

現在分かっていることなのですが、

#master(width:960px)内に

#bg_l(左グラデ,width:30px),#main(ログイン部分,width:900px),#bg_r(右グラデ,width:30px)があり、

例えば#mainにborder:1px solid redのように指定して、合計のpxが#masterのwidth:960pxを越えるようになると、

表示されるようになります。(ただし、#masterから溢れた#bg_rは下にずれますが…)

他のページ(例:test_b.html)のような構造の場合は、このようなことはなく何もしなくても見えます。

ログインだけ階層が複雑になりすぎているからでしょうか…。

2008/05/29 23:44:11
id:tezcello No.2

tezcello回答回数460ベストアンサー獲得回数692008/05/30 11:27:31

ポイント35pt

> ログインだけ階層が複雑になりすぎているからでしょうか…。

そうではなくて、log-in ページには画像があるからでしょう。

画像の周りに自動的にマージン、パディング、ボーダーが入ったりって事は無いでしょうか?

ボックスサイズを計算してキッチリ合わせようとすると、ほとんどの場合 IE6 は失敗しますねぇ...


チョッとだけ試してみましたが、

  • master のサイズを 963px にする
  • 全要素でのマージン指定を -1px にする

どちらかでとりあえず表示は出来るみたい。

bg_l, main, bg_r の下側マージンとパディングを止めると main 部分は表示できるけどグラデーションが短くなっちゃいます...


単に両サイドにグラデーションを入れたいだけなんでしょうけど、3カラムにしないと出来ないモンでしょうか?

両サイドに空白文字を入れている時点で「見栄え」を排除しているとは言い難いと思うので、素直にテーブルでレイアウトしてしまったらどうでしょう?(簡単に希望通りになるのか試していないけど)

他にも方法がありそうですけど。


IE6 のときの表示の乱れを気にされていますが、スタイルシートで IE6 非対応の部分が一杯あるように思いますが大丈夫でしょうか?

「あああ」「いいい」「ううう」「えええ」「おおお」へのリンク部はマウスオーバーで真っ白になっちゃいます。

id:lasa007

ご指摘ありがとうございます。

背景になっている画像の周りにmarginの指定がしてありました。

>単に両サイドにグラデーションを入れたいだけなんでしょうけど、3カラムにしないと出来ないモンでしょうか?

そうですね…ほかの方のコメントにもあったサイトを参照しながら構築しなおしてみます。

納期が近かったので、出来ればあまり手直しせず少し直してできれば良いな…という甘い考えがあったので、色々と見えなくなっていたものがあるようです。

気持ちを切り替えて無理のないコーディングを心がけてみたいと思います。

>「あああ」「いいい」「ううう」「えええ」「おおお」へのリンク部はマウスオーバーで真っ白になっちゃいます。

これは…確認時気づきませんでした…。

当方IE6.02のXPSP2ですが、マウスオーバー時は黄色文字で表示されています。

お手数ですが環境を教えていただいてもよろしいでしょうか?

2008/05/30 21:32:46
  • id:Hi32
    すみません。問題を把握していませんでした。
    高さを揃える必要が無いように思います。
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    すべての、上記を消してみてはいかがでしょうか?


    またまた、把握していなければすみません。
  • id:lasa007
    ご回答ありがとうございます。
    #bg_lと#bg_rは#mainに高さを揃えないとシャドウ部分の画像がうまく表示されないので、高さをそろえるのは必須なんです…。
    #main部分がページごとにheightが変わるので、各カラムのheightをpx指定することができません。。
  • id:Hi32
    高さを揃える必要が無いとやはり私は思うのですが……
    左右1枚に普通しませんか?ご存知だとは思うのですが一応。
    http://www.koikikukan.com/archives/2006/11/29-015555.php
    http://www.koikikukan.com/archives/2006/11/30-022020.php
    最悪、解決できなかった場合は、1ページだけ別のcssを当てられてはいかがでしょうか?これもまと外れですか?自信がありません。

    すみません。
    問題を把握できないので、もし、他の方で回答が付かない場合はキャンセルしてください。lasa007さんはテーブルレイアウト出身の方でしょうか?テーブルレイアウトの置き換えのような構造なのは何か理由があるのか、スクリプトにも意味があるのかないのか良くわからないです。回答した限りはきちんと回答したかったのですが、想像を越える範囲なので、投げ出します。ごめんなさい。
  • id:lasa007
    URLありがとうございます。
    いえ、表示させたいのはこういうことですが、このような方法を存じ上げておりませんでした…。
    恥ずかしいながらテーブルレイアウト出身のCSS未熟者なもので、どうしても先入観念で昔のレイアウトの仕方を基準に考えがちで、Hi32さんの指摘がどこを指しているものなのかが理解できず、上記のような回答をしてしまいました。
    ご好意を無為にしてしまい申し訳ありません。
    先ほど教えていただきましたサイトを熟読し、構築しなおしてみます。
  • id:lasa007
    ご回答いただいた参照先サイトを下に修正しなおしました。
    うまく表示することが出来、今後の糧になる教えを頂き誠にありがとうございました。
    これにて終了させていただきたいと思います。
  • id:tezcello
    自宅の環境ではないので、お返事に時間が掛かりました。

    オンラインでは表示できなかったので、ローカルに保存して調べているうちに何か不都合があったのかもしれませんね。
    今、見てみると問題なく表示されているようです。お騒がせしました。

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

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

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

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