Barra de progreso en HTML y CSS

Esta tarde he estado trabajando en la página de mecanografía.

El caso es que he perdido muchísimo tiempo para realizar una tarea que en principio parece una chorrada.

Quería hacer una barra de progreso normal y corriente, con un color de fondo, el borde en negro (de un pixel de grosor) y el texto que yo eligiera en el centro.

El problema, como siempre ha venido con la incompatibilidad de los navegadores. Lo que funcionaba en Firefox no funcionaba en Internet Explorer y viceversa. Además también funciona de categoría para Opera.

Finalmente, tras muchos intentos de prueba y error, he conseguido lo que quería. A continuación se puede ver el resultado:

Para los interesados, pinchad aquí para ver el ejemplo de la barra de progresos. Si mirais el código fuente vereis lo sencillito que se ha quedado al final.

Nota: Al final he perdido casi más tiempo tratando de poner la barra de progresos en este artículo (WordPress no me deja poner HTML en plano) que programando la barra de progresos. Finalmente he optado por pasar olímpicamente de poner el ejemplo HTML embedido en este artículo y he puesto la imagen.

Actualización: acabo de leer un artículo bastante completo sobre otras soluciones para dibujar barras de progreso y gráficos. Muy interesante :)