[Resolvido] problema ao usar <form>

[aNimosity 0]

Olá amigos,

recentemente comecei a trabalhar em uma versão tabless do meu site. Por enquanto estou conseguindo beleza.

No entanto hoje quando tentei fazer uma busca, tive um problema que não consegui resolver de jeito nenhum.

 

O negócio é o seguinte. Eu já inseri o campo de texto da busca e o botão de submit no devido posicionamento. No entanto, agora quando eu coloco a tag <form>, isso simplemente quebra meu layout totalmente.

 

Abaixo lhes mostro o que acontece, sendo sem o <form> e com o <form>, respectivamente:

 

Tentei já retirar as bordas, padding e margin do form pelo CSS, mas o problema persiste.

Não me parece ter muito sentido isso.

Alguém aí pode me dar uma dica?

Desde já agradeço e um abraço!

[Thiago Retondar 18]

Como está o HTML e o CSS?

 

É só trabalhar com o width.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[aNimosity 0]

o html esta assim:

<div id="navigation">
		<form method="post" target="_blank" action="search.php">
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pagina_inicial','','imagens/button_navigation_pagina_inicial_hover.jpg',1)"><img src="imagens/button_navigation_pagina_inicial.jpg" alt="Página Inicial" title="Página Inicial" name="pagina_inicial" width="253" height="99" border="0"></a> 
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('denunciar','','imagens/button_navigation_denunciar_hover.jpg',1)"><img src="imagens/button_navigation_denunciar.jpg" alt="Denunciar" title="Denunciar" name="denunciar" width="159" height="99" border="0"></a> 
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('banlist','','imagens/button_navigation_banlist_hover.jpg',1)"><img src="imagens/button_navigation_banlist.jpg" alt="Banlist" title="Banlist" name="banlist" width="123" height="99" border="0"></a>
		<img src="imagens/button_navigation_procurar.jpg" width="144" height="99" alt="Procure por nick, steam id ou hack." title="Procure por nick, steam id ou hack."> 
		<img src="imagens/spacer_navigation.jpg" width="1" height="99" alt="">
		<input type="text" class="search" name="busca" OnClick="javascript: this.value=''">
		<input name="search_button" type="image" src="imagens/icon_search.jpg" alt="Clique aqui para fazer a busca." title="Clique aqui para fazer a busca." class="search_button">
</form>
	</div>

o CSS:

form
	{
	margin: 0;
	padding: 0;
	border: 0;
	}
#navigation
	{
	_margin-top: -4px;
	width: 967px;
	height: 99px;
	background-image: url(imagens/background_navigation.jpg);
	background-repeat: no-repeat;
	}
.search
	{
	position: absolute;
	top: 298px;
	border-width: 1px;
	border-style: dashed;
	border-color: #e9f4f9;
	background-color: #3f6a79;
	font: 70% Tahoma, Arial;
	font-weight: bold;
	color: #fff;
	}
.search_button
	{
	position: relative;
	right: -150px;
	}

[Thiago Retondar 18]

Só com esse código não deu para ver nada. =X

 

Não use postion. Use margin e float.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[aNimosity 0]

Me desculpe.

Colei o codígo da div inteira que estava com problema e todo CSS que está aplicada ao conteúdo dela.

 

De qualquer forma, obrigado pela ajuda Thiago!

Consegui resolver o problema aqui mudando a posição da tag <form>.

Coloquei ela antes do conteúdo da div.

 

Pode marcar como resolvido. Um abraço!

[Thiago Retondar 18]

Coloquei como [Resolvido], mas tenta seguir a dica de usar float.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif