JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Código diferente para navegadores

Código diferente para navegadores

2 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Código diferente para navegadores Empty Código diferente para navegadores Ter 24 Set 2013, 12:37 pm

Convidado

avatar
Convidado

Notem o código abaixo:

Código:

.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
margin-left: -32px!important;
margin-top: -17px!important;
position: absolute;
}
O efeito dele são nas imagens das categorias, no Google Crhome, fica tudo certo. mais quando mudo para o mozila as imagens ficam fora de lugar, sendo para ficarem certas utilizar o código abaixo:

Código:

.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
Notem que são os mesmos códigos, mais com valores diferentes.
como resolverei isso:

caso usem o google crhome, fosse utilizado o primeiro código.

Caso utilizem o mozila que utilizasse o segundo código

meu fórum:

http://somosmugiwara.forumeiros.com/

2Código diferente para navegadores Empty Re: Código diferente para navegadores Ter 24 Set 2013, 1:09 pm

Legolas

Legolas
Moderadores
Moderadores

Sim, isso realmente ocorre pelo fato dos navegaores Mozilla e Chrome terem modos diferentes de leitura.

Para resolver isso você tem que aplicar esse css diferente para cada navegador, e pra isso basta fazer da seguinte maneira:

Código:
<!––[if  Moz ]>

.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
<![endif]––>

http://aden.rpgwars.net

3Código diferente para navegadores Empty Re: Código diferente para navegadores Ter 24 Set 2013, 3:43 pm

Convidado

avatar
Convidado

Não resultou meu caro....

apareceu a seguinte mensagem na folha CSS.


Seu CSS foi atualizado
Nota:
As balizas html geram erros na folha de estilo.
Uma correção acabou de ser feita visando suprimir as balizas html que foram adicionadas à folha de estilo.
e o código que você me passou, coloquei assim na Folha CSS:

Código:

<!––[if  Moz ]>

.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
<![endif]––>
e ficou assim:

Código:

.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
note que sumiu:


<!––[if Moz ]>
<![endif]––>

4Código diferente para navegadores Empty Re: Código diferente para navegadores Ter 24 Set 2013, 3:52 pm

Legolas

Legolas
Moderadores
Moderadores

Então faça o seguinte: vá ao seu template overall_header e antes de </head> cole o code assim:

Código:

<!––[if  Moz ]>
<style>
.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
</style>
<![endif]––>

http://aden.rpgwars.net

5Código diferente para navegadores Empty Re: Código diferente para navegadores Ter 24 Set 2013, 10:45 pm

Convidado

avatar
Convidado

Legolas o mesmo funcionou no google chrome, ou seja, mudando as imagens das categorias de posição. queria que este código acima funcionasse apenas no mozila...

6Código diferente para navegadores Empty Re: Código diferente para navegadores Ter 24 Set 2013, 11:11 pm

Legolas

Legolas
Moderadores
Moderadores

Bom, se essa condição não funcionou, acredito que somente através de javascript. Vou ver se posso fazer algo aqui e te retorno.

http://aden.rpgwars.net

7Código diferente para navegadores Empty Re: Código diferente para navegadores Qua 25 Set 2013, 8:07 am

Convidado

avatar
Convidado

ok Legolas, ficarei no aguardo.

8Código diferente para navegadores Empty Re: Código diferente para navegadores Qua 25 Set 2013, 6:21 pm

Legolas

Legolas
Moderadores
Moderadores

Olá. Bom, eu tinha quase certeza que a condição que mostrei funcionaria, pois eu já havia usado isso uma vez. Mas como não funcionou, nós podemos tentar forçar o css no mozilla através do prefixo.

Coloque o código abaixo no seu template overall_header antes de </head>

Código:
<style type="text/css">
@-moz-document url-prefix() {
.status img, .status img[alt="Este Tópico está bloqueado. Você não pode editar as mensagens ou responder."], .status img[alt="Novas mensagens"], .status img[alt="Não há novas mensagens"] {
    margin-left: -17px !important;
    position: absolute;
    margin-top: -17px !important;
}
}
</style>
Veja se resulta. Wink

http://aden.rpgwars.net

9Código diferente para navegadores Empty Re: Código diferente para navegadores Qua 25 Set 2013, 7:13 pm

joelson0007

joelson0007
Moderadores
Moderadores

@-moz-document url-prefix() Esse é novo pra mim

10Código diferente para navegadores Empty Re: Código diferente para navegadores Qua 25 Set 2013, 8:34 pm

Legolas

Legolas
Moderadores
Moderadores

joelson0007 escreveu:@-moz-document url-prefix() Esse é novo pra mim
Sim, essa é uma regra (rule) específica do Mozilla. Eu tinha me esquecido dela, mas é bem útil.

http://aden.rpgwars.net

11Código diferente para navegadores Empty Re: Código diferente para navegadores Qui 26 Set 2013, 8:19 am

Convidado

avatar
Convidado

Ficou perfeito Legolas...

Valeu cara...

Resolvido

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Código diferente para navegadores

Permissões neste sub-fórum
Não podes responder a tópicos