Jump to content
  • 0

Проблема с дивной таблицей в ИЕ


tt48
 Share

Question

Всем доброе утро.

http://beavers-net.narod.ru/schedule.html

сделал там Див'ную табличку( ввиду криворукости просто табличку я сделать не смог - мозг завернулся в бараний рог еще на второй строчке), но понятно дело возникли проблемы с отображением.

Первая и наиболее неприятная - ИЕ как-то переколбасил всю табличку и на неё стало страшно смореть.

Я бы сам, конечно, пофиксил, если б хотя б имел представление о причине.

Второй баг - Основной див( class="tabl" ) не хочет растягиваться на своё содержимое. Впрочем вот

тут только ИЕ и показывает резиновый див.

Стили к табличке в самом низу файлика style.css

Заранее спасибо.

С ув. Олег.

Edited by tt48
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Интересно, кто Вас вдохновил на подобное? Сделайте простой таблицей, это чистейшей воды табличные данные. Кроме того IE6 и IE7 не понимают, что вы от них хотите (и не поймут, никогда, для них надо каждую ячеечку вырисовывать флоатами или прочими подручными средствами), потому все эти дисплей тейблы тупо показывают как дисплей блок.

По поводу всех остальных браузеров, был блок, стало тейбл, все остальные свойства таблицы точно так же портировались, например, чтобы занять 100% ширины эту самую ширину надо в явном виде указывать.

Link to comment
Share on other sites

  • 0
  Justnewone said:
Интересно, кто Вас вдохновил на подобное? Сделайте простой таблицей, это чистейшей воды табличные данные. Кроме того IE6 и IE7 не понимают, что вы от них хотите (и не поймут, никогда, для них надо каждую ячеечку вырисовывать флоатами или прочими подручными средствами), потому все эти дисплей тейблы тупо показывают как дисплей блок.

По поводу всех остальных браузеров, был блок, стало тейбл, все остальные свойства таблицы точно так же портировались, например, чтобы занять 100% ширины эту самую ширину надо в явном виде указывать.

Меня вдохновила моя лень, потому как не смог себе представить, как это сверстать на таблице. Так что в ближайшее время я это сделать не смогу)

К тому же каждая ячейка уже и так имеет флоаты и прочие приблуды- иначе бы в опере и пр. она бы тоже не отображалась.

В общем, спасибо за ответ, но мне это недоступно, такое решение мне неинтересно, т.к. оно не раскрывает вопроса.

Link to comment
Share on other sites

  • 0

Поддерживаю: зачем городить городушки? У вас табличные данные - вот и делайте таблицей..

даже при учете того что эта страница версталась как макет для будущего вывода работы скрипта..все равно в таблицу было бы проще вывести..(хотя я не программер)))

Link to comment
Share on other sites

  • 0
  sicvolo said:
Поддерживаю: зачем городить городушки? У вас табличные данные - вот и делайте таблицей..

даже при учете того что эта страница версталась как макет для будущего вывода работы скрипта..все равно в таблицу было бы проще вывести..(хотя я не программер)))

ладноть, вопрос я уже решил самостоятельно(который с ИЕ).

Таблица - если кто сможет привести в пример вторую строку(блок понедельник, 1пара) - буду счастлив просветиться. Вчера часа три пытался, так и не врубил, чё да как.

И может кто-нибудь ответить на такой гложущий меня вопрос - почему всё-таки div class="tabl" не стал растягиваться по своему содержимому???

.tab {border: 1px solid red; background: white; width: 100%;height: 900px; overflow: visible; padding-top: 10px}
.day{clear: left; background: green; width:15px;}
.day, .nom, .subj, .week{ float: left; height: auto; overflow: visible;margin:0; padding:0; display: inline;}

