Label su un elenco

[Felino]

Salve utenti,
ho un elenco puntato del tipo:

<ul>
  <ul id="mycarousel" class="jcarousel-skin-tango">[*]<span class="label_over"></span><div class="over_info">01<span>Marrakesh</span>Lorem ipsum dolor sit amet, consectetuer adipiscing eli...</div>[img]images/page1_pic1.jpg[/img][*]<span class="label_over"></span><div class="over_info">02<span>New York</span>Lorem ipsum dolor sit amet, consectetuer adipiscing eli...</div>[img]images/page1_pic2.jpg[/img][*]<span class="label_over"></span><div class="over_info">03<span>Parigi</span>Lorem ipsum dolor sit amet, consectetuer adipiscing eli...</div>[img]images/page1_pic3.jpg[/img][/list]

il cui css è

.jcarousel-skin-tango .jcarousel-container-horizontal { width: auto; }
.jcarousel-skin-tango .jcarousel-clip-horizontal { width: 100%; }

.label_over {
position:absolute;
background:url( '../images/pic_bg_over.png');
opacity:0.4;
height:15%;
width:13.4%;
z-index:4;
overflow: hidden;
margin-top:100px;
line-height: -2px;
}

.label_over non è altro che un'eticchetta messa su ciascun[*] ad un margine-top: 100px, praticamente una banda orizzontale...
Nel mio caso l'ho messa a 13.4% di larghezza, ma se cambio risoluzione questa non copre in orizzontale la colonna interna del[*]

Non so se sono stato chiaro...come potrei sistemarla?

Grazie.

[ResianTaxidrive]

credo ti manchi un "display: block" su .label_over.
Un elemento span, che è inline, non prende dimensioni se non lo setti a block

[Felino]

Si infatti, comunque ho risolto sostituendo lo span con il semplice div!

[ResianTaxidrive]

cio' non è corretto poichè un elemento block (come è il div) non dovrebbe stare dentro un <a> che è di tipo inline. Era corretto prima con lo span; forzando lo span a display:block hai lo stesso comportamento del div e la semantica rimane corretta.