Using quote as background image IE issue

Question

I am pretty sure that using line-height is not the best option here but it works for Chrome, Firefox - IE seems to have issues with alignment.

Any hint? What I should should try here - jsfiddle.net/9AZyr/1/

Thank you!

Answer 1

I floated the pseudo elements. The closing quote is to the right, away from the period. But here was my though, you can't predict where the end of the sentence is on any 1 screen. Instead forcing it to the far right sort of lines things up more consistently. It also causes the text to flow around the closing image.

http://jsfiddle.net/9AZyr/3/

.quotetestimonial3:after {
content: url('http://dhrumin.com/uploads/glyph-white2.png');
margin-left: 10px;
margin-top:-1em;
vertical-align: text-top;
line-height: 250%;
clear:both;
float:right;

}