Ho un sito pieno di forms e sto cercando di raggruppare i campi tramite fieldset e legend.
Ho letto in giro che per gestire il campo legend spesso si agisce con un barbatrucco su un elemento span al suo interno. Tuttavia per qualche motivo che ignoro lo span copre completamente il primo campo del form. Come posso risolvere?

form.html
codice:
<form action="" method="">
	<fieldset>
		<legend><span>Elemento Span dentro Legenda</span></legend>
		
  1. 
				<label for="campo">Elemento Campo</label>
				<input id="campo" title="Campo" name="campo" type="text" />
			
		

	</fieldset>
</form>
Utilizzo due CSS, uno si chiama reset.css, l'ho preso online ed il nome è abbastanza autoesplicativo, l'altro è form.css che secondo me ha un problema sul posizionamento del fieldset. In ogni caso vorrei ottenere un effetto simile a quello prodotto (chiaramente riuscendo a vedere il campo), riempendo in lunghezza il contenitore con il background blu.

reset.css
codice:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
form.css
codice:
body{
  background-color:#FFF;
  color:#333;
  font:75%/1.4 Helvetica,Verdana,Arial,sans-serif;
  margin:3em auto;
  width:74%;
}

fieldset{
  border:none;
  padding:1.5em;
  padding-top:0;
  position:relative;
}

ol{
  list-style:none;
  margin-top:3em;
}

li{
  padding-bottom:1em;
}

legend span{
  background-color:#01009E;
  color:#FFF;
  font-size:1.5em;
  padding-left:1em;
  top:0;
  position:absolute;
  width:100%;
}

label{
  float:left;
  margin:5px 10px 0 0;
  width:15em;
}
Grazie, spero di essere stato chiaro!