Jump to content


Photo

Form Dentro De Div


  • Faça o login para participar
19 replies to this topic

#1 Boxer

Boxer

    Ativo

  • Usuários
  • 304 posts
  • Sexo:Masculino
  • Localidade:São Paulo

Posted 30/07/2008, 13:20

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
"O único lugar, no mundo, onde o sucesso vem antes do trabalho, é no dicionário"

#2 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 13:23

Posta aí uma SS e o trecho do código.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#3 Boxer

Boxer

    Ativo

  • Usuários
  • 304 posts
  • Sexo:Masculino
  • Localidade:São Paulo

Posted 30/07/2008, 13:38

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
"O único lugar, no mundo, onde o sucesso vem antes do trabalho, é no dicionário"

#4 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 13:54

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.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#5 Boxer

Boxer

    Ativo

  • Usuários
  • 304 posts
  • Sexo:Masculino
  • Localidade:São Paulo

Posted 30/07/2008, 14:07

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
"O único lugar, no mundo, onde o sucesso vem antes do trabalho, é no dicionário"

#6 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 14:15

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.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#7 Boxer

Boxer

    Ativo

  • Usuários
  • 304 posts
  • Sexo:Masculino
  • Localidade:São Paulo

Posted 30/07/2008, 16:08

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
"O único lugar, no mundo, onde o sucesso vem antes do trabalho, é no dicionário"

#8 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 30/07/2008, 23:03

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.

Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#9 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 01:57

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

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. :ponder:

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 :lol:, 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 :P (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. :lol:

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#10 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 31/07/2008, 08:46

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.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#11 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 03/08/2008, 23:40

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%; }
front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto

#12 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 05/08/2008, 00:29

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....
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#13 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 24/09/2017, 08:02

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

#14 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 09/10/2017, 12:09

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

#15 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 26/10/2017, 22:00

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




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq