CSS Pullquote with images

Question

I'm trying to make a style for a pullquote that includes an image at the top left and bottom right corners of the div. My current solution is working in Safari, but in Firefox, only the end quote displays, although the space for the beginning quote is there.

This is the HTML:

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.

<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 tellus sem, dictum tincidunt.</p>

And this is the CSS:

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;

}

The images are 40px wide and 31px wide.

Answer 1

you would really solve all your cross-browser issues (and save lots of headache) with another div inside your div.

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

Answer 2

Have you tried using (for the upper-left image) the selector:

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

And, I'm not sure, but would the image position be inherited from the parent element (and so, possibly, not position the image where you want it to be)?

My idea for using :first-child is that it then doesn't matter what element comes first in the .pullquote, it'll still get the background.