トップページのヘッダーと３カラムの本体のレイアウトがfirefoxで見るとずれてしまいます。
firedoxで見るとヘッダーが本体より長くなり、右に出っ張ります。それを直そうすると今度はＩＥ６でヘッダーが本体より短くなります。
いろいろ試してみて以下のように設定してズレは最小限に食い止めました。必要のないものは省いてます。

div#header { width: 910px; height: 96px; margin: 0 auto; border: solid 1px silver; }

div#container { width: 915px; margin: 0 auto;}
div#leftcolumn { width: 166px; padding-right: 3px; padding-left: 3px; border-left: 1px solid silver; }
div#rightcolumn { width: 166px; padding-right: 3px; padding-left: 3px; border-left: 1px solid silver; }

div#three_maincolumn { float: left; width: 560px; }

しかし依然firedoxでヘッダーが少し出っ張ります。

ＣＳＳのボックスモデルでは、３カラム合計が906ピクセル
ヘッダーが912ピクセルなのでズレても当然ですが
ぴったり合わせると今度はＩＥ６のレイアウトが崩れて
しまいます。

良い方法はないでしょうか？

EC-CUBEバージョン 2.3.3
PHPバージョン PHP 5.1.6
DBバージョン MySQL 5.0.45

Firefoxでの設定を標準にし、IE6用の設定をcssハックを利用して追加しておけばいいのではないでしょうか。

cssハックでググルといろいろ参考になるサイトが出てきますよ。

こんにちは。

takoyakiさんのおっしゃるように、IE6でmarginのバグがありますね。
ハックも多くのサイトで紹介されています。

例えば、下記ですが、
IE6用に、marginのleft、rightの幅を1/2しています。

#メインのcss {
margin:10px 30px 10px 30px;
}
*html body #ie6用のCSS {
margin:10px 15px 10px 15px;
}

IE6用には、前に*html body をつけます。


「ie6 ハック」などのキーワードで検索すると出てくると思います。

ほんとIEは厄介ですね、それでいてシェアは１位だから悩ましい限りです。

マージンに関しては、float: left; や float: right; などフロートを指定した　id or class の中に display: inline; を入れてやると回避できます。

FirefoxやOperaではCSS2の仕様に従ってfloatを指定した要素へのdisplayの指定を無視するので、IE用のcssハックのうちの一つになりますね。

スターハックは私も以前使っていたのですがW3Cでは不自然になるので、マージンに関しては display: inline; を使うようにしています。

tontonさん、takoyakiさんありがとうございます。
一部のcssハックは文法違反になると聞いてたので、
今まで使ったことがなかったです。
でもやはり使うしかないんですね。やってみます。
ありがとうございました。

条件分岐コメント(Conditional Comments)とかはいかがでしょうか?
http://msdn.microsoft.com/en-us/library/ms537512.aspx
http://www.keynavi.net/ja/bugh/comments.html

将来的にどんな動作をするか不明確なハックよりは、将来にわたって安定して使えると思います。(β版で、バグってたことはありましたけど ^^;)

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

条件分岐コメントですか、参考にさせていただきます。
seasoft さんありがとうございます。

お世話になっております

ヘッダー部分だけ当方もズレが生じておりますが

クライアント環境は
IE8.0
IE7.0
firefox

で確認しましたが全部同じです

CSSで
.header {
　　width:1050px;
background-color:#ffffff;
margin:0 auto;
padding-left:20px;
}
div#container {
width: 1100px;
margin: 0 auto;
background-image : url(../img/header/bg_silver.jpg);
background-color: #ffffff;
}
これで同じサイズになってします
背景画像がなぜかズレてしまうのでヘッダーには使えません
2カラム、3カラム共に
メインとフッターはピッタリ合います

対処方法はあるのでしょうか？

----------------
------------------------------------------------------------------------------------------
EC-CUBE 3.0.17
DBサーバー mariaDB
WEBサーバー apache (CentOS)
PHP 7.1
-----------------------...