Jump to content
FabianoSouza

Tag IMG aparecendo com borda no Firefox

Recommended Posts

Pessoal, vejam meu print. A tag img é criada "dinamicamente" (com JavaScript). Não sei é por isso que se cria uma espécie de borda em torno da tag.

Como removo isso??

Essa borda só aparece no Firefox (no Edge não aparece).

 

Meu CSS já tem isso

 

a img { border: none;}

 

 

image.png.eb15884244995d47c7a27d8028e7c426.png

Share this post


Link to post
Share on other sites

Acredito que sua melhor alternativa é abrir o inspetor do firefox, e inspecionar essa imagem em questão.

Pela ferramenta você poderá editar a folha de estilo temporariamente, assim poderá com testes descobrir o que de fato está acontecendo.

Share this post


Link to post
Share on other sites

@Omar~ Estou tentando como sugeriu...

 

Acho que descobri o problema.

Essa borda estranha aparece na tag IMG porque não defini o atributo SRC da tag.

A imagem (bonequinho Cinza) aparece porque defini pelo CSS o atributo background da tag IMG.

A solução é simples: definir valor (caminho) para o atributo SRC da tag IMG.

 

Acho isso uma "sacanagem"... pois obriga a deixar explicito no Javascript, o caminho da imagem

$img.setAttribute('src', '/imagens/templateFotoPessoa.png')

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kleberaugus
      Vi na internet que para pegar o src de uma imagem se coloca o seguinte código: 
      <form action="/action_page.php">
        <input type="file" name="pic" accept="image/*">
        <input type="submit">
      </form>  
      e isso vai retornar pic="nome do arquivo", o problema é que eu não sei como usar isso com a tag <img> para escolher esse local de arquivo... como eu posso implementar isso? Eu só quero colocar uma imagem qualquer no site através do input file mas não sei como faço...
    • By 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 

    • By BryanSamuel
      Quando eu puxo a imagem ela vem deitada, uma imagem tirada em um Smartphone por exemplo, esse problema não acontece com todas as imagens, mas com as tiradas no meu celular por exemplo são todas. eu puxo somente o link da imagem do banco de dados mysql , a imagem fica salva em uma pasta separada, quando eu abro a imagem na pasta ela está na orientação normal, "em pé".
      Agradeço muito se alguém puder me ajudar.
    • By Evair Peterson
      Boa noite.

      Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.

      Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
      Seguem os códigos HTML e CSS:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html lang="pt-br"> <head>     <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head>   <body>     <div id="main">         <div id="viewport_left" class="viewports">         </div>         <div id="viewport_center" class="viewports">             <img id="imagem_teste" src="imagem_teste_01.jpg">         </div>         <div id="viewport_right">         </div>     </div>     <div id="footer">     </div> </body> </html>  
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 * {     margin: 0;     padding: 0;     text-align: center;     overflow: hidden; } #main {     width: 100%;     margin: 0; } #viewport_left {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     left: 0;     top: 0; } #viewport_center {     min-height: calc(100vh - 25px);     width: calc(100vw - 650px);     margin-bottom: 25px;     border-left: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     background-color: red;     position: absolute;     left: 50%;     top: 50%;         margin-left: calc(((100vw - 648px) / 2)* -1);         margin-top: calc((100vh / 2)* -1);     display: table;     overflow: hidden; } #imagem_teste {     max-height: calc(100vh - 25px);     position: absolute;     width: auto;     height: auto; } #viewport_right {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     right: 0;     top: 0; } #footer {     position: fixed;     bottom: 0;     left: 0;     height: 24px;     width: 100%;     background-color: #333333;     border-top: 1px solid #FFFFFF;     text-align: center;     font-family: Verdana, Geneva, sans-serif;     font-size: 12px;     color: #FFFFFF; }
      Alguém sabe como posso corrigir este problema?
      Desde já agradeço a toda e qualquer ajuda e colaboração.

      Grato, Evair Peterson.
    • By alecram28
      Preciso criar um album de fotos que ao clicar na imagem apareça uma descrição, e ao clicar novamente na imagem a descrição desapareça. 
      Consigo fazer aparecer o texto mas não consigo oculta-lo depois de clicar novamente.
      Outra duvida, coloquei a div texto mas a formatação css que coloco nao aparece.
       
      HTML:
        <body> <h1>ÁLBUM DE FOTOS</h1>   <div class="album"> <img src="foto1.jpg" onclick="mostrarTexto('Descriçao1!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto2.jpg" onclick="mostrarTexto('terbrbrb!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto3.jpg" onclick="mostrarTexto('aaaaaaa!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto4.jpg"onclick="mostrarTexto('bbbbbbbb')" max width="300" max height="300"> </div> <div class="album"> <img src="foto5.jpg" onclick="mostrarTexto('cccccccc')" max width="300" max height="300"> </div>   <div class="album"> <img src="foto6.jpg" onclick="mostrarTexto('dddddddd')" max width="300" max height="300"> </div> <div id= "texto"></div> <div class="album"> <img src="foto7.jpg" onclick="mostrarTexto('eeeeeee')" max width="300" max height="300"> </div> <div class="album"> <img src="foto8.jpg" onclick="mostrarTexto('fffffff')" max width="300" max height="300"> </div> <div class="album"> <img src="foto9.jpg" onclick="mostrarTexto('ggggggg')" max width="300" max height="300"> </div>     </body>  
      CSS:
      html { font-family: Arial, Helvetica, sans-serif   }   h1{ font-family: Arial, Helvetica, sans-serif; color: rgb(117, 170, 231); font-size:2rem; text-align: left; }   .album{ float: left; width: 500px; }   .texto{ font-family: Arial, Helvetica, sans-serif; font-size:2rem; color: rgb(92, 192, 92);   }  
      JS:
      function mostrarTexto(msg) { texto.innerHTML= msg;   }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.