IEをfire fox表示にすると画面表示がずれます

質問

IEをfire fox表示にすると画面表示がずれてしまいます。

IEでは正常に表示されるのですが、
fire foxで表示させると、表示画面が全体的に
左によってしまいます。

さらに左プラグインにセンターの部分が食い込んでしまっています。
センターが425pxでプラグインが195pxなので、センターの幅の内　
195pxが重なってしまっているということになります。

なぜかセンター内の記事は余った
230pxの狭い範囲の中で細かく改行されながら
表示されているので、すごく読みづらいです。

IEとfire foxでCSSの認識の仕方が違うということが原因のようですが
色々調べていじってみたのですが、一向に改善しません。

・どのような場合にブログ全体が左端へずれるのでしょうか？
・またどのような場合に左プラグインにセンターの部分が重なるのでしょうか？

この点ご教授いただけると嬉しいです。よろしくお願いします。

回答No.3

ski1111111

マークアップが見られないので、各要素の親関係が分からず、
定義が適用されてる部分と、そうでない部分がわかりません。
htmlドキュメントの先頭に記述する「DocumentType」宣言が何かもわからないので、全て「可能性がある」レベルでのアドバイスになります。
「DocumentType」宣言「標準モード」か「互換モード」かに分かれ、
「標準モード」はwidthに「padding、margin、border」は含まれないため、
実際の幅からこれらの数値を引いた値をwidthで定義します。

でないと、実際の幅以上で入りきらないためレイアウトが崩れる可能性があります。

FireFoxはその正しいルールで実装されているため、
↑【widthに「padding、margin、border」は含まれない】
IEとFireFoxで同じ表示にしたい場合、「IE6での標準モード」の宣言をしてください。IE6での標準モードはFireFoxと同じく規約どおりにCSSを解読するためFireFoxと同じ表示になります。
表示モード表は→　http://multix.jp/html0203/html/docmodes.html

まず「float: center」floatプロパティに指定できる値ではなく、MS IE 4独自仕様です。「left」か「right」いずれかで組んでください。
もし３カラムデザインをしたい場合は、一例ですが、
｜￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣｜
｜｜￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣｜　　　　　　　　　　　　　　｜
｜｜｜￣￣￣￣￣￣￣｜￣￣￣￣￣￣￣｜｜｜￣￣￣￣￣￣￣｜｜
｜｜｜div　　　　　　　　　｜div 　　　　　　　　　｜｜｜div　　　　　　　　　｜｜
｜｜｜class="left"　　　｜class="center"　　｜｜｜class="right"　 ｜｜
｜｜｜＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜｜｜＿＿＿＿＿＿＿｜｜
｜｜　　　div class="content"　　　　　　　　　　　｜　　　　　　　　　　　　　｜
｜｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜　　　　　　　　　　　　　　｜
｜　　　　div class="wrapper"　　　　　　　　　　　　　　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　　　　　　
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜

div.left {
float: left;
width: 195px
}
div.center {
float: right;
width: 425px
}

/* 上の左側２列をグループにしたブロック要素
　 　　　　　　　　これを「左１列」とみなし、「float:left」する */
div.content {
width: 620px;// 195+425=620
float: left;
}

div.right {
float: right;
width: 195px;
}

/* 全体を囲むラッパークラス */
div.wapper {
float: right;
width: 825px;
}

※　尚、各ブロック要素に「左右方向のmargin、padding、border」
を指定する場合は、widthは、それらの値を引いた数値で指定してください

また、＃layout　ブロック要素をセンタクリングしたいのであれば、
親要素に「text-align：center;」し、この要素に
「margin-left:auto;margin-right:auto;」を定義すれば、水平方向(左右)でセンタリンクされます。

回答No.2

ski1111111

訂正です。
現象は「重なり」ではなく「食い込み」ですね。

であれば、position: absolute; は他へ影響を与えないので原因にはなりえないです。
センターとプラグインの親要素の幅を
センターとプラグインのそれぞれの幅の合計が
オーバーしている可能性はあると思います。

また、おすすめツールですが、
firefoxに関しては、「Firebug」という便利なフリーのアドオンがあります。
ダウンロードすると、cssの解析を視覚的に行える便利なツールです。
使い方は直感的にわかると思いますが、ソースの解析モードにするには
左にある「調査」というボタンをクリックします。
以下からダウンロードできます。
https://addons.mozilla.org/ja/firefox/addon/1843

補足

本当に丁寧な回答で感激しています！ありがとうございます！
CSSの方はこちらになります。

@charset "EUC-JP";

