style="position: relative - дает внизу пустое место.

[Tisa]

Есть большая картинка в ячейке таблицы, заключаю ее в <Div>, что-бы дальше указать относительное положение текста, сверху на картинке.
При этом под большой появляется пустое место.
Чем больше текстовых объектов сверху на картинке, тем больше полоса в низу.

Помогите, весь день бъюсь...
Вот примерный код:

PHP код:


<table  border="0" cellpadding="0" cellspacing="0">
    <tr valign="top"><td>
        <div style="">    
                <img src="fon.jpg" width="780" height="189"  border="0" >
        
                    <span style="position: relative; top: -145px; left:325px;">
                            ТЕКСТ!!!!!!!!!!
                     </span>
            </div>
    </td></tr>
    <tr valign="top"><td>
            <img src="fon.jpg" width="780" height="189"  border="0" >
    </td></tr>
</table> 


Внизу повторил картинку повторно, что-бы было видно полосу.
Подскажите плз., с чем это связано.

[Hubbitus]

Связано это с тем, что при относительном положении оно смещаться-то смещается, а вот место и там занимает.

Как вариант, не делайте такого позиционирования, сделайте просто картинку фоном, вот и все.

[Tisa]

Решение найдено.
Может кому-то поможет, в будущем:

PHP код:

<div style="background: url('fon.jpg') no-repeat center; width: 780px; height: 189px;">    
                    <div style="position: relative; top: 10px; left:10px;">
                            ТЕКСТ!!!!!!!!!!
                   </div>
     </div>