Site abre desconfigurado no Firefox

[sarinhapaes 0]

Boa tarde!

 

Desenvolvi um site que funciona perfeitamente no Chrome e Safari, mas no Mozilla (Firefox) não abre corretamente, só o banner que funciona. Alguém sabe me dizer o motivo e como solucionar o problema?

 

Obrigada!

[angelorubin 142]

Olá,

Poste um link ou trecho do código para podermos lhe ajudar melhor.

[sarinhapaes 0]

http://akmos.com.br

[angelorubin 142]

Bom dia,

 

Vamos tentar por partes, o primeiro erro que vi foi o cadastre-se.

 

O código dele vem de onde? Me parece não ser gerado com html/css, é com js?

<a class="myButton" href="cadastro.html">Cadastre-se</a>

De qualquer forma, a estrutura dele esta entre os outros dois, e creio que seria melhor se estivesse em terceiro.

 

Está assim:

<div class="conteudo">
            	<p class="topo-telefone"> (31) 3351-0096 <a title="" href="#"> suporte@akmos.com.br </a> </p>
                   <a class="myButton" href="cadastro.html">Cadastre-se</a>
                <ul class="redes-sociais">
                    <li>
                        <a title="" target="_blank" href="http://www.facebook.com/AkmosLife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/facebook.png">
                            <img title="" alt="" src="imagens/redesocial/facebook.png">                        
                        </a>
                    </li>
                     <li>
                        <a title="" target="_blank" href="https://twitter.com/akmoslife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/twitter.png">
                            <img title="" alt="" src="imagens/redesocial/twitter.png">                        
                        </a>
                    </li>
                    <li>
                        <a title="" target="_blank" href="http://www.youtube.com/user/akmoslife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/youtube.png">
                            <img title="" alt="" src="imagens/redesocial/youtube.png">                        
                        </a>
                    </li>
                   
                    <li>
                        <a title="" target="_blank" href="http://pinterest.com/akmos/"> 
                            <img title="" alt="" src="imagens/redesocial/hover/pinterest.png">
                            <img title="" alt="" src="imagens/redesocial/pinterest.png">                        
                        </a>
                    </li>
                    <li>
                        <a title="" target="_blank" href="http://www.slideshare.net/AkmosLife2"> 
                            <img title="" alt="" src="imagens/redesocial/hover/slideshare.png">
                            <img title="" alt="" src="imagens/redesocial/slideshare.png">                        
                        </a>
                    </li>
                </ul>
            </div>

Acho que assim (como abaixo e depois dos ícones das redes sociais, na linha 37) ele estaria na ordem natural que você quer:

<div class="conteudo">
            	<p class="topo-telefone"> (31) 3351-0096 <a title="" href="#"> suporte@akmos.com.br </a> </p>
                   <!-- SAIU DAQUI-->
                <ul class="redes-sociais">
                    <li>
                        <a title="" target="_blank" href="http://www.facebook.com/AkmosLife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/facebook.png">
                            <img title="" alt="" src="imagens/redesocial/facebook.png">                        
                        </a>
                    </li>
                     <li>
                        <a title="" target="_blank" href="https://twitter.com/akmoslife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/twitter.png">
                            <img title="" alt="" src="imagens/redesocial/twitter.png">                        
                        </a>
                    </li>
                    <li>
                        <a title="" target="_blank" href="http://www.youtube.com/user/akmoslife"> 
                            <img title="" alt="" src="imagens/redesocial/hover/youtube.png">
                            <img title="" alt="" src="imagens/redesocial/youtube.png">                        
                        </a>
                    </li>
                   
                    <li>
                        <a title="" target="_blank" href="http://pinterest.com/akmos/"> 
                            <img title="" alt="" src="imagens/redesocial/hover/pinterest.png">
                            <img title="" alt="" src="imagens/redesocial/pinterest.png">                        
                        </a>
                    </li>
                    <li>
                        <a title="" target="_blank" href="http://www.slideshare.net/AkmosLife2"> 
                            <img title="" alt="" src="imagens/redesocial/hover/slideshare.png">
                            <img title="" alt="" src="imagens/redesocial/slideshare.png">                        
                        </a>
                    </li>
                </ul>
<a class="myButton" href="cadastro.html">Cadastre-se</a> <!-- ENTROU AQUI -->
            </div>

Agora só resta saber como ele é gerado, para acertar o css dele, e ai partimos para o próximo.

 

Minha idéia foi a seguinte:

 

Veja que coloquei o container cadastre-se depois dos icones das redes sociais - http://angelorubin.besaba.com/CSS/Akmos/

 

Já resolvemos algo, mais ainda acho que a melhor solução seria algo assim - http://imageshack.us/a/img62/7960/mygj.png

[sarinhapaes 0]

Então, é css mesmo! O código é esse:

 

    #direita .myButton {
		float:right;
		margin-left:10px;
		margin-bottom:10px;
        -moz-box-shadow: 0px 1px 0px 0px #fff6af;
        -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
        box-shadow: 0px 1px 0px 0px #fff6af;
        
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
        background-image:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
        background-image:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
        background-image:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
        background-image:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
        background-image:-linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
        
        background-color:#ffec64;
        
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        
        border:1px solid #ffaa22;
        
        display:inline-block;
        color:#333333;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:5px 8px;
        text-decoration:none;
        
        text-shadow:0px 1px 0px #ffee66;

        
    }
     #direita .myButton:hover {
        
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
        background-image:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
        background-image:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
        background-image:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
        background-image:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
        background-image:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
        
        background-color:#ffab23;
    }
    #direita  .myButton:active {
        position:relative;
        top:1px;
    }

 

 

Utilizando um validador de css, vi esse erro: Erro de valor : background-image linear-gradient(to bottom,#ffab23 5%,#ffec64 100%) não pode ser usada com esta versão de CSS : css21 )

 

Pode ser esse o problema?

[angelorubin 142]

Pelo jeito você resolveu, já esta funcionando aqui! só faltou o confira embaixo ....

[sarinhapaes 0]

Então, em partes resolvi... mas ainda não entendi o porque.... o mozilla não aceita o css do style.css ai criei outro css e funcionou... mas ainda assim, algumas coisas não funcionam...