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 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>; } }  
    • Por gustavopc123
      Meu site diyjogos fiz com html e css, e acho parece que está faltando alguma coisa, alguém poderia me auxiliar, minha dúvida é se da pra fazer um formulário de contato com html e css e que realmente funcione (Obs: Não tenho hospedagem é tudo com codigos, sem php)
       
      Alguem poderia me ajudar ?
       
      Da uma olhada no site por favor.
    • Por marcosrosario
      Eu estou fazendo uma página para faculdade que só pode ser usado HTML e CSS, e nessa página eu gostaria de ter um scrolls, Porém, ao invés de usar o scroll do mouse, usar um botão dentro da própria página levando ela ao conteúdo desejado. 
       
      No caso, a página seria uma só e teriam algumas camadas, a camada da página inicial que conteria todos os botões levando a todas as outras camadas, camada de baixo com algum conteúdo, outra camada com outro conteúdo... Como posso fazer? 
       
      Além de querer saber como criar os scrolls, queria saber como criar backgrounds separados, página inicial de uma cor, conteúdo de outra, assim como no site. 
      Desde já, agradeço. 
       
      Site de exemplo: arcadis
×

Informação importante

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