problema de exibição de fundo IE

Question

Estou criando um site para minha igreja e eu estou tendo problemas tornando-se apresentar bem no IE. Parece que a minha div "sidebox" está tendo a sua posição de fundo substituído pelo "margin: 0 auto;" como pano de fundo exibe centrado em vez de à direita, que está mudando o site para a direita.

Aqui está o código:

.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>

Abaixo está um link para o site funcionando. Você pode vê-lo correr muito bem em FF e Safari, mas não no IE. Meu código acima é sem o conteúdo e removê-lo não resolve o problema. página Correndo

Answer 1

Olhando para ele através da barra de ferramentas do desenvolvedor IE, dá .sidebox um alinhamento de centro. Alterar que a esquerda parece corrigi-lo.

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

Answer 2

Gostaria de ter uma abordagem totalmente diferente de como você picado a imagem de fundo.

1. Criar um top e uma imagem de fundo para a sombra com cantos arredondados. Use-os como fundos para a parte superior e inferior (como se isso não era óbvio já).
2. Criar um 'long' 1px alta imagem para a sombra dos dois lados. Use-o para o fundo de toda a área de conteúdo para a página.
3. Tente não usar o posicionamento absoluto. O mesmo esquema pode ser criado usando carros alegóricos. Por exemplo:

.container {width: 960px; margin: 0 auto; }

.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'>

Conteúdo vai aqui ... uso flutua para criar colunas em vez de posicionamento absoluto.

  </div>

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

</div>