現在 XHTML+CSS によるHP作成を勉強中です。

以下URLに有るデータがIE基準で作ったのですが、FireFoxやOperaで形が崩れてしまいます。特に全体のセンタリングがどうやっても出来ません。
そのほかの崩れは文字サイズに関係しているのかとも思うのですがピクセル指定のポジションが微妙にずれてしまいます。
技術的な問題についてのみ可能な限り教えていただけるとありがたいです。どうぞよろしくお願いします。

http://www.the.cside.com/test/

CSSデータは
http://www.the.cside.com/test/c/001.css
です。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/01/20 08:01:10
  • 終了:--

回答(3件)

id:mizunoto No.1

mizunoto回答回数13ベストアンサー獲得回数02005/01/20 08:26:23

ポイント80pt

中央揃えに関しては・・・

body{ text-align:center;}

と併せて、中央揃えにしたいブロック要素に

div#○○{

margin : 0px auto;

text-align : left; /*内容のテキストが中央揃えになるのを回避*/

}

を加えてあげれば出来ると思います。

id:tosiki

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

タイプミスも含めて確認しましたが仰るとおりになっていると思います。

この場合marginはあまり関係ないですよね、念のためその部分も含めてやってみましたが…

以後お手数ですがソースを確認の上ご回答いただけるとありがたいです。

2005/01/20 09:15:17
id:komorebi No.2

komorebi回答回数133ベストアンサー獲得回数82005/01/20 10:29:06

ポイント150pt

IEは、一番CSSのレンダリングが正しくありません。

FireFoxなどのレンダリングのほぼ正しい方で、優先的にCSS設計をまずすることをオススメします。

完成後に、IEでレイアウトの崩れてしまう部分を、<!--[if IE]>をつかって上書きすれば、ハックを最小限で済むと思います。

中央寄せは、CSSテクニックの基本なので、海外サイトや最近のWEB雑誌を見たほうが詳しくのっています。

position: relative; は、此処に設定するのではなく、ブロック要素に「基準」として使用することをオススメします。

それと、Paddingを使ったら必ず調子をしなと、IEのバー所によってレンダリングが違うので崩れますよ。くれてる原因はそれだと思います。

id:tosiki

いやはや調べながらやっているつもりなんですが…

改めて調べてみるとmargin: 0 auto;も必要なんですね、それも言うことを聞いてくれなかったんですが。

横幅固定で両サイドautoの方を試してみます。

Paddingの調整は一つ一つBoxModel Hackを適用している積もりなのですが、1〜2px程度ずつずれて行くように感じるのですが気のせいかな、ボックスモデルについてはIE6とFireFoxは同じ挙動だったのではないでしょうか。

冷静に考えると、設計が甘くてpositionを多用しすぎているようにも思えますが、同じHTMLをCSSで使い回す腹だったので。

少し無謀だったかもしれません。

拝見するところお忙しい中チェックしていただいたようで感謝します。

もう少し回答を待たせていただきます。

2005/01/20 13:33:15
id:sandaler No.3

sandaler回答回数671ベストアンサー獲得回数02005/01/20 12:07:06

ポイント100pt

スタイルシートのbodyに

margin-right:auto;

margin-left:auto;

を追加してみてください。

id:tosiki

センタリング出来ました、あっさりと

どうもありがとうございます。

komorebiさんご指摘のようにFireFoxにてやったところ、きちんとつじつまが合う数値で配置が出来ました。それを影響の無い範囲でIEでも妥協線を探す形で何とか思うような配置に成りました、どうもありがとうございました。

しかし、MacのIEでみたときは…みなかったことにします。

どうも稚拙な質問だったようですみませんでした、しかしおかげさまで突破口が出来、勉強になりました。

重ねてありがとうございました。

2005/01/20 17:32:59
  • id:tosiki
    改行バグ

    上に、IEだと1〜2px微妙にずれてしまう事を書きましたが、調べてみたらIEはHTMLタグをわかりやすく書くために改行を入れるとリストなどに妙な隙間が出るバグが有るらしいです。そのためかもしれません。
    ちょっとすでに出来たものをいじる元気がないので確認はしていませんが。
    ご存じかとは思いますが参考までに。
    Webで参考ページを探しましたが見つかりませんでした、ぼくは
    Jeffrey Zeldman 著の
    Designing With Web Standardsで読みました。

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

トラックバック

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

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

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