[SOLUCIONADO] se reduce el link

[Gustavo1973]

no se bien como explicarlo, pero lo que me sucede, es que se reduce el alto del link en un texto.
tengo este codigo

Código HTML:

<div class="barrasa">
        <div align="right"valign="middle"><a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>&nbsp;&nbsp;
                 </div>
</div>
 

Código CSS:

.barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
.barrasa div {top:10px;position:relative}
.barrasa a {color:#f78e28;}
.barrasa a:hover {color:#fff;}
 

pero al pasar el mouse sobre el texto, no capta el link en la mitad inferior de la linea del texto.
No se bien como explicarlo, voy a poner una imagen

aqui pueden ver sobre el margen derecho, a que altura hace el cambio de hover en el texto


nunca me paso esto!!!

[BramSt]

Yo soy muy novato, pero no sé, miraría a ver si dándole un tamaño al div contenedor del link y luego haciéndole al link un display: block pudiera así ocuparte todo el div y solucionar el problema. Igual como el link es por naturaleza un elemento en linea (creo recordar), pueda venir por ahí...

[g3kdigital]

Hola, intente reproducir el error únicamente con el código html y css que nos pasaste y a mi si me funciona perfectamente, por lo que supongo, hay un elemento html o clases css que faltan y son las que te hacen el daño.

Sin embargo te tengo que aconsejar no colocar: "align="right" o valign="middle" este ultimo ni funciona, así como nunca usar    para separar el elemento del borde, eso puedes hacerlo fácilmente y validado 100% con CSS

Código HTML:

<div class="barrasa">
  <div><!--ves como le quite esos atributos obsoletos?-->
    <a href="http://localhost/MCA-iluminaria/registro/">
      Entrar | Registrarse
    </a>
  </div>
</div>
 

Código CSS:

.barrasa div
{
  text-align: right;
  padding-right: 10px;
  line-height: 50px;
}
 

Esto funciona porque has declarado una altura estática de 50px al contenedor.

Nota: Hazle caso a BramSt y declarale al enlace un display: block, dale un color de fondo para probar sus limites y juega añadiendole padding: la medida que quieras; es una forma fácil de testear los limites de un elemento.

[Gustavo1973]

Perdón que no seguí el hilo que inicie, pero ando con unos problemitas familiares.
Les cuento que si el texto queda alineado a la izquierda, el problema no sucede, pero lo quiero alineado a la derecha.
ahora lo hice asi

Código HTML:

<div class="barrasa">
        <div class="es">            <a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>
                </div>
</div>
 

Código CSS:

.barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
.barrasa .es{text-align: right;
  padding-right: 10px;
  line-height: 50px;}
.barrasa a {color:#f78e28;}
.barrasa a:hover {color:#fff;}
 

Pero sigue con el problema

[Amiancht]

Iniciado por Gustavo1973

Perdón que no seguí el hilo que inicie, pero ando con unos problemitas familiares.
Les cuento que si el texto queda alineado a la izquierda, el problema no sucede, pero lo quiero alineado a la derecha.
ahora lo hice asi

Código HTML:

<div class="barrasa">
        <div class="es">            <a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>
                </div>
</div>
 

Código CSS:

.barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
.barrasa .es{text-align: right;
  padding-right: 10px;
  line-height: 50px;}
.barrasa a {color:#f78e28;}
.barrasa a:hover {color:#fff;}
 

Pero sigue con el problema

¿se puede ver tu página en algun sitio?... si no puedo analizarlo con el firebug poco puedo ayudar XD.

[Gustavo1973]

Perdón, dentro del header del lado derecho, tengo otro menú con position:relative y por la altura, cubría parte del texto. Eso hacia que el cursor no activara el link.
Gracias por su ayuda y disculpen las molestias!!!