un fondo para dos tamaños de letra distintos

[oom]

Saludos a todos. Mi problema es el siguiente:
Tengo unos vínculos hechos con un título en grande y debajo en pequeño una definición de ese título. Los etiqueto como <strong> y <dfn> respectivamente y los separo mediante un <br>.
Lo que quiero es que todo el vínculo que es blanco sobre fondo negro, pase a ser negro sobre fondo blanco al poner el cursor encima. Eso lo he conseguido con estos estilos:
a {
color: #FFFFFF;
text-decoration: none;
}
body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial;
}
a:hover {
color: #000000;
background-color: #FFFFFF;
}
strong {
font-size: 36px;
line-height: 28px;
}
dfn {
font-size: 12px;
line-height: 12px;
}

y luego sólo tuve que poner el texto así:
<p><a href="#"><strong>esto es el titulo</strong><br>
<dfn>y esto una definicion</dfn></a></p>
El problema es que menos en explorer, en los otros navegadores utiliza el mismo fondo para las dos líneas, y la de arriba, al tener un texto muy grande, no se lee. Lo único que se me ocurrió poner fué añadir este estilo más:
strong:hover {
background-color: #FFFFFF;
}

pero no me acaba de convencer.
¿alguien sabría algún metodo mejor?
Gracias y saludos a todos.

[PatomaS]

Hola

Bueno, veamos

Si quieres que ambos tengan el mismo fondo hay vartias maneras, por ejemplo, podrías meterlos dentro de un div y asignarle el color de fondo al div y no a los vínculos.

Tambien podrías agregar a los elementos que ya tienes un display: block; junto con un width para que cada línea sea como un bloque y le cambias el color cuando quieras, por ejemplo al pasar el ratón por encima.

Respecto a lo de que no se lea bien ¿te refieres a que no se ve clara la letra? ¿no te gusta el contraste? ¿...?

Una recomendación, en vez de pixels, utiliza puntos, se suele ver más uniforme, es decir, de la misma manera en todos los navegadores.

Bueno ya nos dirás algo más

Suerte

Felicidad

[Cain]

Pon dos enlaces distintos y usa

strong a {
para el enlace dentro del strong
}

dfn a {
para el enlace dentro de la dfn
}

[oom]

Lo de que no se lea bien me refiero a que el fondo del texto "strong" tiene el mismo tamaño que el del texto "dfn". Al ser el texto en strong mucho mas grande, este sobresale del fondo por arriba y al estar el texto en negro igual al fondo de la página no se lee. Sólo se ve la parte inferior del texto que coincide con el fondo blanco.

Voy a provar vuestras sugerencias haber que pasa y ya os contaré el resultado

Saludos

[oom]

Bueno, ya prové vuestras recomendaciones. La que más se ajusta a lo que buscaba es la de poner todo en un div, ya que usando el comando display:block no funciona despues el formato a:hover. En cuanto a lo que me dijo Cain, mi idea era la de poner un único vínculo, para que cambiase el título y la definición al mismo tiempo. De todas maneras, gracias por vuestra ayuda. Y si teneis alguna idea mejor, soy todo oídos.

Saludos.