Table-cell inside div has extra top padding

Question

I have parent div called "box", and inside it there's a child div, "innerbox". innerboox holds text and a quote mark icon in the top left corner. However, there's an extra line / spacing at the top of the innerbox div, and I don't know how to get rid of it. I've tried border-collapse, vertical-align bottom, and line-height 0 but still to no avail. Any ideas?

The Style

<style>
.quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; position: relative; top: 13px; left: -20px;}
.box {width: 350px; height: 350px; padding-left: 55px; float: left; padding-top: 140px; display: block; float:left; background: #CCC;}
.innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000;  font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; }
</style>

And the HTML

<div class="box"><div class="innerbox"><div class="quote"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis.</div></div>

Image file available here: http://gabrieltomescu.com/quote-mark-sm.png

Thanks!

Answer 1

Changing your span to a div and adding float: left worked for me.

<style type="text/css">
    .quote {display:block; width: 16px; height: 11px; background: url(img/quote-mark-sm.png) no-repeat 0 0; float: left;}
    .box {width: 350px; height: 350px; padding-left: 55px; padding-top: 140px; display: block; float:left; background: #CCC;}
    .innerbox {width: 248px; height: 72px; display: table-cell; border: 1px solid #000;  font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000; text-align: left; vertical-align: middle; }
</style>

HTML:

<div class="box">
     <div class="innerbox">
          <div class="quote"></div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus sapien, consectetur nec malesuada a, vulputate vitae leo. Donec at urna sed odio volutpat gravida a sed felis.
     </div>
</div>

Answer 2

The is starting a new line when it is closed with the tag.

Not sure what quote-mark-sm.png looks like, but I'm guessing there are other ways to position it within your box. Have you considered just making it the background image for "box" instead of using it in a seperate div? (and positioning it appropriately)