Stile per elemento Legend

[^EvAmPiReS^]

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

<form action="" method="">
	<fieldset>
		<legend><span>Elemento Span dentro Legenda</span></legend>
		

				<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

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

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!

[ResianTaxidrive]

perchè questo posizionamento?

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

[^EvAmPiReS^]

Pensavo ad una roba tipo questa:

http://lau.csi.it/realizzare/accessi...on/rel-abs.htm

con fieldset relative e legend span absolute, ma evidentemente mi sbagliavo.

[ResianTaxidrive]

non credo sia necessario nel tuo caso seguire quell'esempio, cmq al di là di questo, ho provato il tuo codice ma non riscontro il problema che hai detto. IL campo non viene coperto da nessuno.

[^EvAmPiReS^]

A me viene coperto, sia su Chrome che su Firefox.
Ma non esiste una risorsa online, un modo "standard" di creare form accessibili e decenti alla vista? Non mi interessa che la loro vista susciti sospiri di ammirazione, solo che siano leggibili ed ordinati. Grazie intanto per la risposta!

EDIT: Scusa, su Firefox FUNZIONA. Il problema è su Chrome e Explorer (veramente disastroso!).

[ResianTaxidrive]

Con explorer 8 lo vedevo bene, in effetti con Chrome no.

GUarda ho fatto così:

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

e

legend span{
background-color:#01009E;
color:#FFF;
font-size:1.5em;
padding-left:1em;
display:block;
height:30px;
width:100%;
}

e le cose si sistemano notevolmente.
Poi magari utilizza un doctype di tipo strict così hai anche maggior uniformità di resa.

[^EvAmPiReS^]

Grazie, molto gentile. Mi rimane solo il problema su Chrome, dove l'estensione del background blu è limitata, ma va bene son già passi da gigante per me.