VPF::Высота ячейки таблицы не так отображается в IE.

Elfet

Дата 14.2.2008, 18:10 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: 1
Всего: 16

http://elfet.ru/elfchat/
Вот проблема с ячейной. Не такой высоты как мне нужно:

Код


   <table cellspacing="0" cellpadding="0" class="box">        
      <tr>           
        <td class="head">             
     
          </td>        
      </tr>           
      <tr>           <td>          
          <table cellspacing="0" cellpadding="0" class="content">              
            <tr>                 
              <td class="bl" rowspan="3"></td>                 
              <td class="content" rowspan="2">
                           
                </td>                 
              <td class="bm" rowspan="2"></td>                 
              <td class="content" width="248px">
              </td>                 
              <td class="br" rowspan="3"></td>              
            </tr> 
            <tr><td id="status" class="status">Готово! (Вот эта ячейка!!!)<td></tr>              
            <tr>                 
              <td class="footer" colspan="3">


          </td>        
      </tr>  
    </table>

Код


table.content td.content {
    vertical-align: top;
    background-color: #FFFFFF;
    background-image: none;
    text-align: left;
}

table.content td.status {
    padding-left: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #999999;
    height: 23px; 
    vertical-align: middle;
    background-color: #F0F0F0;
    background-image: none;
    text-align: left;
}

Как это исправить?
Заранее спасибо!

Это сообщение отредактировал(а) Elfet - 14.2.2008, 19:05

--------------------

PHP Чат Скрипт

WebDisaster

Дата 14.2.2008, 19:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

1. В том кусочке html, который приведен выше, два открывающих тэга <table> и один закрывающий </table>. В оригинальной странице сделано так же?
2. Приведите полный код страницы, включая DOCTYPE (если он имеется). Или (ещё лучше) дайте ссылку на конкретную проблемную страницу в нете. Мне Вашу проблему воспроизвести не удалось. Всё упорно "работает правильно" и ничего исправлять не нужно.

Elfet

Дата 14.2.2008, 19:47 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: 1
Всего: 16

Ссылка вот: http://elfet.ru/elfchat/ smile

Текст полный там же smile

DOCTYPE не имеется smile

--------------------

PHP Чат Скрипт

WebDisaster

Дата 14.2.2008, 20:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

ИМХО, проблема здесь: <td class="content" rowspan="2">. Единственный вариант, который могу предложить -- переверстать html. Или убирать rowspan и делать нужную ячейку позиционированным внизу правой колонки таблицы div'ом, или убирать таблицу вообще и делать div'ами всё.

Elfet

Дата 14.2.2008, 20:58 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: 1
Всего: 16

WebDisaster, и что здесь не так? Не очень я люблю дивами делать таблицы, наверное из-за того что плохо умею это. Как-то сложно.

Цитата

делать нужную ячейку позиционированным внизу правой колонки таблицы div'ом

И как разместить див в самом низу ячейки?

--------------------

PHP Чат Скрипт

WebDisaster

Дата 14.2.2008, 21:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

В ячейку вкладываем блочный элемент (например <p>), внутри которого выводим нужный текст. Внешней ячейке присваиваем position: relative

css примерно такой:
table.content td {position: relative;}
table.content td p {width: 100%; height: 23px; background-color: f0f0f0; position: absolute; bottom: 0; color: #999999; text-indent: 10px;}

Возможны варианты (вроде valign)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »