CSS Pullquote mit Bildern

Question

Ich versuche, einen Stil für eine Pullquote zu machen, die ein Bild in der oberen linken und unteren rechten Ecke des div enthält. Meine aktuelle Lösung funktioniert in Safari, aber in Firefox wird nur das Endangebot angezeigt, obwohl der Platz für das Anfangsangebot dort ist.

Dies ist die CSS und 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

Die Bilder 40px breit und 31px breit.

Answer 1

Sie würden wirklich alle Ihre Cross-Browser-Probleme (und speichern Sie viele Kopfschmerzen) mit einem anderen Div in Ihrem div.

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

Answer 2

Haben Sie versucht, mit (für die obere linke Bild), um die Wähler:

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

Und ich bin mir nicht sicher, aber die Bildposition aus dem übergeordneten Elemente vererbt werden würde (und also möglicherweise das Bild nicht positionieren, wo es sein soll)?

Meine Idee für die Verwendung :first-child ist, dass es dann egal ist, welches Element zuerst in der .pullquote kommt, wird es immer noch den Hintergrund bekommen.

Answer 3

Lösung:

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>