以下ＵＲＬに有るデータがＩＥ基準で作ったのですが、FireFoxやOperaで形が崩れてしまいます。特に全体のセンタリングがどうやっても出来ません。
そのほかの崩れは文字サイズに関係しているのかとも思うのですがピクセル指定のポジションが微妙にずれてしまいます。
技術的な問題についてのみ可能な限り教えていただけるとありがたいです。どうぞよろしくお願いします。
http://www.the.cside.com/test/
ＣＳＳデータは
http://www.the.cside.com/test/c/001.css
です。
No.1
13
0
80pt
中央揃えに関しては・・・
body{ text-align:center;}
と併せて、中央揃えにしたいブロック要素に
div#○○{
margin : 0px auto;
text-align : left; /*内容のテキストが中央揃えになるのを回避*/
}
を加えてあげれば出来ると思います。
No.2
1338
150pt
IEは、一番CSSのレンダリングが正しくありません。
FireFoxなどのレンダリングのほぼ正しい方で、優先的にCSS設計をまずすることをオススメします。
完成後に、IEでレイアウトの崩れてしまう部分を、<!--[if IE]>をつかって上書きすれば、ハックを最小限で済むと思います。
中央寄せは、CSSテクニックの基本なので、海外サイトや最近のWEB雑誌を見たほうが詳しくのっています。
position: relative; は、此処に設定するのではなく、ブロック要素に「基準」として使用することをオススメします。
それと、Paddingを使ったら必ず調子をしなと、IEのバー所によってレンダリングが違うので崩れますよ。くれてる原因はそれだと思います。
いやはや調べながらやっているつもりなんですが…
改めて調べてみるとmargin: 0 auto;も必要なんですね、それも言うことを聞いてくれなかったんですが。
横幅固定で両サイドautoの方を試してみます。
Paddingの調整は一つ一つBoxModel Hackを適用している積もりなのですが、1〜2px程度ずつずれて行くように感じるのですが気のせいかな、ボックスモデルについてはIE6とFireFoxは同じ挙動だったのではないでしょうか。
冷静に考えると、設計が甘くてpositionを多用しすぎているようにも思えますが、同じHTMLをCSSで使い回す腹だったので。
少し無謀だったかもしれません。
拝見するところお忙しい中チェックしていただいたようで感謝します。
もう少し回答を待たせていただきます。
No.3
6710
100pt
スタイルシートのbodyに
margin-right:auto;
margin-left:auto;
を追加してみてください。
センタリング出来ました、あっさりと
どうもありがとうございます。
komorebiさんご指摘のようにFireFoxにてやったところ、きちんとつじつまが合う数値で配置が出来ました。それを影響の無い範囲でＩＥでも妥協線を探す形で何とか思うような配置に成りました、どうもありがとうございました。
しかし、MacのＩＥでみたときは…みなかったことにします。
どうも稚拙な質問だったようですみませんでした、しかしおかげさまで突破口が出来、勉強になりました。
重ねてありがとうございました。
tosiki
2005/01/20 22:12:59
6
6
1
1
1
早速の回答ありがとうございます。
タイプミスも含めて確認しましたが仰るとおりになっていると思います。
この場合marginはあまり関係ないですよね、念のためその部分も含めてやってみましたが…
以後お手数ですがソースを確認の上ご回答いただけるとありがたいです。