こんにちは。CSSについて質問です。

ttp://unagiinu.jugem.cc/
なんですが、3カラムのセンター(float: left)がwinIEでのみ、なぜか右側に寄ってしまっています。winOPERA、winFirefox、MacSafari等だときちんと左側に寄っているんですが…。
どこが問題でしょうか?
ソースを見てご教授よろしくお願いいたします。

回答の条件
  • 1人10回まで
  • 登録:2006/06/11 19:27:09
  • 終了:2006/06/12 18:02:08

回答(3件)

id:yoneto164 No.1

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/12 00:55:43

ポイント30pt

winIE6 です。見たところ正しく表示されているので原因が定かではないのですが、jm_style.css の内容を、強引に

#contents #center {

width:440px;

margin: 0px 0px 0px 5px;

left: 155px;

float: left;

}

等としてみてはいかがでしょうか。

id:unagiinu

ほんとうは真ん中の左marginを15くらいにして、左右のカラムの間の真ん中に寄せたいのですが、そうするとwinIE6(スレイプニル等)でのみ右に寄って、右カラムが下に落ちてしまうのです。

教えてもらった記述に変更しても、やっぱり真ん中が右側に寄ったままです。

うーむ、左カラムのどこかがはみ出てるのが原因なのかとも少し考えましたがちがうようだし・・

2006/06/12 14:17:34
id:tezcello No.2

tezcello回答回数460ベストアンサー獲得回数692006/06/12 10:11:43

ポイント30pt

IE6/Win2k, N8.1/WinXP では前回答者と同じく確認が取れませんので...

残念ながら、コレだけの量のソースをチャンと見るのはツライです。

どのような表示になって困っているのかも分らないですし。

でも、IEだけおかしいという事なので参考になれば。

IEはボックスのサイズの取り方が仕様どおりではないので、width, padding, border などをキッチリ指定しようとするとたいていハマリます。

また、センタリングの話も有名です。

それらの回避用に DOCTYPE 宣言しようにも xml 宣言をするとダメとかも困った所です。

以下のサイトが参考になるでしょう。

http://www.mozilla.gr.jp/standards/webtips/index.html

http://www.seo-equation.com/html/css2/style_sheets.html

http://adp.daa.jp/archives/000265.html


以下質問とは無関係です。

それと使っているソフトウェアのせいでしょうが、ソースが読み難いです。そのせいで途中で読むのを諦めました。(div病ってご存知ですか?)

レイアウトの為のテーブルやブロック要素の配置の為のdiv&alignの乱発とか。

ソースを読む必要が全く無いのなら構いませんが、そういう訳にもいかないですしね。

僕個人はブログのページもAnother HTML-lintでの採点がそこそこ位になるようには調整しています。

id:unagiinu

そうなんです、確かにすっきりしないソースで…。

これから直していきたいと思うんですが、アドバイスありがとうございます。

>>IEはボックスのサイズの取り方が仕様どおりではないので、width, padding, border などを

やっぱりこの辺りが原因なのでしょうか。

ソースに少し加えるだけとかうまい方法は無いもんでしょうか…。わがままですんません。

2006/06/12 14:17:18
id:yoneto164 No.3

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/12 16:26:35

ポイント30pt

こちらで表示の不具合が確認できないので、明らかにおかしい部分を挙げてみます。

#contents #center {

width:440px;

margin: 0px 0px 0px 5px;

float: left;

}

#contents #center .pad {

padding : 0px 0px 0px 0px;

}

の部分はおかしいように思います。

#contents #center {

width:440px;

float: left;

}

#contents #center .pad {

padding : 0px 0px 0px 5px;

}

とするのが自然かも知れません。

あと、36行目に

</td></tr></div></table></TD>

とありますが、この</div>は必要ないと思います。

あと、末尾の</body>の上にある</div>も不要だと思います。

お役に立てず申し訳ないです。

id:unagiinu

以前、おっしゃられたようにcenter.padに記述していたんですが、それでも同じだったので色々試してcenterのmargin:を入れちゃったりしてました。

それを戻しても同じだったのですが、いちばん最後の不要な

および
とかを取ったら、何故か直りました! 直ったと言うか、自分の表示させたい形になりました。

もうちょっと勉強してソースも綺麗にしてみたいと思います。ありがとうございます。

</div>2006/06/12 18:01:17
  • id:unagiinu
    うわ・・・
    今度はmacIEでずれちゃってました。まあしょうがないかなぁ。
  • id:yoneto164
    macは職場にしかないので、またまた確認できないのですが、
    #contents #left と #contents #right で、width と margin を同時に指定してますよね。
    width を使った場合、margin や padding は指定しないのが普通なので、ここを直してみてはどうでしょうか。
    #contents #center .pad を使う理由はそこからきているのだと思いますよ。
    直ったら良いんだけどなぁ、違ったら済みません。
  • id:unagiinu
    ちょっと試してみますね。
    Macだけ余計な余白が空いてるんですよ…
    スクリーンショットも撮ってみます。
  • id:unagiinu
    うーむ、どうやら直らなかったみたいです…
    しかも、winでもIEの細かいバージョンによって違うような…。
    MacOSXのスクリーンショットのような見た目にしたいのです…。
    winスクリーンショット
    http://unagiinu.img.jugem.jp/20060616_200171.jpg
    MacOSXスクリーンショット
    http://unagiinu.img.jugem.jp/20060616_200170.jpg
  • id:unagiinu
    やっぱり、どーしても気になって眠れないので(笑
    もう一度質問してしまいました。

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

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

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

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