Menú de flujo horizontal, mediante <ul>

[Tomas_Lleida]

Hola a todos,
hace un par de día que me estoy peleando con el siguiente tema...

Necesito crear un menú horizontal de flujo (no puedes pasar a la siguiente pantalla, sin haber rellanado la pantalla actual). Mi idea para maquetarlo es usar una Unordered List mediante <ul>, <li> y <a> anidados. Del siguiente modo:

Código:

<div id="AplZonaFlujo">
        <ul>
          <li class="first">
           <a href="#">Flujo 01</a>
	</li>
		  <li class="current">
           <a href="#"> Flujo 02</a>
		  </li>
		  <li>
           <a href="#">Flujo 03</a>
		  </li>
          <li class="disabled">
            <a>Traspasar</a></li>
          <li class=" last">
           <a href="#">Flujo 04</a>
		  </li>
        </ul>
      </div>

Como cada elemento de la List tiene diferentes estados (current, disabled, last y first)... se coloca una imagen diferente segun la clase en el background de los <li>. Hasta ahí bien.

Me surge el siguiente problema:

* El texto del item se pone en el <a></a>.. hasta ahi perfecto. Pero cuando el literal del texto ocupa mas de una linea... desplaza la imagen de fondo del <li> para arriba en IE8 !!
A ver si con vuestra ayuda.. me dais una solución cross-browser (almenos FF e IE) del CSS.

Muchas gracias de antemano!

Un saludo!

[Tomas_Lleida]

Adjunto una imagen del error:

[URL="http://img816.imageshack.us/i/2010914945.png/"]http://img816.imageshack.us/i/2010914945.png/[/URL]