1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Incompatibilidade de Navegadores

Boa tarde, estou implementando uma galeria de imagens utilizando CSS, no entanto a aplicação roda normalmente no FireFox já no Chrome as imagens não são visualizadas somente as previews. Alguem sabe como resolver?

HTML



<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- Usado para que a pagina se adaptar aos diferentes tamanhos de resolucao -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

        <title>C&acirc;mara Municipal de &Oacute;leo</title>

        <link rel="stylesheet" type="text/css" href="<c:url value="/css/estilo.css"/>"/> 
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/reset.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/slideshow.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/responsive.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/galeriaDeFotos.css"/>"/>

    </head>

    <body>

        <!-- Header -->

        <div id="header" id="brasao">

            <div id="topo" class="conteudo">
                <!--<img src="<c:url value="/imagens/brasao_oleo_p.png"/>">-->
                <a class="logo" href="#">
                    C&acirc;mara Municipal 
                    de &Oacute;leo
                </a>

                <a class="botao-menu" href="#">
                    Menu
                </a>

                <ul class="nav">
                    <li><a href="http://camaraoleo.sp.gov.br/">In&iacute;cio</a></li>
                    <li><a href="#">C&acirc;mara</a></li>
                    <li><a href="#">Acompanhe</a></li>
                    <li><a href="#">Legisla&ccedil;&atilde;o</a></li>
                    <li><a href="#">Editais</a></li>
                </ul>

            </div>

        </div>

        <div id="divulgacao">

            <div class="conteudo">

                <!-- COMEÇA A IMPLEMENTAÇÃO DO JQUERY -->
                <div class="gallery" align="center">
                    <h3 id="tituloGaleria">GALERIA DE FOTOS</h3><br/><br/><br/>

                    <div class="thumbnails">


                        <img onmouseover="preview.src = img1.src" id="img1" src="<c:url value="/imagens/slide_show/oleo_1.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img2.src" id="img2" src="<c:url value="/imagens/slide_show/oleo_2.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img3.src" id="img3" src="<c:url value="/imagens/slide_show/oleo_3.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img4.src" id="img4" src="<c:url value="/imagens/slide_show/oleo_4.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img5.src" id="img5" src="<c:url value="/imagens/slide_show/oleo_5.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img6.src" id="img6" src="<c:url value="/imagens/slide_show/oleo_6.jpg"/>" alt="Imagem não carregada"/>
                        <img onmouseover="preview.src = img7.src" id="img7" src="<c:url value="/imagens/slide_show/oleo_7.jpg"/>" alt="Imagem não carregada"/>


                    </div><br/>

                    <div class="preview" align="center">
                        <img id="preview" src="<c:url value="/imagens/slide_show/oleo_1.jpg"/>" alt="Imagem não carregada"/>
                    </div>

                    <br/>
                </div>


                <!-- TERMINA A IMPLEMENTAÇÃO DO JQUERY -->
            </div>

        </div>

        <!-- Rodape -->

        <div id="footer">

            <div class="conteudo">

                <ul class="nav">
                    <li><a href="http://camaraoleo.sp.gov.br/">In&iacute;cio</a></li>
                    <li><a href="#">C&acirc;mara</a></li>
                    <li><a href="#">Acompanhe</a></li>
                    <li><a href="#">Legisla&ccedil;&atilde;o</a></li>
                    <li><a href="#">Editais</a></li>
                </ul>

                Desenvolvido por <a href="http://micromap.com.br" target="_blank"> Micromap &reg; - Soluções em Informática </a>

            </div>

        </div>

    </body>
</html>

CSS


body {
    background: #222;
    margin-top: 20px;
}

h3 {
    font-family: Verdana;
}

.thumbnails img {
    height: 50px;
    border: 4px solid #555;
    padding: 1px;
    margin: 0 10px 10px 0;
}

.thumbnails img:hover {
    border: 4px solid #00ccff;
    cursor:pointer;
}

.preview img {
    border: 4px solid #444;
    padding: 1px;
    height: 500px;
}
  • coloque o código junto a pergunta para analisarmos.

    Scotto   16 de jul de 2013
  • Coloca o código para ver o que está de errado. Sem o código, difícil saber.

    pedro_alves   16 de jul de 2013
  • Código postado galera.

    Bruno Ramos   16 de jul de 2013
  • micromap ta dando mto trampo ai brunao hehe, ja resolveu ?

    Douglas   16 de jul de 2013
  • dupliquei o post sem querer...

    Douglas   16 de jul de 2013
Mostrar todos os 8 comentários>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags css html ou faça a sua própria pergunta.