Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo Petarli Brandão

Problema com a propriedade size para a tag input

Recommended Posts

Bom, estou começando a aprender webdesign agora, e montei um formulário que também utiliza css.

 

No internet explorer (6 e 7) o formulário aparece alinhado , e os campos no tamanho certo. Quando eu abro a página pelo firefox além de ficar um pouco desalinhado, parece que a propriedade size das caixas de texto não funciona.

 

Meu código html :

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Cadastro de Funcionários</title>	<link href="css/stylesnew.css" type="text/css" media="screen" rel="stylesheet"></head><body><form name="form1" method="get" action="cadastrofunc.php"><div id="textos">           Nome:<br>  Cargo:<br>  Local de trabalho:<br>  Telefone:<br>  E-mail:<br>  Horário de Entrada:<br>  Horário de Saída:</div>  <div id="nome">  <input name="nome" type="text" tabindex="1" size="50" maxlength="150">  </div>  <div id="cargo">  <input name="cargo" type="text" tabindex="2" size="40" maxlength="45">  </div>  <div id="local">  <input name="local" type="text" tabindex="3" size="40" maxlength="45">  </div>  <div id="telefone">  <input name="telefone" type="text" id="telefone" tabindex="5" size="7" maxlength="8">  </div>  <div id="ddd">  <input name="ddd" type="text" id="ddd" tabindex="4" size="1" maxlength="2" align="right" >  </div>  <div id="email">  <input name="email" type="text" id="email" tabindex="5" size="40" maxlength="70">  </div>  <div id="entrada">  <input name="entrada" type="text" id="entrada" tabindex="6" size="5" maxlength="5">  </div>  <div id="saida">  <input name="saida" type="text" id="saida" tabindex="7" size="5" maxlength="5">  </div>    <div id="buttons">  <input name="submit" type="submit" value="Enviar">  <input name="reset" type="reset" value="Limpar">  </div></form></body></html>
Meu arquivo CSS : (Coloquei aqui só as partes que fazem referência às partes relevantes, ex: não coloquei os atributos para h1)

 

body {	color : #333;	background-color : #fff;	margin-top: 0;	margin-right: 12px;	margin-left: 12px;	margin-bottom: 0;	padding : 0;	font : 11px verdana, arial, helvetica, sans-serif;} #textos {	text-align:right;	width: 120px;	line-height: 2.5;	position: absolute;	left: 250px;	top: 30px;}/*Campos*/#nome input {	position: absolute;	top: 31px;	right: 321px;	left: 375px;}#cargo input {	position: absolute;	top: 60px;	right: 321px;	left: 375px;}#local input {	position: absolute;	top: 87px;	right: 321px;	left: 375px;}#telefone input {	position: absolute;	top: 116px;	right: 321px;	left: 400px;}#ddd input {	position: absolute;	top: 116px;	right: 380px;	left: 375px;	width:15px;}#email input {	position: absolute;	top: 144px;	right: 321px;	left: 375px;}#entrada input {	position: absolute;	top: 173px;	right: 321px;	left: 375px;}#saida input {	position: absolute;	top: 201px;	right: 321px;	left: 375px;}#buttons {	position:absolute;	left: 375px;	top: 250px;}
Eu sei que este posicionamento absolute não deve ser a melhor maneira de fazer (talvez por isso o desalinhamento), mas não conheço outro jeito ainda.

OBS: Este é meu primeiro POST, eu procurei no site bastante e até na internet e não encontrei sobre este problema do size.

 

Obrigado desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Meu caro Rodrigo Petarli Brandão, o atributo size deve ser substituído pela propriedade CSS width. Aliás, com uso do width o controle sobre o input fica bem melhor, pois você pode especificar sua largura em pixels...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.