1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Site desfigurado no IE

Discussão em 'Web Development' iniciada por Bio Shadow, 19 de Setembro de 2006. (Respostas: 4; Visualizações: 1214)

  1. 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: 19 de Setembro de 2006
  2. MX+

    MX+ Power Member

    É um problema para todos os webdesigners, incluíndo eu. Vou dar uma apreciação no site e já posto qualquer coisa. :)
     
  3. ZoomBang

    ZoomBang Power Member

    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.
     
  4. Bio Shadow

    Bio Shadow Banido

    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.
     
  5. Bio Shadow

    Bio Shadow Banido

Partilhar esta Página