Float sendo substituído por display:inline

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Float sendo substituído por display:inline

Mensagem por Lucy Elrich Sinskye em 04/03/17, 10:57 pm

Detalhes da questão


Endereço do fórum: http://www.rpghogwarts.org
Versão do fórum: PhpBB3

Descrição


Boa noite
Fazem algumas semanas que notei que algumas postagens em meu RPG tem sofrido uma alteração automática que afeta as postagens dos membros. Esta ocorre quando se utiliza o código HTML float, no que ao enviar a página para pre-visualização ou postagem, a mesma sobre uma alteração automática (o código da postagem demora a carregar um pouco) e quando a postagem aparece a função float foi substituída pela função display:inline .
Como exemplo para que entendam o problema deixo o código original e como a postagem deveria ficar:



Código:
<center><div style="color: #666; text-align: justify; font-size: 12px; font-family:verdana; line-height: 180%; padding:20px; width: 800px; background-color:#070707;"><img src="http://i.imgur.com/n0xboA4.png" width="120px" style="float: left; margin: 25px 20px 10px 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut sapien molestie, gravida metus a, porttitor leo. Duis quis ornare tortor. Cras lobortis nibh a dui lobortis, quis auctor quam sodales. Curabitur et est eu arcu condimentum tristique. Nulla facilisi. Donec maximus aliquam magna at sagittis. Donec ultrices lorem nec massa semper, a viverra lacus dapibus. In euismod eget massa vitae laoreet. Nam orci risus, tincidunt nec auctor id, vestibulum in leo. Mauris vehicula ullamcorper ex vulputate sodales. Vestibulum nec augue eu felis imperdiet luctus.

Maecenas at odio diam. Cras consequat semper ligula sed malesuada. Fusce volutpat pretium dictum. Nunc volutpat vulputate sollicitudin. Phasellus gravida congue velit non posuere. Nullam ac facilisis tortor. Proin aliquam orci quis tellus fermentum, in varius massa sollicitudin. Curabitur condimentum, felis eget ornare egestas, lectus dolor congue nulla, eu hendrerit massa neque sodales ex. Nunc tincidunt commodo rutrum. Pellentesque imperdiet, augue nec commodo blandit, nibh eros facilisis leo, vel luctus dolor est quis tortor. Curabitur vel risus leo. Proin auctor, metus vel vulputate viverra, augue massa rhoncus urna, quis porta dolor lacus ut leo.</div></center>

E como a postagem aparece no fórum, junto com o novo código que aparece no lugar:



Código:
<center><div style="color: #666; text-align: justify; font-size: 12px; font-family:verdana; line-height: 180%; padding:20px; width: 800px; background-color:#070707;"><img src="http://i.imgur.com/n0xboA4.png" width="120px" style="display:inline" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut sapien molestie, gravida metus a, porttitor leo. Duis quis ornare tortor. Cras lobortis nibh a dui lobortis, quis auctor quam sodales. Curabitur et est eu arcu condimentum tristique. Nulla facilisi. Donec maximus aliquam magna at sagittis. Donec ultrices lorem nec massa semper, a viverra lacus dapibus. In euismod eget massa vitae laoreet. Nam orci risus, tincidunt nec auctor id, vestibulum in leo. Mauris vehicula ullamcorper ex vulputate sodales. Vestibulum nec augue eu felis imperdiet luctus.

Maecenas at odio diam. Cras consequat semper ligula sed malesuada. Fusce volutpat pretium dictum. Nunc volutpat vulputate sollicitudin. Phasellus gravida congue velit non posuere. Nullam ac facilisis tortor. Proin aliquam orci quis tellus fermentum, in varius massa sollicitudin. Curabitur condimentum, felis eget ornare egestas, lectus dolor congue nulla, eu hendrerit massa neque sodales ex. Nunc tincidunt commodo rutrum. Pellentesque imperdiet, augue nec commodo blandit, nibh eros facilisis leo, vel luctus dolor est quis tortor. Curabitur vel risus leo. Proin auctor, metus vel vulputate viverra, augue massa rhoncus urna, quis porta dolor lacus ut leo.</div></center>


Última edição por Lucy Elrich Sinskye em 06/03/17, 02:43 pm, editado 1 vez(es)
avatar

Lucy Elrich Sinskye
Nível 6

Feminino
Inscrito dia : 03/03/2015
Mensagens : 79
Pontos Ativos : 117

Ver perfil do usuário http://www.rpghogwarts.org

Resolvido Re: Float sendo substituído por display:inline

Mensagem por Shek em 05/03/17, 11:47 am

Boa tarde.

Essas mensagens que são enviadas estão em BBCode ou HTML? Você verificou se não há algum CSS na sua folha, que condiz a propriedade import! para definir o float dos tópicos?

Até!


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
avatar

Shek
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17664
Pontos Ativos : 21855

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Resolvido Re: Float sendo substituído por display:inline

Mensagem por Lucy Elrich Sinskye em 05/03/17, 01:13 pm

