Ячейка таблицы внутри div имеет дополнительное верхнее заполнение

У меня есть родительский div под названием «box», а внутри него есть дочерний div «innerbox». innerboox содержит текст и значок кавычки в верхнем левом углу. Однако в верхней части div внутреннего блока есть дополнительная строка/интервал, и я не знаю, как от нее избавиться. Я пробовал свернуть границы, вертикальное выравнивание по низу и высоту строки 0, но все равно безрезультатно. Любые идеи?

Стиль

<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>

И 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>

Файл изображения доступен здесь: http://gabrieltomescu.com/quote-mark-sm.png

Спасибо!


alignment cellpadding
person Gabriel    schedule 13.01.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Начинает новую строку, когда она закрыта тегом.

Не уверен, как выглядит quote-mark-sm.png, но я предполагаю, что есть другие способы разместить его в вашем поле. Рассматривали ли вы просто сделать его фоновым изображением для «коробки» вместо того, чтобы использовать его в отдельном div? (и позиционировать его соответствующим образом)

person selbie    schedule 13.01.2011
comment
Спасибо за предложение. Я не могу сделать его фоновым изображением для окна, потому что положение зависит от размера текста. Текст выровнен по вертикали по центру, поэтому кавычка также должна следовать за ним по центру. Имеет ли это смысл? - person Gabriel; 13.01.2011
comment
Каковы размеры кавычек-sm.png? Вы можете поделиться этим файлом? - person selbie; 13.01.2011
comment
Конечно, я загрузил свой пост выше и реализовал предложение JumpingJezza, но все же получил дополнительное пространство. - person Gabriel; 13.01.2011

arrow_upward
0
arrow_downward

Изменение диапазона на div и добавление float: left сработало для меня.

<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>
person JumpingJezza    schedule 13.01.2011
comment
Спасибо, но я все еще получаю место. Я приложил ссылку на файл изображения, если это поможет. - person Gabriel; 13.01.2011
comment
какая версия браузера? это выглядит так же, как в ie и firefox? - person JumpingJezza; 14.01.2011
comment
Убедитесь, что ваш браузер не кеширует при изменении styles/css. А можно фото проблемы? - person JumpingJezza; 14.01.2011