/ Регистрация

  1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.

Профессионалы HTML (табличная верстка), помогите!!!

Тема в разделе "Программирование", создана пользователем Arca.de, 29.11.07.

  1. 29.11.07 #1
    Arca.de

    Arca.de Гость

    Столкнулся с проблемой при табличной верстке. Есть разметка таблицы: четыре столбца (это менять нельзя). Внутренний код выглядит следующим образом:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>#</title>
    <style>
    td { vertical-align: top; }
    </style>
    </head>

    <table width="100%" cellpadding="2" border="1" cellspacing="10">
    <!-- Block 2 -->
    <tr>
    <td colspan="2" id="td_left"><div style="background: red;" id="div_left">xxxx<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></td>
    <td colspan="2" id="td_right" rowspan="2"><div style="background: blue;" id="div_right">xxxx<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></td>
    </tr>
    <tr>
    <td rowspan="2"><div>zzzz</div></td>
    <td rowspan="2"><div>aaaa</div></td>
    </tr>
    <tr>
    <td><div>bbbb</div></td>
    <td><div>cccc</div></td>
    </tr>
    <!-- X. Block 2 -->

    В Mozilla и Opera это работает отлично. Но в Internet Explorer 6 и Internet Explorer 7 ячейки таблиц растягиваются по высоте :(
    В результате ячейки под ними оказываются значительно ниже, чем должны быть.

    <a href="http://www.xhtmlplus.com/dll/bug.html">Посмотреть пример</a>

    Пытался в стилях прописать _font-size: 0; для ячеек, которые растягиваются больше, чем надо, но такой вариант тоже не прокатил. (при большом кол-ве контента все равно растягивается).



    Вторая проблема заключается в том, что эти два блока (назовем их условно "красный" и "синий") неизвестной высоты. Т.е. любой из них может быть больше другого по высоте. А ведь rowspan="2" должен иметь именно этот блок. Я написал простенький JavaScript для определения высоты блоков:

    <script type="text/javascript">
    var tleft = document.getElementById('td_left');
    var tright = document.getElementById('td_right');
    var dleft = document.getElementById('div_left');
    var dright = document.getElementById('div_right');
    var lh = dleft.clientHeight;
    var rh = dright.clientHeight;

    if(lh > rh)
    {
    tleft.rowSpan = 2;
    }
    else
    {
    tright.rowSpan = 2;
    }
    </script>

    Но опять же :( в мозилле и опере работает отлично, а в интернет эксплорере 6 и 7 "clientHeight" просто не подхватывается. Перепробовал уже кучу вариантов. Может, у кого-нибудь будет свежее решение.

    <a href="http://www.xhtmlplus.com/dll/bug2.html">Посмотреть пример</a>

    P.S. Если я забыл указать какие-либо важные детали, стучитесь в ICQ: 315853465.

    Заранее спасибо всем, кто откликнется.
    Max P.
     
  2. 29.11.07 #2
    RubiN

    RubiN Активный участник

    6.629
    425
    DreamWeaver поставь себе :super:
     
  3. 30.11.07 #3
    Max P.

    Max P. Гость



    Спасибо, Zombie, но ты не так понял. Проблема не в том, как сделать такую табличку, а в том, как победить Internet explorer в пересекающемся rowspan типа:

    <table>
    <tr>
    <td></td>
    <td rowspan=2></td>
    </tr>
    <tr>
    <td rowspan=2></td>
    </tr>
    <tr>
    <td></td>
    </tr>

    </table>

    Спасибо.
    Max P.
     
  4. 30.11.07 #4
    Cygnus

    Cygnus Активный участник

    753
    0
    Я чего-то не понял, td-ки тут все вытягиваются, они не могут не вытягиваться:) другое дело div, которые ты воткнул. дык проставь им в стиль height=100%
     
  5. 01.12.07 #5
    Шелудивый кот

    Шелудивый кот Активный участник

    12.135
    762
    Arca.de,
    Max P.,
    Забей, IE все равно никто не пользуется ;)
     
  6. 06.12.07 #6
    Arca.de

    Arca.de Гость

    clientHeight

    Проблему с clientHeight решил. Надо JavaScript просто было поставить после таблицы, а не внутри нее.

    Проблема с растягиванием <tr> все равно осталась.

    Без IE никак низзя.

    Спасибо.
    Max P.
     
50 | датчик tf65 t купить | телепрограмма челябинск кино тв | санни пелант | трое в парке не считая собаки спектакль сколько идет