As mensagens estão em HTML, porém não estão com nenhuma div ou class nomeada que possa estar sendo confundida com o uma configuração de nossa folha de estilo css, o código está direto no style, como pode ver acima.

Existem várias configurações dadas como !important configuradas no CSS, mas nenhuma delas foi configurada recentemente para justificar que tenha sido a mesma a alterar os templates.

Creio que até o início de fevereiro o código funcionava normalmente, pelo menos não lembro de ter dado problema quando o utilizei em 1º de fevereiro, sendo este um código de uma personagem minha que utilizo sem realizar alterações, a mais de um ano.
avatar

Lucy Elrich Sinskye
Nível 6

Feminino
Inscrito dia : 03/03/2015
Mensagens : 79
Pontos Ativos : 117

Ver perfil do usuário http://www.rpghogwarts.org

Resolvido Re: Float sendo substituído por display:inline

Mensagem por Kyo Panda em 06/03/17, 09:47 am

Estranho... Ele também está a adicionar um atributo class vazio na tag...

Tente;

Código:
<center><div style="color: #666; text-align: justify; font-size: 12px; font-family:verdana; line-height: 180%; padding:20px; width: 800px; background-color:#070707;"><div style="float: left; margin: 25px 20px 10px 20px;"><img src="http://i.imgur.com/n0xboA4.png" width="120px" /></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut sapien molestie, gravida metus a, porttitor leo. Duis quis ornare tortor. Cras lobortis nibh a dui lobortis, quis auctor quam sodales. Curabitur et est eu arcu condimentum tristique. Nulla facilisi. Donec maximus aliquam magna at sagittis. Donec ultrices lorem nec massa semper, a viverra lacus dapibus. In euismod eget massa vitae laoreet. Nam orci risus, tincidunt nec auctor id, vestibulum in leo. Mauris vehicula ullamcorper ex vulputate sodales. Vestibulum nec augue eu felis imperdiet luctus.
 
Maecenas at odio diam. Cras consequat semper ligula sed malesuada. Fusce volutpat pretium dictum. Nunc volutpat vulputate sollicitudin. Phasellus gravida congue velit non posuere. Nullam ac facilisis tortor. Proin aliquam orci quis tellus fermentum, in varius massa sollicitudin. Curabitur condimentum, felis eget ornare egestas, lectus dolor congue nulla, eu hendrerit massa neque sodales ex. Nunc tincidunt commodo rutrum. Pellentesque imperdiet, augue nec commodo blandit, nibh eros facilisis leo, vel luctus dolor est quis tortor. Curabitur vel risus leo. Proin auctor, metus vel vulputate viverra, augue massa rhoncus urna, quis porta dolor lacus ut leo.</div></center>

Joguei o estilo para uma div.

---

Você tentou mover o width="120px" para dentro do style para ver se o problema também ocorre?

---

EDIT.: Em conversa com o @Shek Crowley, ele citou a possibilidade de ser um script alterando a imagem. Eu averiguei a situação e vi que a função de redimensionamento de imagens nos tópicos do Forumeiros altera o style caso não haja uma largura definida no estilo:

Código:
img_style = img_el.style && (img_el.style.width || img_el.style.height) ? {
  width: parseInt(img_el.style.width) || false,
  height: parseInt(img_el.style.height) || false
} : false;
if (!img_style) {
  img.attr('style', 'display:inline')
}

Logo, para que ele não altere o script, a tag de imagem tem que ter um estilo e esse estilo tem que ter uma altura ou largura:

Código:
<img src="https://im0.all-up.com/static/images/free-hosting-forum.png" width="180px" style="margin: 0;" />

Será alterado. Mas:

Código:
<img src="https://im0.all-up.com/static/images/free-hosting-forum.png" style="margin: 0; width: 180px;" />

Não será (em tese).

---

Também é possível desativar o redimensionamento de imagens.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4640
Pontos Ativos : 5925

Ver perfil do usuário https://ajuda.forumeiros.com

Resolvido Re: Float sendo substituído por display:inline

Mensagem por Lucy Elrich Sinskye em 06/03/17, 01:49 pm

Olá @"Kyo Panda"

Nós realmente ativamos recentemente o sistema de redimensionamento de imagem, por causa de um membro que anda nos trazendo alguns problemas, bugando nossos tópicos com códigos usando uma imagem grande que ocupa toda a tela.

Testei a alteração que você sugeriu no template, de colocar o width dentro da div e o template voltou a funcionar normalmente. Muito obrigada pela ajuda, irei estudar se vale ou não a pena desativar a função de redimensionamento da imagem para que este tipo de erro não aconteça em alguns templates.

Obrigada pela ajuda Kyo e @"Shek Crowley" .
avatar

Lucy Elrich Sinskye
Nível 6

Feminino
Inscrito dia : 03/03/2015
Mensagens : 79
Pontos Ativos : 117

Ver perfil do usuário http://www.rpghogwarts.org

Resolvido Re: Float sendo substituído por display:inline

Mensagem por Kyo Panda em 06/03/17, 03:39 pm

Às ordens. o/

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4640
Pontos Ativos : 5925

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum