input dentro de div - FF bug

s31s3r

s31s3r

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

14409210yz5.png


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!
 
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" />
 
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?
 
hYpe disse:
..Experimenta:
div.right_col input.radio { width: auto; border: 0px }

E dás essa classe aos <input type="radio" class="radio" />
Clicar para expandir...
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>
 
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 -->
hYpe disse:
Instala o firebug, que dá muito jeito para estas, e outras, coisas..
Clicar para expandir...
Subscrevo - http://www.getfirebug.com/
 
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:
87862808xz9.png


IE:
73616883zr6.png


Não sei se perco mais uma noite a tenatr resolver esta cena... com tanta coisa para fazer..
 
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. ;-)
 
Inicie sessão ou registe-se para poder participar.
Back
Topo