HTML+CSS+JavaScript

Имеется ячейка таблицы шириной, равной ширине окна. В центр ячейки нужно поместить картинку высотой 100 пикселов. Высоту ячейки устанавливаю в 100 пикселов, обнуляю отступы и границы таблицы. При этом IE при отображении картинки немного расширяет высоту ячейки (прикрепил скрин). Если высоту картинки установить в 96 пикселов, а высоту ячейки оставить равной 100 пикселам, то высота ячейки не увеличивается.
Такое наблюдается в IE и в PHP Designer'е. Oper'а и Firefox высоту ячейки не расширяют, картинку вписывают по высоте точно в ячейку...

Т.е. IE и PHP Designer не могут без дополнительного пространства внизу точно вписать картинку в ячейку...

А сужу я о расширении высоты ячейки по фоновой картинке этой ячейки. Фоновая картинка имеет высоту 100 пикселов и имеет градиентный переход. Поэтому, при расширении высоты ячейки хотя бы на 1 пиксел внизу ячейки появляется полоса цвета верхнего края фоновой картинки...

Можно ли обойти этот глюк ?

без пробелов и переносов строк

<img ....></td></tr>

<table border="0" cellpadding="0" cellspacing="0"> <tr><td bgcolor="#ff0000" valign="top"><img src="imsge.jpg" alt="" width="148" height="202" border="0"></td></tr> </table>

Не делайте отступа между тегом изображения и закрывающиим тегом </td>. У таблицы должен быть стиль как указано, либо в самой таблице прописать, либо через CSS. Высоту ячейки указывать необязательно.

> Не делайте отступа между тегом изображения и закрывающиим тегом </td>
Да, именно из-за перехода на новую строку после тега </img> перед </td> и происходило расширение. Это и есть пустая строка под изображением ? Если так, то почему такая маленькая (по умолчанию, наверное, шрифт не такой малый) ?

И почему, если и после <td> перед <img> перейти на новую строку (т.е. то же самое, но перед img), высота ячейки не увеличивается ещё на столько же ?

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


>У таблицы должен быть стиль как указано, либо в самой таблице прописать, либо через CSS
С CSS могут быть проблемы со свойством, например, border-spacing. Это свойство IE не поддерживает...

все ваши вопросы - к создателям ie.

я бы на их месте ответил так : не надо использовать таблицы для определений позиций элементов.

я бы на их месте ответил так : не надо использовать таблицы для определений позиций элементов.

Такой ответ не будет убедительным , поскольку нет альтернатив использованию таблиц для разметки документа...

приведенный выше код малочитабелен. дивы рулят!

Согласен насчёт малочитабельности. Элементарное форматирование кода - приходится отказываться...
Но как можно избежать этого с помощью div'ов ? Ведь переходы на новую строку после div и img останутся...

а еще грузится медленно

Что грузится медленно ? Div'ы ?

Не забивайте себе голову проблемами от Майкрософт, как в прочем не стоит неоправданно излишне увлекаться DIV-ми. Просто, если вам потребовалось вставить изображение через таблицу, например, после его разрезания на части, то пишите таблицу без разрывов - разрывы в коде делайте только по границе пробелов между ее атрибутами и атрибутами изображений, так, например:

<table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff" valign="top"><img src="image1.jpg" width="148" height="202"></td>><td bgcolor="#ffffff" valign="top"><img src="image2.jpg" width="308" height="202"></td></tr></table>

приведенный выше код малочитабелен. дивы рулят!

Что поделаешь - издержки производства :)

а еще грузится медленно.

Смотря сколько загружать - для небольшой задачи сойдет, проще чем заморочки с DIV.

для небольшой задачи проще взять готовый шаблон на блоках чем громоздить <tr><td><tr><td><tr><td>

Не засоряйте форум товарищ AlexSol :)

<tr><td><tr><td><tr><td>

Знаком с этой проблемой, решал следующим образом:

<img src="" width="" height="" align="center" />

Короче, добавлял align="center" и отступ чудесным образом исчезал.