Estoy haciendo una pequeña sombra en un título.
Código CSS:
Ver original#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:
Ver original
<p class="nombre" >Curso primero
</p> <p class="sombranombre" >Curso primero
</p>
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