Ir para conteúdo
paikoala

site funciona 100% no crhome mas buga css no firefox

Recommended Posts

bom dia galera, tenho um site que montei e hospedei ele no 000WEBHOST. enquanto estava montando ele em localhost funcionava tudo certo tanto no crhome quanto no firefox mas quando subi ele pra hospedagem no firefox ele começou a zuar. Pq o site abre normal no chrome e no firefox ele fica assim:

 

firefox.png

crhome.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Siga esses passos.

1 - Atualize o mozilla para última versão.

2 - Abra o mozilla pressione (crtl + shift + i)

3 - Vá na aba console depois procure pelo um ícone que parece uma pazinha

4 - Marque todas opções. depois feche o mozilla.

5 - Limpe todos dados de navegação.

6 - Abra o mozilla acesse o website e repita o processo do passo 2.

7 - Clique na aba console e veja todos erros e alertas que o mozilla apresenta. Pois são esses os erros que cometeu.

 

Nota: Pode ser difícil localizar os problemas se você utilizou diretamente no html div style="....

Nota 2: O mozilla muito menos exigente quanto aos acertos de regras (porém é muito exigente quando mal feitas)

Nota 3: O mozilla é de longe o melhor browser de desenvolvimento (na verdade é o único que presta para essa finalidade)

Nota 4: É possível configura-lo para não salvamento de dados

A - No canto superior direito clique no menu > opções

B - Clique em Privacidade e Segurança 

C - Localize histórico e selecione Nunca Memorizar.

D - Feche e abra novamente o mozilla.

Compartilhar este post


Link para o post
Compartilhar em outros sites

realmente tenho que concordar com você, o firefox é maravilhoso para desenvolvimento, usava o sublime para digitar codigos mas quase todo o css fiz pelo firefox, ele é fodastico. eu desenvolvi o site usando ele e em localhost ele fazia tudo certo. vou fazer esses passos e ver o que acontece.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Funcionou 100%, ele mostrou um erro que nem sabia que tinha feito, tinha uma url .com comprada e por falta de dinheiro fiquei sem, na parte do css tinha a url .com e não lembrava disso. agora que atualizei para a url gratis do 000webhost ele ta funcionando normal, apesar de ainda não fazer sentido o pq ele ainda sim funcionava no chrome...

Juro que não conhecia essa função do developer do firefox, muito obrigado...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.