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!