Problemas com browsers

[MTavares]

Caros colegas,

estou desenvolvendo um site de vendas para um cliente meu, mas confesso que layout não é bem o meu forte. Por isso estou tendo sérias dificuldades em implantar o layout baseado em Tableless. No IE 9.0, Firefox e Chrome, aparece perfeitamente, mas quando abro o site no Opera por ex os ícones de "Meu login", "Meus pedidos" e "Sac" não aparecem.... outra coisa, quando visualizo o site no IE 8.0 ou inferior deforma o layout todo. Vou disponibilizar o código CSS e o endereço do site. Quem é fera em Tableless, peço uma ajuda para solucionar esse problema, pois acredito que tenha que criar o tal "hack" (eu acho que é assim que escreve)...

SITE

http://www.mamulengobrinquedos.com.br/loja/

CÓDIGO CSS

body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-top:0px; background-color:#67BFC9;}
.fundo-topo{ background-image:url(../imagens/fundo-topo.png); margin:-50px 0 0 -10px; position:absolute; height:147px; width:100%; }
input{ border:1px #000 solid; }
.principal{margin:50px auto; width:1024px;}
.conteudo{ position:absolute; height:1050px; background-color:#FFF;  border:1px solid #000; }
.topo{ width:100%; height:104px;  background-color:#FEE300; } 
.topo-logo{ background-image:url(../imagens/logo.jpg); float:left; width:312px; height:104px; }
.topo-icones{position:absolute; margin:-75px 0 0 720px; width:500px; }
.topo-junta-icones{ width:390px; display:table; margin:17px 0 0 40px;}
.icone-login{ width:128px; height:70px; float:left; }
.icone-pedido{ width:131px; height:70px; float:left; }
.icone-sac{ width:124px; height:70px; float:right;  }
.topo-login{ width:210px; height:104px; float:right; margin-top:0; background:url(../imagens/carrinho.png) no-repeat right;  }
.valor-carrinho{ width:110px; float:right; color:#000; margin:50px 0 0 -100px; font-size:16px; color:#FFFFFF; }
.botao-login{ width:50px; height:80px; background-color:#FFFFFF; cursor:pointer; }
.principal-meio{ width:99%; height:20px; margin:10px 0 0 10px; }  
.saudacao-meio{ float:left; width:300px; }
.data-meio{ float:right; width:300px; text-align:right; }
.busca-site{ width:1024px; height:30px; background-image:url(../imagens/fundo-busca.jpg); color:#FFFFFF; }
.buscar{ margin:2px 0 0 10px; width:97%; height:20px; font-weight:bold; position:absolute; }
.rodape { position:absolute; bottom:0; width:1024px; height:100px; margin:0 auto; background-color:#FEE300; }
.forma-pagamento{ float:left; width:500px; }
.dados-site{ float:right; width:380px; height:80px; margin:-70px 0 0 0; text-align:left; }
.contato-site{ width:500px; text-align:left; margin:20px 0 0 0; }
.centro-conteudo{ width:100%; position:relative; height:100%; }
.menu-conteudo{ width:135px; float:left; border:1px solid #000; background-color:#E15519; color:#FFF; text-align:center; font-weight:bold; height:800px; }
.central-conteudo{ width: 860px; margin:0 0 0 140px; position:absolute; float:right;  }
.produtos{ width:100%; }
.texto-destaque{ font-size:18px; color:#999; text-align:left; width:100%; height:40px; margin-top:10px; }
.produto{ width:100%; height:100%; position:absolute; }
.foto-produto{ float:left; width:239px; }
.destaque-produto{float:right; width:600px;}
.fundo-topo-inferior{ background-image:url(../imagens/fundo-topo-inferior.png);margin:1080px 0 0 -10px; position:absolute; height:147px; width:100%; }

abraços e obrigado!

Editado Julho 25, 2011 por kuroi
Adicionar tag CODE e link