[Resolvido] Diretiva css width no mozilla firefox

[paulopatto 0]

Olá boa tarde a todos.

 

 

Estou tentando criar um formulário com com a técnica de tableless, porem estou com erro no css da página. No meu formulário para que fique alinhado estou setando tamanho para os campos < label > ou seja uso a diretiva width.

 

No navegador Internet Explorer funciona tudo muito bem mas no navegador mozilla firefox, ele simplemente ignora essa diretiva de configuração. Segue um exemplo de código usado.

 

...
<label class="simples" for="email">
email: 
</label>
<input type="text" id="email" class="textbox" />
...

E aqui um trvho do css:

 

label.simples{
font-family:verdana;
width:80px;
}

Já tentei achar algo a respeito e segui as convenções que podia, usei como referencia o www.w3schools.com e o https://developer.mozilla.org/pt/CSS/width. Também já tentei inserir o comando via atributo style propria tag. Mas nada até o momento.

[William Bruno 1501]

o label não é um elemento nivel de bloco por default, por isso não aceita propriedades de dimensões..

label.simples{
font-family:verdana;
width:80px;
display: block;
background-color: #0ff; /* só para você visualizar a área */
}

[paulopatto 0]

Olá Wiliam, boa tarde obrigado pela resposta mas assim creio que nãzo soluciona bem o meu problema (er desculpe as ingenuidade mas não sou designer mas tenho uma página para ontem e o design não está disponível.) pois desta forma com a diretiva display: block; eu crio o seguinte incoveninte de ter de usar assim:

<label>Texto
<input type="text" />
</label>

Não é? E acho isso fora do padrão W3C, pois veja o que diz sobre a diretiva display: block:

The element will be displayed as a block-level element, with a line break before and after the element

Fonte: http://www.w3schools.com/css/pr_class_display.asp

 

Essa parte do line break before element não me é muito util também, vi na net esse tutorial mas não sei qual a diretiva que impede a quebra de linha desse cara Antonio Lupetti Tutorial in Woork blog

 

 

Aguardo opiniões.

[William Bruno 1501]

Não entendi a tua crítica ao display: block;

Para não quebrar, o carinha ai flutuou os 2 elementos(label, e input).

#stylized label{

display:block;

font-weight:bold;

text-align:right;

width:140px;

float:left;

}

Qual é o resultado final que você deseja:

Texto: input

ou

Texto:

input ?

 

Não existe "semântica para CSS", isso se diz sobre a marcação xHTML.

[paulopatto 0]

Bem dando uma estudada e farejada na net vi neste video http://www.tableless.com.br/propriedade-float-do-css que boa parte do sucesso no layout do lupetti se deve ao float e clear, mas não funciono para mim aqui não (se faço o digo igual o dele sim).

[paulopatto 0]

Então Wiliam, eu havia postado uma outra mensagem, como disse não manjo muito de css e xhtml (sou programador) e to quebrando um galho aqui na empresa. No caso eu ví que ele usou o float e por isso o sucesso dele com esse layout.

 

O resultado final que eu desejo é que o layoute fique com os label a esquerda e inputs a direita todos alinhado, como quando usamos tabelas HTML.

 

É espero que não tenha me levado a mal, não critiquei sua solução apenas opinei! Se tiver mais alguma sugestão será sempre bem vinda.

[William Bruno 1501]

Okay... vamos desenhar hehe^^

Label Pequeno____________________ Input

Label Grande Com Muito texto______ Input

Label___________________________ Input

Label Normal_____________________ Input

 

Certo, é esse resultado que você quer?

Ou:

___________________Label Pequeno Input

______Label Grande Com Muito texto Input

__________________________ Label Input

 

Ou outra coisa ainda? :lol:

Tranquilo cara, o fórum é um lugar de criticas, discurssões e sugestões.. vamos opinar ai, é isso que motiva e movimenta.

 

@entenda o __ como espaçamento, entre label e input, ou canto esquerdo e label.

[paulopatto 0]

Wiliam, consegui aqui com float e margin, era muito simples mesmo, mesmo assim muito obrigado pela ajuda e paciencia e desculpe qualquer mal entendido, na realidade tudo se esclareceu quendo eu realemnte entendi o que é na verdade o float e usar o clear.

 

Meu me desculpe ter tomado seu tempo uma coisa tão boba.

[William Bruno 1501]

Imagina.. tamo ai pra ajudar.

Posta a solução, q pode servir para futuras dúvidas.

 

Importante é que resolveu.

[paulopatto 0]

Vou postar um código genérico mas com o mesmo efeito (nao valeu colocar um código tão grande)

 

HTML

<label class="simples">Nome: </label>
<input type="text" class="textbox" />
<br/>
<label class="simples">Comentário: </label>
<input type="text" class="textbox" />

CSS

label.simples{
	width:80px;
	font-weight:bold;
	font-size:9pt;
	display:block;
	float:left;
	margin-right:6px;
}
input.textbox, textarea{
	width:200px;
	border:1px solid #000;
	line-height:10pt;
}
textarea{
	height:100px;
}

Simples porem eu não enxergava.