IE comendo as minhas divs

[only LF 0]

Buenas galera, estou desenvolvendo esse site para portfólio, deparei com um erro daqueles que só acontecem no IE.

Em todos outros navegadores, por enquanto funcionando certinho, mas em todas versões do IE, a div geral, menu e bloco direito até estão lá, mas ela desaparece.

 

 

 

O que poderia fazer pra resolver isso?

Publiquei ele para vocês entenderem melhor a dúvida.

http://www.cantinhodadriartesanato.xpg.com.br/

 

Aqui o css do site.

    *{
      margin:0;
      padding:0;
   }

   body {
      background:#FFF url(imagens/bg.gif)
   }
   #topo{
      width:820px;
      height:124px;

      margin:0 auto;
   }
   #topo h1{
      float:left;
      width:296px;
      height:92px;
      }
   #geral{
      width:820px;
      height:650px;
      background:#FFF url(imagens/bg-geral.png)no-repeat bottom;
      margin:0 auto;
   }   
   #menu{
      width:350px;
      height:27px;
      background:#FBD2E1;
      float:right;
      margin:51px 0 0 0;
   }
   #bloco-esquerdo{
      width:586px;
      height:530px;
      background:#123456;
      float:left;
      display:inline;
      margin:17px 0 0 10px;
   }
   #bloco-direito{
      width:200px;
      height:400px;
      background:#FBD2E1 url(imagens/bg-sidebar.jpg)no-repeat bottom;
      float:right;
      display:inline;
      margin:17px 15px 0 0;
   }
   #rodape{
      width:820px;
      height:60px;
      margin:6px auto;
      text-align:center;
   }
   #divclear{
      clear:both;
   }

E o index.html dele.

    <div id="topo"> <!--div topo-->

   </div> <!--fim div topo-->
      <div id="geral"> <!--div geral-->

         <div id="menu"> <!--div menu-->

         </div><!--fim div menu-->
            <div id="bloco-esquerdo"><!--div bloco esquerdo-->

            <p>Nullam sed dictum ipsum. Integer a lectus vitae mi porttitor mollis. Aenean ac vulputate elit. Ut quis felis eu nibh pharetra congue sit amet id dui.

            </div> <!--fim div bloco esquerdo-->
               <div id="bloco-direito"><!--div bloco direito-->
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum semper tellus, interdum fermentum velit accumsan quis. Quisque nec felis est,
            nec tincidunt nisl. Sed ac nunc vitae enim cursus porttitor. Nulla ac purus et tortor mollis sodales eget vel erat. Mauris ut sollicitudin risus.</p>
               </div><!--fim div bloco direito-->
            <div id="divclear"></div>
      </div>
   <div id="rodape"><!--div rodape-->

   </div><!--fim div rodape-->

[Guilherme Müller 0]

Pelo que vi, faltaram as aspas ao redor do endereço da imagem do background:

background: url("endereco da imagem aqui");

 

Fazendo isso deve funcionar.

 

O primeiro passo para ter um site que funcione bem em todos os navegadores é ter o HTML e o CSS válido. Depois você começa a resolver as incompatibilidades, caso existam.

Valide seu HTML no endereço http://validator.w3.org/ e o CSS em http://jigsaw.w3.org/css-validator/

[Julio Graffin 0]

Cara,

 

Esses lances nos IEs acontecem mesmo. Normalmente quando eu faço um layout com margin:auto; eu sempre dou um overflow:hidden; pra forçar o container a exibir o conteúdo nele. Trabalhar com margin:auto; pelo que vi é assim mesmo porque nesse caso ele não "bloca" digamos "rígidamente" o elemento como um float faz, saca?

 

Bem, tenta isso, e claro, sempre valide seu html e css no w3c como o nosso amigo Guilherme disse, às vezes existem coisas simples que passam despercebidas pra a gente. ok?

 

Abraço!