Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Здравствуйте, Михаил!
Я сделал простую таблицу - одна строка в ней две ячейки - и решил в правой ячейке таблицы спозиционировать картинку (чтобы картинка всегда была влевом нижнем углу ячейки, при любой высоте ячейки). Задал ячейке таблицы position: relative, a картинке position: absolute. И возникла проблема, в браузере Firefox ячейка таблицы не понимает свойство position: relative Может подскажите, как сделать, чтобы ячейка таблицы понимала position: relative ? Ведь ячейки таблицы других браузеров это понимают.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Левый нижний угол:
td {
text-align: left;
vertical-align: bottom;
}
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Спасибо за предложение, но в моем случае это не подходит. Т.к. применяя text-align: left; vertical-align: bottom; мы смещаем все содержимое ячейки.
А у меня идет так - вверху ячейки идет текст (в дальнейшем текст может добавляться - это увеличит высоту ячейки и еще текст может быть выровнен по правому краю). А картинка при любой высоте ячейки должна быть внизу, поэтому только этой картинке задается абсолютное позиционирование. Есть вариант, если создать две ячейки (одну для текста, вторую для картинки). Но может можно как-то ограничится одной ячейкой? Где-то читал, что можно применить скрипт, но практического примера работы скрипта не видел.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Тогда Ваш способ вполне правильный, но надо ещё указать bottom: 0;, помимо position: absolute; у картинки.
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Для ячейки таблицы я задаю относительное позиционирование
td {
position: relative;
top: 0;
left: 0;
}
для картинки в ячейке таблицы - абсолютное позиционирование
img {
position: absolute;
right: 0;
bottom: 100px;
}
Но в браузере Firefox картинка выходит за пределы ячейки (хорошо видно, если уменьшить масштаб страницы и таблица имеет фиксированную ширину) В браузере Хром картинка позиционируется нормально.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
А если увеличивать, всё в порядке? Если так, то сделайте оптимально для ширины экрана в 1024px, а при увеличении всё должно сохраняться.
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Картинка выходит за пределы ячейки в любом масштабе (и при уменьшении и при увеличении, и в состоянии покоя). Я пробовал применить разные варианты , но для браузера firefox ничего не сработало (в Хроме все работает как надо). Для Firefox (а значит для кроссбраузерности, вижу только один выход - это создать две ячейки - одна для текста, вторая для картинки.
Вот полный код примера, как у меня не работает позиционирование в ячейке таблицы - причина в том, что ячейка таблицы в Firefox не понимает относительное позиционирование.
<style type="text/css">
* {
padding: 0;
margin: 0;
text-align: left;
vertical-align: top;
}
#wrapper {
margin: 0 auto;
width: 900px;
border: 5px solid #008;
}
table {
width: 100%;
}
td {
padding: 10px 10px 60px;
outline: 1px solid #f00;
}
#left {
width: 60%;
}
#right {
width: 40%;
position: relative;
left: 0;
top: 0;
}
img {
position: absolute;
right: 0;
bottom: 0;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td id="left">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
</td>
<td id="right">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
<img src="images/photo.png" alt="photo">
</td>
</tr>
</table>
</div>
</body>
