CSS Pullquote avec des images

Question

J'essaie de faire un style pour un pullquote qui comprend une image dans les coins en haut à gauche et en bas à droite de la div. Ma solution actuelle fonctionne dans Safari, mais dans Firefox, seule la citation de fin s'affiche, bien que l'espace pour la citation de début soit là.

C'est le CSS et HTML:

div.pullquote-right{ 
 
    width: 200px; 
 
    background-image: url(../img/quote_right.png); 
 
    background-repeat: no-repeat; 
 
    background-position: bottom right; 
 
    padding-right: 40px; 
 
    font-size: 1.5em; 
 
    font-weight: regular; 
 
    color: #a8ada4; 
 
    letter-spacing: 4px; 
 
    float: right; 
 
    text-indent: -50px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 50px; 
 
    font-family: Georgia; 
 

 
} 
 

 
div.pullquote-right:first-letter{ 
 
    background-image: url(../img/quote_left.png); 
 
    background-repeat: no-repeat; 
 
    padding-left: 40px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae nisi vel tellus pellentesque egestas quis vitae tortor. Nam volutpat felis at dui aliquet vestibulum. Integer vitae erat vel massa tincidunt placerat. Nam ornare aliquam est, vitae imperdiet.</p> 
 

 
<div class="pullquote-right">&nbsp;Etiam eu vestibulum lorem. Fusce sollicitudin</div> 
 

 
<p>Etiam eu vestibulum lorem. Fusce sollicitudin ultricies malesuada. Etiam nec dolor in erat sodales molestie vitae ut ligula. Ut in tortor neque. In ut magna lectus. Aliquam

Les images sont 40px de large et 31px de large.

Answer 1

vous résoudriez vraiment tous vos problèmes de cross-browser (et sauviez beaucoup de mal de tête) avec un autre div dans votre div.

div.pullquote { make your top-left quote, with left padding } 
div.pullquote div { make your bottom-right quote, with right padding } 

Answer 2

Avez-vous essayé d'utiliser (pour l'image en haut à gauche) le sélecteur:

div.pullquote:first-child 
{ 
background: transparent url(../img/quote_left.png) top left no-repeat; 
} 

Et, je ne suis pas sûr, mais je la position de l'image être héritée de l'élément parent (et donc, peut-être, ne pas positionner l'image où vous voulez qu'elle soit)?

Mon idée pour l'utilisation :first-child est que peu importe quel élément vient en premier dans le .pullquote, il obtiendra toujours l'arrière-plan.

Answer 3

Solution:

CSS

.quote{position:relative; padding:0 20px} 
.quote:before{content:''; width: width of quote_left img; height: height of quote_left img; position:absolute; top:0; left:0; background: transparent url(../img/quote_left.png) no-repeat scroll 0 0;} 
.quote:after{content:''; width: width of quote_left img; height: height of quote_left img; position:absolute; bottom:0; right:0; background: transparent url(../img/quote_right.png) no-repeat scroll 0 0;} 

HTML:

<div class="quote">Content here...</div>