3

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!

Gabriel
  • 103
  • 1
  • 4
  • 13

2 Answers2

0

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)

selbie
  • 100,020
  • 15
  • 103
  • 173
  • Thanks for the suggestion. I can't make it the background image for "box" because the position is relative to the size of the text. The text is vertically aligned centre, so the quote mark has to "follow" it centred as well. Does that make sense? – Gabriel Jan 13 '11 at 07:26
  • What are the dimensions of quote-mark-sm.png? Can you share this file? – selbie Jan 13 '11 at 07:59
  • Sure I uploaded my post above, and implemented JumpingJezza's suggestion, but still getting the extra space. – Gabriel Jan 13 '11 at 08:08
0

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>
JumpingJezza
  • 5,498
  • 11
  • 67
  • 106