VPF::WebKit и table-layout:fixed - Форум программистов

ksnk

Дата 11.10.2008, 09:59 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Имею примерно такую разметку

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>iPHP</title></head>
<body>
<table style="width:100%;table-layout:fixed;" border=1>
  <col width="662px"><col width="50px">
  <col width="100%"><col width="211px">
<tr>
  <td ><div style="height:26px;">&nbsp;</div></td>
  <td rowspan=2 colspan=2 >
    <div style="height:47px;width:100%; background:gray;">&nbsp;</div>
  </td>
  <td rowspan=2  style="padding-left:20px;color:#c5581a;">
  {userhello|Вход для<br>зарегистрированных<br>партнеров}
  </td>
</tr>
<tr>
  <td style="background:white;height:26px;"></td>
</tr>
</table>
</body></html>

В IE и FF оно ведет себя вполне адекватно, центральный серая ячейка сужается до положеных ей 50 px и расширяется до упора, по необходимости. В Хроме эта ячейка фиксирована и расширяется самая правая...

есть какие-нибудь идеи как можно в Хроме сделать так-же как и в остальных броузерах? Вместо Хрома можно смотреть, видимо, любым WebKit-based броузером.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

bars80080

Дата 11.10.2008, 10:05 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

а почему у тебя в верхней строчке 4 ячейки, а в нижней только одна?

ksnk

Дата 11.10.2008, 10:12 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

bars80080, О! Это мое нов-хау smile

"серая" ячейка растянута на 2 строчки и на 2 ячейки (-2 ячейка в нижней строке). Ячейка за ней тоже растянута на 2 строчки (-1). Итого - достаточно одной ячейки...

Добавлено через 8 минут и 34 секунды
Такой трюк - это своеобразная кроссброузерная( как я раньше думал) замена min-width для ячейки таблицы.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

webster

Дата 11.10.2008, 10:53 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>iPHP</title></head>
<body>
<table style="width:100%;table-layout:fixed;" border=1>
    <colgroup>
  <col width="662px" />
  <col width="100%" />
  <col width="211px" />
  </colgroup>
<tr>
  <td ><div style="height:26px;">&nbsp;</div></td>
  <td rowspan=2 >
    <div style="height:47px;background:gray;">&nbsp;</div>
  </td>
  <td rowspan=2  style="padding-left:20px;color:#c5581a;">
  {userhello|Вход для<br>зарегистрированных<br>партнеров}
  </td>
</tr>
<tr>
  <td style="background:white;height:26px;"></td>
</tr>
</table>
</body></html>

Как альтернатива, правда минимальный размер совсем не фиксируется для центральной ячейки, но его можно "зарезервировать", установив ограничения для самой страницы-контейнера (т.к. все-равно установлены фиксированные размеры боковых ячеек и известен минимальный размер центральной)

P.S. Впринципе Хром прав, ведь вы сами установили фиксированный размер второй ячейки, а именно она и объединяется и после объединения остается второй:

Код


<col width="662px"><col width="50px">

Возможно, что Хром воспринимает последнюю запись в группе:

Код


  <col width="662px"><col width="50px">
  <col width="100%"><col width="211px">

как для четвертой - <col width="211px"> - (уже не существующей после объединения ячеек) ячейки как излишнюю, попробуйте ее убрать и вы увидите, что таблица примет нормальный вид.

Это сообщение отредактировал(а) webster - 11.10.2008, 11:02

ksnk

Дата 11.10.2008, 12:01 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

webster, Ну, в принципе, да! вот такое будет выглядеть примерно так, как мне надо. сверху добавлен дивчик, который мешает схлопнутся таблице.

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>iPHP</title></head>
<body>
<table style="width:100%;"><tr><td><div style="background:red;width:923px;height:10px;"></div><td></tr>
<tr><td>
<table style="width:100%;table-layout:fixed;" border=1>
  <col width="662px">
  <col width="100%"><col width="211px">
<tr>
  <td ><div style="height:26px;">&nbsp;</div></td>
  <td rowspan=2 style="min-width:50px;" >
    <div style="height:1px;width:50px;">&nbsp;</div>
    <div style="height:47px;width:100%; background:gray;">&nbsp;</div>
  </td>
  <td rowspan=2  style="padding-left:20px;color:#c5581a;">
  {userhello|Вход для<br>зарегистрированных<br>партнеров}
  </td>
</tr>
<tr>
  <td style="background:white;height:26px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>

Цитата

P.S. Впринципе Хром прав,...

10000000 леммингов не могут быть неправы smile

IE и FF, забравшие практически весь рынок броузеров, безусловно глючат в этом месте... smile

Добавлено через 1 минуту и 18 секунд
Осталось только добится одинаковой картинки во всех этих *sensored* броузерах... smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

webster

Дата 11.10.2008, 12:13 (ссылка)

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

Загрузка ...

Опытный

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

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

Похоже, что IE6 плюсует паддинг к ширине последней ячейки, а IE7 ленится отображать нижнюю ячейку без контента (хотя бы пробела).

ksnk

Дата 11.10.2008, 12:42 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Ok! Всем спасибо. На первый взгляд - mission complete...

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>iPHP</title>
<style>
/* общий кусок */
body {
    margin: 0;
    padding: 0;
}

table {
    border: 0px;
    border-collapse: collapse;
    padding: 0px;
    margin: 0;
}

table td,table th {
    border-spacing:0;
    padding: 0px;
    margin: 0;
}
</style>
</head>
<body>
<table style="width:100%;"><tr><td><div style="background:red;width:923px;height:10px;"></div><td></tr>
<tr><td>
<table style="width:100%;table-layout:fixed;" >
  <col width="662px">
  <col width="100%"><col width="211px">
<tr>
  <td ><div style="height:26px;">&nbsp;</div></td>
  <td rowspan=2 style="min-width:50px;" >
    <div style="height:1px;width:50px;">&nbsp;</div>
    <div style="height:47px;width:100%; background:gray;">&nbsp;</div>
  </td>
  <td rowspan=2  style="color:#c5581a;"><div style="padding-left:20px;">
  {userhello|Вход для<br>зарегистрированных<br>партнеров}
   </div>
  </td>
</tr>
<tr>
  <td style="background:white;height:26px;"></td>
</tr>
</table>
</td>
</tr>
</table>

</body></html>

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

Для чего это надо было...
Есть одна картинка, которая служит бякграундом для сайта. кусочки от этой картинки вставляются бякграундом со смещением в ячейки такой таблицы. Получается в меру красиво, резиново и достаточно прилично...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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