Form Dentro De Div
#1
Posted 30/07/2008, 13:20
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
#2
Posted 30/07/2008, 13:23
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#3
Posted 30/07/2008, 13:38
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
#4
Posted 30/07/2008, 13:54
Testa um display:block aí na tua div.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#5
Posted 30/07/2008, 14:07
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
#6
Posted 30/07/2008, 14:15
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.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#7
Posted 30/07/2008, 16:08
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
#8
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.
#9
Posted 31/07/2008, 01:57
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.
Muller Dias
ex-administrador Fórum WMO
#10
Posted 31/07/2008, 08:46
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.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#11
Posted 03/08/2008, 23:40
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%; }
www.brunobincoletto.com - twitter @brunobincoletto
#12
Posted 05/08/2008, 00:29
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....
#13
Posted 24/09/2017, 08:02
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
Posted 09/10/2017, 12:09
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
Posted 26/10/2017, 22:00
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)