1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

input dentro de div - FF bug

Discussão em 'Web Development' iniciada por s31s3r, 19 de Fevereiro de 2008. (Respostas: 8; Visualizações: 2906)

  1. s31s3r

    s31s3r Power Member

    Acho que deve ser um bug do FF, no IE o input não sai para fora da div

    [​IMG]

    css:
    Código:
    div.right_col{
        float: left;
        width: 20em;
        border: 1px solid #000000;
    }
    
    
    div.right_col input{
        width: 20em;
    }
    
    Alguém sabe como psso resolver isto? Thanks!
     
  2. hYpe

    hYpe [email protected] Member

    Tens q fazer uma classe à parte para os radio's..

    Senão, da maneira q tens, todos os inputs levam com o width: 20em;

    Experimenta:
    div.right_col input.radio { width: auto; border: 0px }

    E dás essa classe aos <input type="radio" class="radio" />
     
  3. hasta.g5

    hasta.g5 I quit My Job for Folding

    Se puderes põe o código do formulário também, não estou a perceber onde tens a div.right_col.
    Pelo que entendi, tens <div class="right_col"><input ...></div>, é isso?
     
  4. s31s3r

    s31s3r Power Member

    Eu estou-me a referir aos campos do nome e-mail e contacto, ...os três primeiros.

    Código:
    <form action="" method="post" id="form1">
    
    
    <fieldset id="personal_data"><legend>Dados Pessoais</legend>
    
    <div class="group_warper">
    <div class="left_col">
    <label for="q_u_name">Nome</label>
    </div>
    <div class="right_col">
    <input id="q_u_name" name="q_u_name" value="" type="text" size="80" />
    </div>
    <div class="clr"></div>
    </div>
    
    <div class="group_warper">
    <div class="left_col">
    <label for="q_u_mail">E-Mail</label>
    </div>
    <div class="right_col">
    <input id="q_u_mail" name="q_u_mail" value="" type="text" size="80" />
    </div>
    <div class="clr"></div>
    </div>
    
    <div class="group_warper">
    <div class="left_col">
    <label for="q_u_phone">Telefone de contacto</label>
    </div>
    <div class="right_col">
    <input id="q_u_phone" name="q_u_phone" value="" type="text" size="80" />
    </div>
    <div class="clr"></div>
    </div>
    
    <div class="group_warper">
    <div class="left_col">
    <label for="q_u_contact_me">Telefone de contacto</label>
    <p>Desejo seer contactado para bla bla bla, bla bla</p>
    </div>
    <div class="right_col">
    <input id="q_u_contact_me_yes" name="q_u_contact_me" value="1" type="radio" checked="checked" size="80" />
    <input id="q_u_contact_me_no" name="q_u_contact_me" value="0" type="radio" size="80" />
    </div>
    <div class="clr"></div>
    </div>
    
    </fieldset>
    
    </form>
    
     
  5. hYpe

    hYpe [email protected] Member

    Hmmm ok.

    Não estará a herdar um padding ai de qq lado?

    Instala o firebug, que dá muito jeito para estas, e outras, coisas..
     
  6. hasta.g5

    hasta.g5 I quit My Job for Folding

    Já percebi, estás a tentar fazer uma espécie de tabelas com divs. É uma boa política usar divs em vez de tabelas quando não para listagem de dados, mas também não se deve abusar das divs.
    Experimenta fazer o seguinte para evitar usar tantas divs, torna-se demasiado confuso. (não tenho a certeza se funciona)
    Código:
    .group_warper input{
        float: left;
        width: 20em;
        border: 1px solid #000000;
    }
    .group_warper label{
        ...
    }
    
    Assim evitas ter tantas divs simplificando e fazer o mesmo efeito.
    Código:
    <div class="group_warper">
    <label ...>...</label>
    <input ... />
    </div><!-- group_warper -->
    
    Subscrevo - http://www.getfirebug.com/
     
  7. s31s3r

    s31s3r Power Member

    Ok! um exemplo mais simples para despistar qualquer coisa:

    .html
    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt">
    <head>
    <title>test</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" type="text/css" href="form.css" />
    </head>
    <body lang="pt">
    <form action="" method="post" id="form1">
    <div class="warper">
    <input id="q_u_name2" name="q_u_name2" value="" type="text" size="80" />
    </div>
    </form>
    
    </body>
    </html>
    

    .css
    Código:
    form#form1 {
        border: 1px solid #FF0000;
    }
    
    div.warper{
        width: 100px;
        border: 1px solid #000000;
    }
    
    div.warper input{
        width: 100px;
    }
    
    FF:
    [​IMG]

    IE:
    [​IMG]

    Não sei se perco mais uma noite a tenatr resolver esta cena... com tanta coisa para fazer..
     
  8. hasta.g5

    hasta.g5 I quit My Job for Folding

    Nesse caso, acrescenta border: 0px; ao div.warper input porque o input tem border em default, isso faz com que tenha mais 2px que a div.

    Foi fácil descobrir isso com o Firebug. ;-)
     
  9. s31s3r

    s31s3r Power Member

    Fixe! Ok!Ok! Vou instalar o Firebug...
     
    Última edição: 20 de Fevereiro de 2008

Partilhar esta Página