Site desfigurado no IE

Bio Shadow

Bio Shadow

Banido
Passa-se o seguinte, o meu site funciona (quase) perfeitamente no Firefox, o problema é quando o abro com o IE, desfigura-se por completo, desde os rollovers à própria estrutura deste.

Aqui está o site, de momento só funciona no Firefox e a resolução igual ou superior a 1024*768:


http://www.biomachina.net/Portfolio/biomachina.html
http://www.biomachina.net/Portfolio/webdesign.html
http://www.biomachina.net/Portfolio/logotypes.htm
Stylesheet: http://www.biomachina.net/Portfolio/stylesheet.css

Outra coisa que não está a funcionar é a galeria em javascript, supostamente devia fazer scroll automático com o passar do cursor mas por alguma razão só funciona depois de eu fazer resize ao browser.

Alguma alma caridosa me ajuda com isto?
 
Última edição:
É um problema para todos os webdesigners, incluíndo eu. Vou dar uma apreciação no site e já posto qualquer coisa. :)
 
Se calhar já sabes isso (mas então não sei como chegaste aqui...): o desenvolvimento de um site deve ser acompanhado desde o início com visualizações frequentes das páginas nos browsers mais usados, para garantir que as soluções de design escolhidas são compatíveis nos vários browsers. É que é muito mais difícil de corrigir agora. Fazer o desenvolvimento completo (ou quase) de um site para Firefox (15% dos visitantes) e não verificar se o design implementado funciona em IE (85% dos visitantes) é muito trabalho pela janela fora.

Até mesmo código validado em HTML ou XHTML pode ter comportamentos diferentes em browsers diferentes. Se uma solução visual pode ser implementada de várias maneiras então há que escolher a maneira com resultados mais uniformes nos diferentes browsers. Muita gente borrifa-se nisso... e faz sites para IE.

Eu aconselho-te a separares o código por secções (ou partes mais simples) e verificares o que está a provocar as diferenças de comportamento. Quando encontrares dúvidas específicas vai ser mais fácil encontrar uma solução na Internet.
 
Descobri onde está o erro, estes divs estão a arrastar o conteúdo para baixo no IE, no opera e firefox funcionam perfeitamente:

Se eu remover este div o site (página inicial, biomachina.htm) é apresentado sem erros de posicionamento:

Código: 
#graphic {
   margin: 0;
   padding: 0;
   display: block;
   width: 538px;
   height: 600px;
   float: left;
   background: url("images/biomachina_08.jpg");
   }
Código: 
<div id="graphic"></div>
Nas restantes páginas também são os divs daquela área que estão a arrastar o resto do site para baixo:

Código: 
/* PORTFOLIO BUTTONS */

/* LOGOTYPES BUTTON */
a.logotypes, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(images/biomachina_menu.jpg);
background-repeat: no-repeat;
width: 55px;
height: 600px;
}

a.logotypes:link, a.button:visited {
color: #002577;
}
a.logotypes:hover, a.button:active {
background-position: -163px 0px;
color: #FF7200;
}

/* WEBDESIGN BUTTON */
a.webdesign, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(images/biomachina_menu.jpg);
background-repeat: no-repeat;
background-position: -56px 0px;
width: 55px;
height: 600px;
}

a.webdesign:link, a.button:visited {
color: #002577;
}
a.webdesign:hover, a.button:active {
background-position: -219px 0px;
color: #FF7200;
}

/* OTHERPROJECTS BUTTON */
a.otherprojects, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(images/biomachina_menu.jpg);
background-repeat: no-repeat;
background-position: -112px 0px;
width: 55px;
height: 600px;
}

a.otherprojects:link, a.button:visited {
color: #002577;
}
a.otherprojects:hover, a.button:active {
background-position: -275px 0px;
color: #FF7200;
}
Código: 
<div id="logotypes"><a href="javascript:return false;" class="logotypes" id="buttonOK"><span class="icon"></span></a></div>
<div id="webdesign"><a href="javascript:return false;" class="webdesign" id="buttonOK"><span class="icon"></span></a></div>
<div id="webdesign"><a href="javascript:return false;" class="otherprojects" id="buttonOK"><span class="icon"></span></a></div>
Se eu remover estes divs as posições dos restantes divs voltam ao normal.

Quanto aos erros nos butões, ainda não percebi onde está o problema mas vou tratar disso.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo