Opera no responde tan bien como dicen

[Caminantejm]

Estoy haciendo una pequeña sombra en un título.

Código CSS:

#curso {border: 1px solid tan;
width: 245px;
    color: #800000;
line-height: 1.4em;
float: left;
margin: 0 auto;
position: relative;
}
 
.nombre {
padding-bottom: 0.1em;
    font-size: 1.5em;
    font-weight: bold;
    color: #ec863a; /* 800000 */  /* #9b700b */
    text-align: left;
    border-bottom: 1px solid #800000!important;
    margin-bottom: 0.5em;
    position: relative;
    top: 0px;
right: 0px;
        z-index: 1;
    
}
 
.sombranombre { border: 1px solid aqua;
    font-size: 1.5em;
    font-weight: bold;
    color: #800000;  /* #f4b31a; */
    border-bottom: 0px solid #f4b31a;
    margin-bottom: 0.5em;
    position: absolute;
top: 1px;
right: 2px;
z-index: 0;
}
 

Código HTML:

<div id="curso">
 
<p class="nombre" >Curso primero</p>
<p class="sombranombre" >Curso primero</p>
 
 
</div>
 

Todo está correcto. Reponde en todos los navegadores (IE, Mozilla, Crome, Safari)menos en Opera. Había oído que Opera era excepcional. Pues parece que menos excepcional.
En esto tiene un grave problema.
Para concretar. La position: absolute (con top:0px y left:0px )debería estar en la esquina superior izquierda de cursos. Y Opera lo pone donde le parece bien.
--> ¿Alguien sabe cómo resolverlo?

Gracias de antemano.
Caminantejm

[Tecna]

Buenas,

el código que has puesto yo lo veo igual de mal colocado con firefox y con opera, pero si cambio la propiedad de la linea 33 por left lo veo bien en los dos.

Opera es un muy buen navegador, muy rápido, y que mucha gente usa, también en otros dispositivos como consolas o móviles, de los primeros en pasar el acid3 y en dar soporte a los selectores css3, se puede comprobar aquí:

http://tools.css3.info/selectors-test/test.html

y aqui:

http://acid3.acidtests.org/

Por otro lado yo te aconsejaría no sacrificar el contenido por el diseño, incluir 3 elementos sólo para dar un efecto de sombra no es muy aconsejable, además si no dispones de css verías dos textos con el mismo contenido. Si como parece es un título, lo correcto sería usar las etiquetas <h1>, <h2>.. en función de la profundidad de la estructura del documento y así siempre tendrás un documento estructurado correctamente.

[Caminantejm]

Gracias Tecna.

Efectivamente, funciona bien ya.
1. ¿Por qué lo hice así? Porque en las innumerables vueltas que he dado buscando interpretar position -y te aseguro que han sido muchas horas- vi que también se podía "posicionar" desde right. Ya veo que, aunque los cuatro navegadores lo soporten, no debe ser la norma. Gracias.
2.- Tienes razón con las simplicidad del texto, pero creía que podía ser original y bueno. Es más, que css está para dar más posibilidades en el diseño. Mi objetivo era el detalle de una pequeña sombra.
Yo supongo que todos los navegadores soportarán css.
En fin, si me dices que no es muy profesional lo abandonaré el efecto.

Gracias de nuevo.
Caminantejm

[danneg]

opera ya implementa box-shadow y text-shadow