IEバックグラウンド表示の問題

Question

教会用のウェブサイトを作成していますが、IEで正しく表示するのに問題があります。私のdiv＆quot; sidebox＆quot;バックグラウンドの位置を＆quot; margin：0 auto;＆quot;でオーバーライドしています。背景が右側ではなく中央に表示されるため、サイトが右側に移動します。

コードは次のとおりです。

.sidebox {
margin: 0 auto;
background-image: url(images/bg-container-right.jpg);
background-repeat: no-repeat;
background-position: bottom right !important;
position: absolute;
left: 0px;
width: 960px;

}

.boxhead {
    background-image: url(images/bg-container-top.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    height: 37px;
}

.boxbody {
    background-image: url(images/bg-container-left.jpg);
    background-repeat: no-repeat;
    background-position: bottom left !important;
    width: 25px !important;
}

.boxtopcorner {
    background-image: url(images/bg-container-top-right.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 25px;
    height: 37px;
}

<div class='sidebox' style='border: 1px solid;'>
I'm in the box
    <div class='boxhead'>
        <div class='boxtopcorner'></div>
    </div>
    <div class='boxbody' style='height: 750px;'>
        <!-- Content Goes Here -->
    </div>
</div>

以下は、実行中のサイトへのリンクです。 FFとSafariで問題なく実行できますが、IEでは正常に動作しません。上記の私のコードはコンテンツなしであり、それを削除しても問題は解決しません。 実行中のページ

Answer 1

IE開発者ツールバーを介して見ると、.sideboxに中央揃えを提供します。それを左に変更すると修正されるようです。

.sidebox {
  ...
  text-align: left;
}

Answer 2

背景画像を切り刻む方法はまったく異なります。

1. 角の丸い影の上下の画像を作成します。これらを上部と下部の背景として使用します（あたかもそれがまだ明らかではないかのように）。
2. 両側の影に「長い」1pxの高さの画像を作成します。これをページのコンテンツ領域全体の背景に使用します。
3. 絶対配置を使用しないでください。フロートを使用して同じレイアウトを作成できます。例：

  

.container {幅：960px;マージン：0自動; }

.header { width: 960px; height: 20px; background: url(top.jpg) no-repeat; }

.footer { width: 960px; height: 20px; background: url(bottom.jpg) no-repeat; }

.body { width: 960px; background: url(body.jpg) repeat-y; }

<div class='container'>

  <div class='header'>&nbsp;</div>

  <div class='body'>

ここにコンテンツがあります...絶対配置の代わりにフロートを使用して列を作成します。

  </div>

  <div class='footer'>&nbsp;</div>

</div>