Retire a propriedade display: inline-block; dos IDs #bloco-slider e #menu-esquerdo; não acho que seja necessário nesse caso.. e acrescente a propriedade float: left em ambos também.
Veja se a imagem está em CMYK ou RGB... CMYK não aparece nos IE 8 e versões anteriores... Qualquer coisa, hospede a imagem em algum site e post o link para vermos...
Problema no HTML.. Repare que uma tag foi fechada duas vezes: <ul class="sub-menu">
<li class="menu-item"><a href="./servicos_petshop.php">Pet Shop</a></li>
<li class="menu-item"><a href="./servicos_petspa.php">Pet Spa</a></li>
<li class="menu-item"><a href="./servicos_ownerspa.php">Owner Spa</a>
<li class="menu-item"><a href="./servicos_entregasdomicilio.php">Entregas ao Domicílio</a></li>
<li class="menu-item"><a href="./servicos_petaxi.php">Pet Táxi</a></li>
<li class="menu-item"><a href="./servicos_dogcatwalkine.php">Dog & Cat Walkine</a></li>
<!--<ul class="sub-menu">
<li class="menu-item"><a href="home-gallery.php">Gallery Portraits</a></li>
<li class="menu-item"><a href="home-nivo-slider.php">Nivo Slider</a></li>
<li class="menu-item"><a href="home-content-slider.php">Content Slider</a></li>
</ul>-->
</li><-----AQUI O I.E. só é bom para achar problemas no HTML, porque ele deixa bem na cara onde eles estão x-x
Só porque o zoom desconfigura o layout não significa que ele irá aparecer assim para resoluções maiores... Para testar isso, o melhor é trocar a resolução.
Experimente tirar o comentário no topo... se funcionar é porque o IE não está conseguindo ler o cabeçalho "<!DOCTYPE html>" Cabeçalho sempre precisa vir acima de tudo, inclusive de comentários xD testa aí pra ver se é isso mesmo...
Mude o float do .menu2 li para "left" (center não existe) Defina um width para o .menu2 e troque o "margin:0" por "margin: auto" Essa solução não vai funcionar no IE 8 e anteriores se você não tiver colocado um cabeçalho =D
A imagem não aparece porque é um background.. As divs ocupam espaço de acordo com o conteúdo. Como o background não é um conteúdo e a div está vazia, é como se a div estivesse com width e height igual a 0. Para o background aparecer, precisa colocar um valor para width e height.
O código está certo, o problema deve ser o caminho da imagem nessa propriedade: background: url('menu_bg.gif') repeat-x; Se a imagem estiver fora da pasta do CSS, por exemplo, o caminho deve ser ('../menu_bg.gif')
Primeiro tire todos os position:absolute, coloque um valor igual para todos os menus no primeiro valor de padding e um height também para ficar certinho no IE 7 também. Fazendo isso fica certo =D
<div id="header"
<div id="logo">
<img src="images/logo.jpg" />
</div><!--logo-->
</div><!--header-->
<div id="divclear"</div>
</div><!--content--> As divs "header" e "divclear" estão abertas, é só fechar que vai dar certo
#box {width:960px margin:0 auto;}
Faltou ";" depois do 960px
Mas para deixar o site inteiro centralizado, aconselho criar uma div segurando todas as outras, acrescentando o css abaixo:
#principal {
width:1000px;
margin:auto;
}
<body>
<div id="principal">
<!-- Colocar as divs aqui -->
</div>
</body> Experimente fazer assim