Hola pues al final por mucho que me fastidie tuve que cambiar el diseño. Sinceramente me gustaba más tener la barra encima, pero no conseguía que se viera bien. Así que decidí bajar la barra y subir arriba las celdas.
Este es el resultado:
IE6 / IE7 / Safari / FireFox 3.6 / Google Crome: Aprobados.
Opera: Sigue mostrando fallos.
Lo que hace en el Opera es muy parecido a lo que me hacía anteriormente. El fallo debe de ser algo del CSS supongo, pero no dí con las solución. Lo que sí creo que esta relacionado, es que, el "texto" de alguna manera tiene mayor "jerarquía" sobre la "barra".Luego revise las herencias del css sin ver nada en concreto y lo cierto es que probé con z-index sin mucha suerte. Pensaba que podría ser cosa de capas o algo relacionado con alguna propiedad de la etiqueta "a" por aquello de que son enlaces.
Mi duda es, si existe algún tipo de orden jerárquico o primario del texto sobre una imagen en estos casos que se tenga que definir en el CSS y a mí se me pasara.
Saludos.