none
Divs e a loucura dos navegadores RRS feed

  • Pergunta

  •  

    Pessoal, nao estou conseguindo solucionar um problema que esta aparecendo entre os navegadores IE7, Opera e Firefox.

     

    A principio deve ser uma coisa idiota, mas estou penando....

    vejam a simplicidade das divs colocadas no codigoSadtirei o css, coloquei purinha para um melhor entendimento)

     

    <div style="width:775px; height :100%">


                  <div style="width: 600px; height: 100px; background-color:blue; float :left">

                </div>
                  <div style ="width:175px; height :120px; background-color :red">

                 </div>

    </div>

     

    Obs: coloquei 120px de altura para facilitar a visualizacao do problema....

     

    Em cada navegador ele aparece de uma determinada maneira,

    A principio , no meu entendimento, acredito que o navegador que esteja exibindo de maneira correta seja o IE7, mas posso estar enganado...solicito ajuda para esse meu problema.

     

    Valeu pessoal.

    terça-feira, 10 de julho de 2007 13:20

Todas as Respostas

  • Rodrigo,

     

    Vc vez da manei menos indicada, "inchertou" o css com o html....

    No css tem a caracteriscas de herdar a caracteristicas...

    Por exemplo:

    <div id="geral">

                 <div id="topo"></div>
                  <div id="conteudo"</div>

    </div>

    No CSS

    voce colocara tipo assim:

    body {                 ////  Aqui sao as caracteristicas inerentes ao html
     background-color: #3982D1;
    }
    #Geral {                //// Aqui sao as caracteristicas inerentes a Div geral
     width: 760px;
     margin: auto; ///centraliza
     font-family: Verdana, Arial, Helvetica, sans-serif;
     text-decoration: none;
    }

    ...e assim por diante....

    Isso é rudimentarmente um site em tableless...e seguindo as webstandars...

    Agora um dica que uso e que li num livro "Dominando Tabless" faça um site e teste do firefox e depois no IE....

    Espero ter contribuido...

    Forte Abraço

    terça-feira, 10 de julho de 2007 23:33
  • Caro Eduardo,

    acho que não me fiz compreender no meu post anterior, mas de qualquer maneira agradeço sua boa vontade para com um simples mortal que está penando com essas famigeradas divs...

     

    vamos ao código com o css como você me passou:

     

    /*------------MEU CSS-------------*/

    #geral
    {
     width: 775px;
     height: 100%;
     margin: auto;
     text-align: left;
    }

    #cabec_esq
    {
     width: 600px;
     height: 150px;
     text-align: left;
     background-color: #000000;
     float:left;
     
    }
    #cabec_dir
    {
     width: 175px;
     height: 150px;
     background-color: #00719b;
     background-color: teal;
     float:left;
     
    }

    #sub_cabecalho
    {
     width: 775px;
     height: 15px;
     background-color: #000000;
     margin-top: 10px;
    }


    /*--------MINHAS DIVS------------*/

        <div id="geral">
                <div id="cabec_esq"></div>
                <div id="cabec_dir"></div>
               <div id="sub_cabecalho"></div>
        </div>

     

     

     

     

    Novamente volto a relatar, existe diferença na renderização entre os navegadores IE7, Firefox e o Opera...

    vou modificar minha indagação: o que que estou fazendo errado nesse caso específico?

    Realmente não estou conseguindo resolver essa diferença e estou precisando da ajuda.

    (obs: já estou procurando o livro que você citou anteriormente)

     

     

     

    quarta-feira, 11 de julho de 2007 11:50
  • Ola Rodrigo,

     

    Em primeiro lugar todos nós somos mortais cara.Smile

    E depois é só um questão de apanhar as vezes, que agente aprende e tera sempre alguem para ajudar cara.

     

    #geral
    {
     width: 775px;
     height: 100%; rpz q questao pode está nesse ponto pois vc tratou o posicionamento me percentual, porque por exemplo mesmo se vc colocasse 300px e conteudo exigisse mais, a div mostratia o conteudo.
     margin: auto;
     text-align: left; Quando a este vc nao precisa colocar pois isso é padrao da web, coloque quando for direte disso.
    }

    #cabec_esq
    {
     width: 600px;
     height: 150px;
     text-align: left;
     background-color: #000000;
     float:left;
     
    }
    #cabec_dir
    {
     width: 175px;
     height: 150px;
     background-color: #00719b;
     background-color: teal;
     float:left; esse float cv coloca right, porque assim ele ficara aninhado a direita
     
    }

    #sub_cabecalho
    {
     width: 775px;
     height: 15px;
     background-color: #000000;
     margin-top: 10px;
    }

     

    De uma olhada e teste e responda, Eu testei no IE e Firefox....

    Qualuqer coisa estamos aqui, eu tambem ja sofri muito com essas div, mas torne-se amigo delas, pois saberá o quando são leais, mas do que as tabelas...principalmente na manutenção.

    Tudo de bom,

    domingo, 15 de julho de 2007 18:07
  • Valeu Eduardo, vou seguir seu conselho e digo depois o resultado.

    Mutchas gracias.

     

    domingo, 15 de julho de 2007 18:31