.outer{background: gray; border: 0; margin:0; padding:0;}
.outer :hover > div{background: #cde;}
.outer :hover > .wouter div{background: #cde}
/*.outer :hover > .outer .outer div{background: red;}*/

.wouter{background: transparent; border: 0; margin:0; padding:0;}
div.wouter :hover > div{background: red;}

.nom{background: gray; width: 15px; }
.nomd{background: gray; width: 15px; clear: left; float: left; margin-left: 15px;}
.subj{background: silver; width: 200px}
.week{background: white; width: 15px;}
.doub{clear: both; width: 100%; height: 50%; border: 1px solid black; margin:0; padding:0;}

Link to comment
Share on other sites

  • 0

>И может кто-нибудь ответить на такой гложущий меня вопрос - почему всё-таки div class="tabl" не стал растягиваться по своему содержимому???

.. а о каком содержимом речь...там же слои..и все они жестко ограничены.... куда растягиваться-то?

Link to comment
Share on other sites

  • 0
  sicvolo said:
>И может кто-нибудь ответить на такой гложущий меня вопрос - почему всё-таки div class="tabl" не стал растягиваться по своему содержимому???

.. а о каком содержимом речь...там же слои..и все они жестко ограничены.... куда растягиваться-то?

мммм..в данном случае, они не все жеётско ограничены - они все имеют высоту auto, кроме tab , потому как он сразу сощучивается.

Про содержимое - в нём же находится вся таблица- разве это не считается содержимым?

<div class="tab">
<div class="day">D</div>
<div class="nom">№</div>
<div class="week">W</div>
<div class="subj">Группа 55</div>
<div class="week">W</div>
<div class="subj">Группа 56</div>
....

Нет, ширина как раз на автомате занимает сколько положено.

Edited by tt48
Link to comment
Share on other sites

  • 0

тебе растягивание горизонтальное или вертикальное надо??

я про ширину глаголю)

а в высоту у тебя там стоит жесткая цифра..

а про содержимо: оно у тебя жесткого размера и тянуть в ширину родителя не будет.

..а у родителей там воодще ширина не задана..только отступы..

самая верхняя в дереве ширина это проценты.. причем от 700px ))

что ты хочешь получить..? а то так долго можно))

Link to comment
Share on other sites

  • 0
  sicvolo said:
тебе растягивание горизонтальное или вертикальное надо??

я про ширину глаголю)

а в высоту у тебя там стоит жесткая цифра..

а про содержимо: оно у тебя жесткого размера и тянуть в ширину родителя не будет.

..а у родителей там воодще ширина не задана..только отступы..

самая верхняя в дереве ширина это проценты.. причем от 700px ))

что ты хочешь получить..? а то так долго можно))

в высоту там у меня стояла жёсткая цифра как временное решение.

мне нужно, чтобы табличка моя палёная была на белом фоне в красной рамочке, т.е. чтоб div class="tab" содержал в себе внутренние дивы, растягивался по вертикали.

*А это Вы хорошо приметили про содержимое))) Вставил строчку и всё тянется))) Спасибо.

Edited by tt48
Link to comment
Share on other sites

  • 0

про строку конечно да.... вот только не всегда на нужную высоту срабатывать будет...

.tab {

background:white none repeat scroll 0 0;
border:1px solid red;
padding-top:10px;
width:100%;
overflow:auto;

этот вариант делает красную рамочку над всеми внутренними))

Edited by sicvolo
Link to comment
Share on other sites

  • 0
  sicvolo said:
про строку конечно да.... вот только не всегда на нужную высоту срабатывать будет...

.tab {

background:white none repeat scroll 0 0;
border:1px solid red;
padding-top:10px;
width:100%;
overflow:auto;

этот вариант делает красную рамочку над всеми внутренними))

что интересно, вариант с пробелами после таблички , но внутри tab , в фаере даёт результат при количестве пробелов 5, при 3х не работает %) Причем на увеличении через один опять не работает.

overflow: auto; взял на заметку, Спасибо большое.

Дабы избежать пропадения нижнего бордюра в Опере пробелы пришлось оставить, теперь придётся биться с ИЕ по поводу остальных бордюров), но эт мы справимся..наверное.

Всем спасибо за потраченное время.

С уважением Олег.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy