19 replies to this topic

[Boxer]

Buenas, pessoal!

Seguinte... Estou com um problema que está me tirando o sono...
Tenho uma div, de tamanho 210px e, dentro dela, tenho um form.

No IE, funciona normalmente....
No FF, o formulário salta pra fora da DIV!!! BIZARRO!!!!

Se coloco os objetos (textbox, button, etc), eles são aceitos dentro da DIV.. Mas, quando coloco o <form ....>, sai td fora!

Alguém já passou por isso? Tem alguma idéia de como solucionar esse problema?

Valeu!

[]´s

[Nicholas Pufal]

Posta aí uma SS e o trecho do código.

[Boxer]

Opa...
Segue:

<div id="right">
   <div id="rightcontent">
	<div class="rightitem">
			   <form name="frm" method="get" onSubmit="return (busca(this));">
		   <label class="rightlabel"><input name="tx_nome" type="text" class="textbox" id="tx_nome" onFocus="if(this.value=='Nome') { this.value='';}else{this.select();}" onBlur="if(this.value==''){this.value='Nome'}" value="Nome"></label>
		   <div id="Result"></div>
		   </form>
	   </div>
	</div>
</div>

O CSS:

#right{
	position:relative;
	float:left;
	width:210px;
	height:100%;
	margin-top:-3px;
	margin-left:8px;
	_margin-top:-5px;
	_margin-left:3px;
}

#rightcontent{
	background-image: url(../bgrightcoldegr.jpg);
	position:relative;
	float:left;
	height:100%;
}

div.rightitem{
	position:relative;
	float:left;
	text-align:left;
	font-family:verdana;
	font-size:10px;
	color:#006699;
}

.textbox{
	border:solid 1px #003366;
	width:170px;
	padding-bottom:2px;
	padding-top:2px;
	font-family:verdana;
	font-size:11px;
	color:#003366;
}

.rightlabel{
	padding-left:10px;
	padding-bottom:5px;
	padding-top:5px;
}

Pra ficar mais fácil de entender, o formulário fica na coluna direita. A coluna direita tem 210px de largura.

[]´s

[Nicholas Pufal]

Bah, faz tempo que não mexo com CSSs. Eu arriscaria que um display (block, etc) poderia arrumar o problema, mas sei lá... faz um tempão que não mexo, e assim no escuro complica.

Testa um display:block aí na tua div.

[Boxer]

Pois é, cara....

Nada... Já tentei display inline, table, inline-table tb, mas nada!
Tô chutando de tudo, no escuro tb...

Pensei que fosse o tamanho da DIV, então aumentei pra 500px... Mas não era isso...

Quando a gente cria um FORM, ele "expande" o redor do form mesmo... É algo relacionado à isso...
o display inline elimina essa expansão, mas não adiantou na situação...

[]´s

[Nicholas Pufal]

Não tem como postar uma screenshot ?

Se tu puder, posta também (pode ser anexo) o código deste trecho, dessa coluna. Assim eu posso abrir aqui no Firefox.

Com aquele trecho de código que tu mandou antes, não cheguei a ver nada de errado.

[Boxer]

Pouts, cara...
SS tá complicado...

Eu tb revisei tudinho, e não tem nada de errado! (Quer dizer... Se não estivesse nada errado, estaria td cert e eu não estaria aqui no fórum com essa dúvida, certo? kkkkk)

Meu... Vou tentando aqui, cara....
Valeu pela ajuda... Assim q eu desvendar o mistério, posto o resultado aqui...

[]´s

[Édipo Costa Rebouças]

Pouts, cara...
SS tá complicado...

Eu tb revisei tudinho, e não tem nada de errado! (Quer dizer... Se não estivesse nada errado, estaria td cert e eu não estaria aqui no fórum com essa dúvida, certo? kkkkk)

Meu... Vou tentando aqui, cara....
Valeu pela ajuda... Assim q eu desvendar o mistério, posto o resultado aqui...

[]´s

opa colega blz?
então, eu testei o seu codigo aqui e deu certinho, sem paiores problemas, no IE6 e FireFox 3,

eu estou vendo que seu codigo tem um monte de floats... Veja se vc tem a necessidade de tudo isso, tenta colocar um <p> antes e depois da label, e faz essa declaração classica para tentar resolver o estouro, no css:

.clearFull{   display:block;   clear:both;}

e depois de cada float declara isso ai ó.

<span class="clearFull"><!-- --></span>

bem , como disse, aqui não ta dando pau, por vias das duvidas, zere os paddings e as margins, (evite hacks) e boa sorte.

Edição feita por: Édipo Costa Rebouças, 30/07/2008, 23:04.

['' sem.Ponto]

O problema parece ser por causa do uso do float, exagerado por sinal.

Uma pergunta: a div right só terá o formulário? Porque se tiver, a primeira dica que eu lhe dou é retirar esse monte de divs que são descenessárias.

E quanto ao height 100% que você usou? Se você não tiver um elemento acima com a altura especificada, o height 100% não funcionará.

Outra coisa... quando você usa o float em um elemento, este pula para fora como se você tivesse usado position absolute, então o elemento pai fica parecendo que está vazio. A solução para isso é usar display table na div onde está o elemento com o float. Mas como você saiu colocando tantas divs com float , teria que sair colocando display table em todas elas inclusive no elemento que está acima da div right.

Como eu disse lá em cima tem divs desnecessárias. Duas delas dá pra descartar de cara... para que divs netas, bisnetas e tataranetas né? kkk (brincadeira)

Siga também a dica do Édipo que é zerar os paddings e margins, pois cada navegador tem medidas padrões para determinados elementos. Como zerar? Assim:

* {
	margin: 0;
	padding: 0;
}

Quanto ao clear depois da div, não acho legal colocar elementos fantasmas na página. Eu encontrei uma alternativa interessante usando apenas CSS. Segue abaixo:

#DivdoFormulario:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	overflow:hidden;
}

Falei demais, acho que já está bom.

[Nicholas Pufal]

Não usa display:table!!!

Vai dar dor de cabeça depois, tô avisando!

Acabei de postar sobre isso no outro tópico: http://forum.wmonlin...o...st&p=928249

display:table só quando não tem nenhum float dentro.

[BGGMB]

Salta pra fora de que jeito?

O a div não acompanha o form?
usa um <br /> com clear:both; height:0; padding:0; margin:0;

os inputs, textarea, etc... saem pra fora da div?
já tentou colocar largura fixa neles?
ex: div.form form input { width: 90%; }

[Édipo Costa Rebouças]

bem, desculpem a demora ai.... estou trabalhando muito ultimamente e para melhorar voltou as aulas na facu.... bem, sobre o display table, eu não sei se alguém aqui no forum já leu sobre a propriedade hasLayout do IE, pois bem, ele vai dar a mesma aparencia do IE, de você usar floats, sem usar um elemento com clear:both e display:block, mas normalmente esse b... na pau no firefox, ai que raiva que passei um tempo desses, eu dava o voltar no firefox e o layout quebrava, deve ter outra utilidade para o display table, vou ler o topico do firehalk.

sobre o br com o clear:both e tals, tem horas que o uso, mas nem sempre funfa, e como eu só li a especificação do css 1, e nela fala que br não era p... nenhuma e que cada browser poderia formatala de qualquer jeito, então curto mais usar o span, mas tem horas que surje um espaçamento estranho com span e ai que uso o br.

sobre zerar as margens, um habito que peguei com meu chefe foi zerar as margens da maioria dos elementos que uso para fazer efeitos vizuais ou menu, eu não uso isso ai de *{padding:0; margin:0}.... pois por exemplo, vc tem um texto, nele tem varios <p>, eu te pergunto, como esses <p> são separados pelo browser? eu não posso definir a mesma distancia entre um paragrafos com font 24 e com font 12px, então eu deixo o browser dar conta disso, e não adianta declarar p{margin:1.5em} ou qualquer outra Xem, pois ele vai pegar o font-size da font por exemplo no body ou no elemento pai dele, e definir para todos os p a mesma margin entre paragrados, independente do font-size corrente, fora outros....

[Miguceamma]

Motilium Paypal cialis online Osu Cialis Generico Italia
Sublingual Viagra cialis Viagra Cialis Paypal Derniere Lit Plus Longtemps Discount Valtrex Online
Viagra En Generique cialis Generic Stendra In Canada Free Shipping Overseas
Cialis Tadalafil Effets Secondaires cialis Amoxil Trimox Generic Amoxicillin Cephalexin Birth Control

[Miguceamma]

Levitra Experience Saturn Cialis Levitra Buy Propecia Uk Online cialis Viagra Quel Cas Cialis Viagra Acquisto Achat Viagra Cialis Levitra
Retin A Cream Free Shipping Hydrochlorothiazide Hctz Medication cheaper alternative to levitra Prix Cialis Medicament Elocon Cream To Buy Viagra 50mg Kaufen
78 Buy Azithromycin Chlamydia Treatment Where To Order Legally Progesterone Website Cod Accepted Doctissimo Viagra Cialis generic cialis Artane Comprar Cialis Las Palmas Cialis Paris

[Miguceamma]

Amoxicillin Virus Reaction viagra Clomid Insemination Artificielle Acheter Viagra Sans Ordonnance
Cialis Vendita On Line viagra Propecia Mens Health Cialis Non Generico Cialis Generika Versand
Purchasing Pyridium In Canada Store Cheapest Cialis viagra Acquista Viagra Italiano Cialis 5 Mg Durata Effetto Viagra Generico Principio Ativo