Como alinhar um texto ao lado de um radiobox?

[Marcio Ricardo 0]

Pessoal, estou com um problema para alinhar um texto ao lado de um radiobox.

no FF ele fica quase certo, mas o radiobox fica uim pouco mais pra cima em relação ao texto. No IE o radiobox fica um pouco pra baixo em relação ao texto, tb.

 

Além disso, eu gostaria que esses radiobox ficassem encostado no lado esquerdo da div que o contem. no ff e no safari eu consegui isso, mas nb ie ele fica um pouco recoado como se tivesse um margein-left ou um padding-left.

 

eu já tentei zerar as margens e os paddings usando, inclusive, o atributo *, para zerar todas as margens da pagina. mas não consigo fazer com q o IE fique igual aos outros navegadores.

 

Obrigado desde já,

 

marcio

 

Segue o codigo

 

HTML

<form class="enquetepromo">
					<ul class="listaenquetepromo">
					  <li><input type="radio" name="enquete" value="sim" /><span><h2>Eu quero ganhar este DVD</h2></span></li>
					  <li><input type="radio" name="enquete" value="nao"  /><span><h2>Tá, eu sou maluco. Não quero ganhar o prêmio</h2></span></li>
				 	</ul>
				 <div class="votar"><input type="image" src="img_estrutura/votar.png" alt="votar" title="votar" /></div>
				 <div class="resultado"><input type="image" src="img_estrutura/resultado.png" alt="resultado parcial" title="resultado parcial"  />

[b]CSS[/b]

.listaenquetepromo, .listaenquetepromo *{margin:0;				 
										 }
.listaenquetepromo{list-style:none; 
				   width:312px;
				   float:left;
				   padding-left:0px;
				   }
				   
.listaenquetepromo li{ margin-bottom:17px;
					 }				   
.listaenquetepromo h2 {width:281px;
					   float:left;
					   height:12px;
					   padding-left:18px;
					  }
.votar {float:left; }
.resultado{float:right; }

[William Bruno 1501]

Essa marcação está bem "estranha".

Veja, primeiro você fez uma LIsta. Depois colocou um elemento nivel de bloco(h2), dentro de um span, que é um inline.

<li><input type="radio" name="enquete" value="sim" /><span><h2>Eu quero ganhar este DVD</h2></span></li>

Prefira usar as tags específicas como: <label></label>, <fieldset></fieldset>...

 

http://forum.imasters.com.br/index.php...p;hl=formulário

 

você está usando algum DOCTYPE?

 

"*", não é um atributo, e sim um SELETOR.

você deve usá-lo da seguinte forma:

* {
 margin: 0;
 padding: 0;
}

[Marcio Ricardo 0]

Obrigado Willian,

 

Mas eu fiz isso pq qdo coloquei o texto diretamente ao lado dos input sem a utilização de um algum outro box, ele ficou mais desalinhando do que estar.

 

como devo proceder para agir corretamente?

 

sim, estou usando doctype.

 

obrigado

[jsopra 0]

<form action="" method="POST">
  <table width="80%" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
	<td><input type="radio" name="qualidade" value="1"></td><td valign="middle">Baixa</td>
	<td><input type="radio" name="qualidade" value="2"></td><td valign="middle">Media</td>
	<td><input type="radio" name="qualidade" value="3"></td><td valign="middle">Alta</td>
	</tr>
  </table>
</form>

ali eu fiz uma tabela e a escrita, que é menos larga que o radio, foi alinhada ao meio.

 

Talvez isso não seja muito conveniente porque esses alinhamentos poderiam ser aplicados com css, mas resolveu o problema de forma simplificada no meu caso.

[Thiago Retondar 18]

Marcio,

 

poderia postar uma imagem de como você quer que fique o seu resultado final? http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

 

Eu fiz um formulário, válidado pela W3C, e o mais semântico possível que eu conseguir. http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

HTML:

<form class="enquetepromo" action="enquete.php">
	<fieldset>
		<legend>Enquete</legend>
		<input type="radio" name="enquete" value="sim" checked="checked" id="first" /><label for="first">Eu quero ganhar este DVD</label>
<br />
		<input type="radio" name="enquete" value="nao" id="second" /><label for="second">Tá, eu sou maluco. Não quero ganhar o prêmio</label>
		
		<input type="image" src="img_estrutura/votar.png" alt="votar" title="votar" id="votar" />
		<input type="image" src="img_estrutura/resultado.png" alt="resultado parcial" title="resultado parcial" id="resultado" />
	</fieldset>
</form>

CSS:

* {
	margin: 0;
	padding: 0;
}

form {
	width: 312px;
	float: left;
}

label {
	width: 281px;
	height: 12px;
	font-family: "Times New Roman", Times, serif;
	font-size: 24px;
	margin-left: 18px;
}

#votar {
	float: left;
}

#resultado {
	float: right;
}

Imagino que você deseja o formulário assim.

 

Abraços.

 

P.S.: Utilizei o DocType XHTML 1.0 Strict.