Tableless - Desenvolvimento inteligente com Padrões Web

14/06/2005

Problema – Caractere Duplicado

Estava aqui, todo feliz, implementando um layout, quando me deparei com um bug… no maldito do IE. Visitem esse link. Você percebe que nos navegadores de verdade, está funcionando perfeitamente… Mas ao abrir no Ie (no meu caso 6), aparece …

Por

Estava aqui, todo feliz, implementando um layout, quando me deparei com um bug… no maldito do IE.

Visitem esse link.
Você percebe que nos navegadores de verdade, está funcionando perfeitamente… Mas ao abrir no Ie (no meu caso 6), aparece um caractere logo abaixo das caixas.
Você também percebe que aquele caractere faz parte da terceira caixinha.

Alguém se habilita a tentar resolver?
A resolução é bastante simples, e descobri dois jeitos de resolver.

Página com o problema.

UPDATE
Bem… Eu coloquei os HR para quando a pessoa estiver visualizando a página sem estilos, ela possa ver os textos separados por uma linha horizontal, para ficar mais organizado.

Como disse, há duas soluções, a primeira:
Se eu quiser largar mão da organização como disse acima, – o que não é nada de outro mundo – posso resolver o problema retirando os HR do código.

A outra solução, é eu colocar o texto do último box dentro de um SPAN. Também funcionaria.

Soluções simples, tão simples que eu pensei duas vezes antes de mostrar para vocês.
Mas gostei muito da participação de vocês, e acho que farei mais destes posts.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Márcia O. Carmo

    ahhaha jah me deparei com vários bugs nesse sentido no IE.. ridículos, mas vamos lah..

    Eu não sei se eh o jeito certo, mas o que fiz foi apenas separar as tags </a> </p> da terceira caixinha… seja com um enter ou um espaço.. agora pq isso funciona? não sei…

    alguém aih tem alguma solução decente? ehhehe

  • Márcia O. Carmo

    ah, outra coisa que eu fiz e deu certo foi tirar o primeiro <hr />

    hahaha Diego, explica!

  • http://www.morenet.com.br Vitor

    puts.. já aconteceu comigo diversas vezes .. O_O .. mas não fazia a mínima idéia.. e resolvi mudar a montagem dos boxes..

  • http://paulo.caseweb.com.br Paulo Schilling

    Outra solução é usar um <br style="clear: both;"> após o último </a>.

  • Assunção Jr.

    Isso ocorre se o código tiver muitos comentários, no caso é só retirar alguns comentários e pronto.

    pelo menos quando isso acontece comigo eu resolvo dessa forma.

  • Leandro Nascimento Camargo

    Creio que o problema nesse caso resida nos vários boxes com float: left…
    Isso costuma dar problemas de margens…

    Mas pelo jeito que percebe o ponto cai depois da altura das caixas…
    Então talvez basta fazer o que já foi dito…com uma pequena diferença: em vez de colocar clear:both no hr, coloque clear:both num br no final da camada #limite

  • http://www.maujopr.com/index.php Mauricio "Maujor"

    Trata-se do "3px jog bug" do IE.
    Para a segunda e terceira DIV "flutuada" IE indenta aproximadamente 3px. Resulta um total de 6 px de diferença na largura total em relação aos browsers standards. Esta indentação faz com que o caracter "pule" para a próxima linha de flutuação.
    No caso podemos adotar as seguintes soluções:
    1a.Solução: diminuir 2px na width de cada DIV (3 x 2px = 6px) de 177px para 175px;
    2a.Solução: aumentar 6px na DIV conteúdo, de 608px para 614px;
    3a.Solução: diminuir 6px total nas margens laterais das DIV
    de margin: 0 10px 40px 10px
    para 0 8px 40px 10px; ou
    de margin: 0 10px 40px 10px
    para 0 9px 40px 9px; ou etc
    4a.Solução: declarar display:inline para as 3 DIV flutuadas.
    Servir as regras da solução adotada exclusivamente para o IE através do seletor * (estrela)
    p ex: * .destaques div {width:175px;}

  • Leandro Nascimento Camargo

    Hehehehe esses bugs minimalistas desse porte são debulhados muito bem no

    positioniseverything.net
    Tanto esse do Jog (ou Three pixel gap), como o do guilhotine…etc…

  • http://www.maujor.com/index.php Mauricio "Maujor"

    Ops!
    Corrigindo o seletor exclusivo para o IE:
    * html .destaques div {width:175px;}

  • http://www.maujor.com/index.php Mauricio "Maujor"

    Ops!
    Corrigindo o seletor exclusivo para o IE:
    * html .destaques div {width:175px;}

  • Márcia O. Carmo

    caramba! heheheheh

    pra mim era soh separar as tags </a> e </p> que jah tava di boa x)

  • http://www.geocities.com/franchicop Francisco Penedo

    Uma solução simples é criar um "id" para o terceiro float especificando "width" auto.
    Assim:
    #terceirofloat {
    width: auto;
    }
    e aplicando na div:
    <div id="terceirofloat"><p>texto</p></div>

  • http://www.geocities.com/franchicop Francisco Penedo

    Oops!
    Não funcionou no Firefox.
    Façamos o seguinte:
    #terceirofloat {
    width: 171px;
    }
    O resto deixa igual.

  • http://www.tecinco.com.br/ Davis Zanetti Cabral

    bahh… eu tive o mesmo problema… soh q a ultima coluna possuia um background-color cinza…
    olha só… eu peguei, fiz com span e resolveu a repetição.. mas o espaço embaixo continuou… eu tinha um rodape e ele ficava afastado… botei <br clear="all" /> mesma coisa…. mas pasmei quando removi os comentarios e o espaço sumiu!
    vai entender esse IE! :/

  • Daniel Savoy

    Esse bug de eco na letras é causado pelo código CSS usando "float". Não sei direiro o motivo mas muitas vezes o "float", tanto "right" quanto "left", causam vários bugs no IE. Já vi falhas de fechar navegador, repetir caracteres no fim da página, etc.

    O engraçado é que não depende da TAG usada, os erros ocorrem com DIV, SPAN, TABLE.

  • Acidio

    IE É UMA PORCARIAAAAAA!!!!

  • http://jaderubini.wordpress.com Jader Rubini

    Aproveitando que esse post caiu no meu Bloglines denovo…

    A solução pra esse bug é mais bizarra que o próprio bug. Frequentemente tenho problemas iguais aqui no serviço e a solução que eu achei foi retirar os comentários que envolvem as divs com float e colocá-los dentro da div, por exemplo:


    Div com float


    div também com float


    Div com float


    Div com também float

    Estúpido, não?

  • http://jaderubini.wordpress.com Jader Rubini

    Ih… my example sucked. :/
    sorry :)

  • Paulo Rogério

    Obtive o mesmo problema, resolvi atravéz da retirada dos comentários.
    Vai entender…

  • christian

    O problema acontece pq tem algum comentário perdido no código.
    Basta incluir um comentário após a última palavra onde os caracteres se repetem:
    Lorem Ipsum

  • Pingback: Tweets that mention Problema – Caractere Duplicado | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com