*{
margin:0px;
padding:0px;
color:#000;
font-size:10pt;
line-height:160%;
scrollbar-face-color: #CCCCCC;
scrollbar-shadow-color: #F0F0F0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color: #FFFFFF;}
body{
text-align:center;
background:#FFF;}
h1{
font-size:20pt;
color:#000;
font-weight:normal;
text-align:center;}
img{
border:0px;}

/* ---■レイアウト■ --- */
#layout{
margin:0px 0px 0px 0px;
text-align:center;
width:825px;}
#header{
margin:10px 0px 10px 0px;
padding:10px;
border:1px solid #CCC;
background:#F9F9F9;}
#title{
font-weight:normal;
text-align:center;}
.banner{
clear:both;
margin:0px 0px 10px 0px;
width:470px;
height:60px;
text-align:center;
background:#F0F0F0;}

#contain{
clear:both;}
#left{
float:center;
font-size:12pt;
width:425px;}
#left-l{
float:left;
width:195px;
background1:#cccccc;}
#left-cen{
float:center;
width:425px;
background1:#cccccc;}
#left-cenga{
float:center;
width:825px;
background1:#cccccc;}
#right{
float:right;
width:195px;
background1:#cccccc;}
#footer{
clear:both;
width:825px;
margin:10px 0px 10px 0px;
padding:10px;
font-size:8pt;
background:#F0F0F0;}
#footer a{
font-size:8pt;}

/* ---■メニュー■ --- */
.me-t{
padding:0px 5px 0px 5px;
font-size:10pt;
text-align:left;
border-top:3px solid #CCCCCC;
border-left:2px solid #CCCCCC;
border-right:2px solid #CCCCCC;
background:#F9F9F9;}
.me-box{
margin:0px 0px 10px 0px;
padding:5px;
font-size:10pt;
text-align:left;
border:2px solid #CCCCCC;}
.me-box-cen{
margin:0px 0px 10px 0px;
padding:5px;
font-size:10pt;
text-align:center;
border:1px solid #CCCCCC;}

/* ---■メニュー2■ --- */
.meo-t{
padding:0px 5px 0px 5px;
font-size:14pt;
text-align:center;
border-top:3px solid #CCCCCC;
border-left:2px solid #CCCCCC;
border-right:2px solid #CCCCCC;
background:#F9F9F9;}
.meo-box{
margin:0px 0px 10px 0px;
padding:5px;
font-size:14pt;
text-align:left;
border:2px solid #CCCCCC;}
.meo-box-cen{
margin:0px 0px 10px 0px;
padding:5px;
font-size:12pt;
text-align:center;
border:1px solid #CCCCCC;}

/* ---■記事■ --- */
.offer-top{
margin:0px 0px 0px 0px;
padding:12px;
font-size:12pt;
text-align:center;
border-top:2px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:#FFFFFF;}

.index-top{
margin:0px 0px 15px 0px;
padding:12px;
font-size:12pt;
text-align:left;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:#F9F9F9;}
.kizi-t{
margin:0px 0px 0px 0px;
font-size:12pt;
text-align:left;
color:#000000;
font-weight:bold;
border-top:2px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:#F0F0F0;}
.kizi-t a{
font-size:12pt;
color:#000000;
text-decoration:none;}
.kizi-t a:link{
font-size:12pt;
text-decoration:none;}
.kizi-t a:visited{
font-size:12pt;
text-decoration:none;}
.kizi-body{
margin:5px 0px 0px 0px;
font-size:11pt;
text-align:left;}
.kizi-more{
text-align:right;}
.kizi-info{
margin:0px 0px 15px 0px;
text-align:right;
border-top:1px solid #F0F0F0;}

.cmt-box{
margin:0px 0px 15px 0px;
text-align:left;
border-top:1px solid #F0F0F0;}

HTMLの方はブログのアドレスが載ってしまっているので
ちょっと公の場で公開することをためらっております。

回答No.1

ski1111111

こんにちは。

・どのような場合にブログ全体が左端へずれるのでしょうか？
→
要素のアライメント定義は、中央寄せにしたい要素自体に、
「margin: 0 auto;」を定義する必要があります。

↑margin属性の
定義一番目：上下方向(上記の例の場合は、上下の親要素に対しての余白は「0」ということになります)、
定義二番目：左右方向の余白については、親要素の定義に従う「auto」を指定します。

また、すぐ上の親要素に対し
「text-align: center;」を指定します。

------------------------------------------------------------
例[html]
<div class="wrapper"><p class="content">テストテスト</p></div>

例[css]
div.wrapper {
width: 650px;
text-align: center;
}

p.content {
margin: 0 auto;
}
------------------------------------------------------------

・またどのような場合に左プラグインにセンターの部分が重なるのでしょうか？
→
例えば、「position: absolute;」が定義されていると、
他の要素に、その要素は影響を与えないことになりますので、
他の要素と重なる可能性はあると思います。
隣接要素の食い込み現象については、ソースを解析しないと原因の特定は難しいです。

差し支えなければ、htmlやcssなどのソースを提示していただければ
もう少しピンポイントな情報は提供できると思います。

個人的に感じていることですが、cssのブラウザごとの適用については
IEは親要素、子要素といった各要素間の親子関係による定義の適用優先順位の認識が弱いと思います。
また、IE6などでは、border 1pxのときの点線・破線の出しわけができなかったり、floatした方向のmarginが「倍」になってしまう現象など、
バグが結構あると思います。