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

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

●質問者: unagiinu
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CC CSS JUGEM ttp:// こんにちは
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ヨネちゃん
●30ポイント

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

#contents #center {

width:440px;

margin: 0px 0px 0px 5px;

left: 155px;

float: left;

}

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

◎質問者からの返答

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

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

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


2 ● tezcello
●30ポイント

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での採点がそこそこ位になるようには調整しています。

◎質問者からの返答

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

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

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

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

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


3 ● ヨネちゃん
●30ポイント

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

#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>も不要だと思います。

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

◎質問者からの返答

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

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

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

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

</div>
関連質問


●質問をもっと探す●



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