Comillas con estilo (CSS)

Si, es una de las soluciones que había barajado, preferiría que las comillas no fueran imagenes, aunque al final va a ser la solución menos mala.

En fín, creo que al final optaré por matar al diseñador...

Mmmm, vale, acabo de ver que ponías un link a la solución que yo te doy. Jeje, ha sido cuestión de segundos.

Bueno, más fácil y sin recurrir a ningún span.

Puedes con esto, trabajando sobre blockquote y blockquote:first-letter (funciona en IE76):

blockquote{
width:300px;
font: 20px Arial, Helvetica, sans-serif;
background: url(http://www.ciudadela.es/cream/ciudadela/comillas.gif) no-repeat right bottom;
padding-right: 40px;
padding-bottom: 40px;}
blockquote:first-letter {
font: 60px Arial, Helvetica, sans-serif;
display:block;
float:left;
padding-left:40px;
background: url(http://d4nt3.files.wordpress.com/2007/03/comillas.jpg) no-repeat left top;
}

Quieto parao! El span se usa en los párrafos dentro del blockquote para dar el pego con la imagen de abajo. Pero sí, coincido contigo, diseño aparte, hay tal cantidad de clases e IDs por ahí que para una simple cita tienes que meter tags a granel... No sabía que te habías puesto tan fisno! XD

Si, eso está hecho y es una de las cosas que he probado, incluso aumentando el tamaño solo de las comillas.

Ya, vale, pero es lo que dices, primero un blockquote (vale bien correcto) luego un párrafo (si vale, puede ser una cita de varios parrafos) y luego ¿un span?¿para qué?, viva la web semántica! (además en todo caso debería ser: blockquote, span, p).

Se está ligando el diseño y el contenido que es precisamente lo que quiero evitar, que si posteriormente alguien quiere meter otro bloque igual no tenga que acordarse que tiene que meter span para apertura de comillas y otro para cierre.

Y no soy perraco (bueno si), he estado buscando soluciones por la wueb y bueno me quedo con estos dos cortesía de Jormaikel:

• http://www.designmeme.com/articles/csscurlyquotes/
  
• http://24ways.org/2005/swooshy-curly-quotes-without-images

Desgraciadamente mas o menos, todos coinciden en la forma de hacerlo y no me convence... :P

Mira lo que te he encontrado, shavá:

http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/

Una vez allí, he ido al punto 5. Pull Quotes

Y me he detenido en el ejemplo de Digital web, el del recuadro redondeado con las comillas en gris como fondo.

Me he ido a cotillearlo a su web con Firebug (cosa que deberías usar más, perraca...)

http://www.digital-web.com/articles/why_do_web_startups_die/

Y voila! Usa dos estilos, uno que pinta las tags <blockquote> con una imagen de fondo de las comillas de arriba a la izquierda, y un span que pinta la img de la comilla inferior derecha.
Échale un vistazo!</blockquote>

Puedes probar con cambiar las comillas por sus correspondiente carateres html &amp; ldquo ; para abrir y &amp; rdquo ; (los espacios después del &amp; y antes del ; no lo he dejado para que no aparezcan las comillas pero no los debes dejar) para cerrar y el tamaño ajustarlo con un span class en CSS