Приветствую!

Вот пример: <img style="border:solid #ccc 2px; padding:3px;" src="img.jpg" width="200" height="100">
Вопрос такой: почему padding:3px не работает в Эксплорере. В Опере и Мозилле работает.
Что надо прописать, чтоб работало?
Кто знает?

Спасибо.

concept,

<div style="padding:2px;">
твой рисуночек
</div>

Интересно, но не совсем то, что хотелось.

А желательно вариант какого-нибудь хака, как например, для Эксплорера прописывается фильтр для PNG-прозрачности 24 бита.
Наверняка что то такое можно прописать в CSS и для этого паддинга. Какой-нибудь короткий скрипт или типа того.


Кто знает?

И вот еще момент. Сейчас проверил, такой код в Опере ведет себя некрасиво. Картинка правым краем вылазиит за пределы дива, за бордюр.

Непонятно задан вопрос, конкретнее что нужно получить, что мы имеем

Какая версия Оперы? В 9.0 работает замечательно, также работает в IE6.0 + FF1.5

concept, а зачем в изображении паддинг? может лучше margin?

по поводу png, вот, мне лично очень понравился этот метод, без htc

http://harisov.livejournal.com/58661.html

MpaK999 писал(а):

concept, а зачем в изображении паддинг? может лучше margin? по поводу png, вот, мне лично очень понравился этот метод, без htc http://harisov.livejournal.com/58661.html

С тем примером по прозрачности сейчас нет времени разбираться, но в свою очередь мне нравится вот такое:

<img src="img.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=img.png); width:expression(1); height:expression(1);" width="150" height="100">

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

Developer® писал(а):

Какая версия Оперы? В 9.0 работает замечательно, также работает в IE6.0 + FF1.5

Опера 8,5...

Kurilshik писал(а):

Непонятно задан вопрос, конкретнее что нужно получить, что мы имеем

Вот что имеется ввиду. Нужно, чтоб бордюр отступал на 2 пикселя от картинки. В Эксплорере он остается вплотную к картинке.

Есть, конечно, беспроигрышный способ:

<table style="border:solid #ccc 2px; margin:2px;" >
<tr>
<td><img src="img.jpg" width="145" height="142"></td>
</tr>
</table>

Работет везде прекрасно. Но он мне кажется несколько примитивным...
Какое на этот счет мнение?

Ну а что мешает нарисовать этот бордер у картинки вместе с отступом и фоном и бордером?

граждане, перед предложением дальнейших костылей и подпорок для решения такой тривиальной задачи задумайтесь на досуге о смысле ВНУТРЕННИХ отступов элемента (в частности IMG) ОТ его ГРАНИЦ и ответьте сами себе на вопрос: что находится внутри элемента IMG, где находятся границы этого элемента и как себя должен вести этот самый падинг при этом и что от чего куда должно отступать вообще?
Другими словами: какой в *опу падинг у картинки?

karamba писал(а):

граждане, перед предложением дальнейших костылей и подпорок для решения такой тривиальной задачи задумайтесь на досуге о смысле ВНУТРЕННИХ отступов элемента (в частности IMG) ОТ его ГРАНИЦ и ответьте сами себе на вопрос: что находится внутри элемента IMG, где находятся границы этого элемента и как себя должен вести этот самый падинг при этом и что от чего куда должно отступать вообще? Другими словами: какой в *опу падинг у картинки?

да чего же в *опу то паддинг?
Тут ведь думай не думай на досуге, а в CSS бывают такие закорюки, которые вообще логике не поддаются, особенно с тегом DIV. Просто существуют правила, и надеяться на свое логическое измышление особенно не стоит.

Вроде как и впрямь бред внутренний отступ у картинки , которая не является контейнерным тегом.
Но мало ли...

Kurilshik писал(а):

Ну а что мешает нарисовать этот бордер у картинки вместе с отступом и фоном и бордером?

Нарисовать в графике? Так я понял?

Мешает то, что этот стиль предполагается использовать в каталоге, который будет построен на скриптах. Заказчик сам будет наращивать страницы своего каталога, и конечно же дальше элеменатарного уменьшения своих фото для превьюшек он в графику не полезет. Надо что бы бордюр с отступом вокруг превьюшек на страницах каталога образовывался автоматически.

Тут мне еще сообщили, что то, что эти отступы бордюров от картинки видны в Опере и Мозилле, это и есть косяк.
А Эксплорер показывает верно. Без отступов.
Вот вам и логика.

concept писал(а):

Просто существуют правила, и надеяться на свое логическое измышление особенно не стоит. Вроде как и впрямь бред внутренний отступ у картинки , которая не является контейнерным тегом. Но мало ли...

с этого места беседа грозит пойти параллельным курсом с темой о валидной вертске.
Правила не запрещают использовать падинг к картинке и здесь как раз логика очень даже в тему, как по мне. Странно желание заставить броузер следовать вашей логике. Отсюда и возникает «Но мало ли...»

karamba,

Ок.

Каково мнение насчет такого решения:

<table style="border:solid #ccc 2px; margin:2px;" >
<tr>
<td><img src="img.jpg" width="145" height="142"></td>
</tr>
</table>

С DIV и SPAN возникают проблеммы...
??

.container {float: left; padding: 2px; border: 1px solid #f00; margin: 0 10px 10px 0;} /* margin ессно необязателен */
.container img {border: 0; vertical-align: top;} /* если превью имеют фиксированные размеры — выносим сюда */

<div class="container"><img src="…" alt="" style="width:100px; height:100px;" /></div>

И еще, если превью — линка, то вариант:

Если IE5.x не надо, то просто вывести IE из quirks mode любым доктайпом по вкусу Если надо, то вложить это дело в div как тут уже показывали.

concept писал(а):

style="border:solid #ccc 2px;

правильнее будет border:2px solid #ccc;

у вас подход на авось, span лучше использовать раз уж так

karamba,

Большое спасибо!

Вообще-вообще, padding для одиночных элементов, которые к тому же могут иметь внутреннего значения -- это IMHO нелогично и неправильно...

Developer®, конечно не логично, более того это бред. Но вставлять DIV или SPAN или таблицу(!) только для того показать какой-то отступ для бордюра, это еще более не логично и уж точно бред.

span -- да, зачем неблочное делать блочным? зибыточность кода, неоригинальность
div -- есть идеальное решение, и пожалуй наиболее правильное
Таблицы для решения данной проблемы даже не рассматриваю по одной простой причине -- избыточность кода

Я бы сделал 2 блока с плавающей моделью.
один с бордером, другой с картинкой

Цитата:

Я бы сделал 2 блока с плавающей моделью.

А для чего float?

А какая разница блочный или строчный? Точнее так: какая разница для "отступа бордюра", вещи сугубо визуальной - быть строчным или блочным? И так и эдак избыточность кода.

Цитата:

А какая разница блочный или строчный?

Велика разница :)

Паддинг для inline элемента -- IMHO нелогично и неправильно. Вообще любые чисто-боксовые проперти... Это не есть блок, а как что-то обтекаемое, не имеющее в теории границ -- может...иметь границы, пространство до них и пространство после?

З.Ы. не нужно упоминать "float" и иже подобное :) это совсем другая песня

Developer®, а как бы Вы посоветовали?
Я просто использую в большинстве случаев такую конструкцию
Сразу поясню я не являюсь профессиональным верстальщиком.

Возможные ситуации(явного не дано):
1. Картинка имеет фиксированный контейнер(например popup какой-нить)
2. Картинка имеет фиксированные размеры
3. Картинка не имеет фиксированного контейнера и размеров
4. Нам очень повезло с дизайном (подробности ниже :) )

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

Во втором случае -- тут размеры можно задавать непосредственно внутреннему блочному контейнеру, задать ему борта и внутренний отступ(или внешний у картинки, опять же)

В третьем случае -- наблюдаем очень интересную картину, блочный внутренний контейнер нам не подходит, так как тянется на всю ширину родительского внешнего контейнера. Инлайн! А не тут то было :) (З.Ы. господа\дамы, предложившие вариант "span+float", проверяли его под Mozilla\FF\Opera? :) ) Отпадает инлайн, непригоден -- нет у него границ и областей человеческих :). В таком случае какие будут варианты? :) Как сделать рамку шириной 2 пикселя и отступами в 3 пикселя, вокруг картинки неизвестной величины лежащей в контейнере неизвестной величины и не получить жесткое выравнивание по левую или правую сторону? Уравнение с двумя неизвестными, обычно хреново-решабельно. Однако...это должен быть "display" :)
Ну например "display: table-cell". И ведь работает! :) Почти везде, кроме IE(вот кстати и удачный случай для написания хака, который кто-то так хотел где-то сверху :) ).

Вариант четвертый :) Самый простой и ненапряжный, если нам повезло с размерами борта и отступами между бортами контейнера и картинкой. Контейнер в этом случае не нужен вообще: у нас же есть тип борта "double". Задаем его картинке и получаем то, что хотели без всяких извратов. Однако существуют обидные несоответствия в визуальном отображении бортов в различных браузерах, неизлечимые, по крайней мере я не знаю как :) Если знаете, пишите

Developer®, много красивой теории в свободном не совсем верном трактовании и ноль практической пользы.
Во-первых, спан+флоат прекрасно работает ВЕЗДЕ* без объявления дополнительного свойства display: block. Потому что свойство флоат применяется ко всем всем перемещаемым объектам и генерируемому содержимому и значение этого свойства (лефт или райт) порождает структурный блок, кроме того что это свойство (дисплей, добавлено мной) игнорируется, если ему не присвоено значение 'none' вообще. Другими словами, если ЛЮБОМУ элементу (срочному или блочному) присвоить флоат (сорри, исправлено мной), отличный от ноун, то он станет структурным элементом с набором соотв. свойств.
Т.о. флоат выпоняет именно ту функцию, которая нужна автору топика в данном случае: структурный блок, порожденный указанием свойства флоат:лефт для спана, принимает ширину картинки с учетом ширины границы и полей. Дальнейшие вопросы поведения окружения в остальном потоке автора не интересовали, поэтому лекцию о свойстве clear позвольте опутсить или изучить самостоятельно.

Далее, практика показывает, что паддинг работает без ворнингов и у строчных элементов в пределах строки без переопределния свойства дисплей, влияя на горизонтальные поля, но не может визуально влиять на вертикальные, потому что их не от чего считать: у строк нет свойства высоты в сегодняшней реализации цсс (известно, что для строчных незамещаемых** элементов свойства топ, боттом, верхний и нижний отступы (вертикальные маргины) равно auto, т.е. их вычисляемое значение равно нулю. Свойство height не применяется, а высота блока задается свойством line-height).

Так что с разоблачением голословности вы поторопились.

Тейбл-инлайн прекрасно реализуется и для ИЕ даже без хаков, просто нужно написать отдельные правила (без нарушения спецификации цсс) и сделать их доступными только для ИЕ.
Одно только есть узкое место в этом случае: если решается вопрос вертикального выравнивания контента внутри блока, то в стилях получается такая избыточность для поддержания кроссброузерности (а в коде вводится еще и доп.тег), что она перекрывает простоту и универсальность использования в данном случае таблицы, поэтому в таких сложных вопросах стоит крепко подумать, стоит ли «чистому исскуству» абсолютно безтабличной верстки приносить в жертву пару сотен байт лишних описаний стилей


_________
* ИЕ 5.Х и выше, ФФ 1.Х и выше, Опера 8.Х и выше, Мозила 1.Х и выше для РС. Для остальных, под которыми невозможно протестировать из-за их отсуцтвия под рукой девелопера или на другой платформе мной и было введено определение доп.свойство display для подстраховки. Хоть это по стандарту и избыточно.

**Стандарт цсс2 гласит:

Цитата:

Замещаемые элементы (п.п.10.6.1, 10.6.2) — элементы, относительно которых компилятору CSS известна только его внутренняя размерность. В HTML примерами заменяемых элементов могут служить элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT. Например, содержимое элемента IMG часто заменяется изображением, которое задает атрибут "src". В CSS не указывается способ определения внутренних размерностей.

Цитата:

Почти везде, кроме IE

Значит почти никто нормально эту верстку не увидит

Цитата:

Т.о. флоат выпоняет именно ту функцию, которая нужна автору топика в данном случае: структурный блок, порожденный указанием свойства флоат:лефт для спана, принимает ширину картинки с учетом ширины границы и полей. Дальнейшие вопросы поведения окружения в остальном потоке автора не интересовали, поэтому лекцию о свойстве clear позвольте опутсить или изучить самостоятельно.

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

Цитата:

Тейбл-инлайн прекрасно реализуется и для ИЕ даже без хаков, просто нужно написать отдельные правила (без нарушения спецификации цсс) и сделать их доступными только для ИЕ.

По последним данным, не реализуется :) Альтернативное решение? Тогда причем здесь "table"? Впрочем это не вопрос, ничего не подумайте.

Цитата:

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

Это вообще тема отдельного разговора :) Проблема вертикального выравнивания -- исходя из контекста выше, не возникала

Цитата:

Так что с разоблачением голословности вы поторопились.

Упаси боже :) Никакой я не разоблачитель(слово то какое), просто у нас с вами разное понимание задачи -- я рассмотрел все нормально-возможные варианты

Цитата:

стоит ли «чистому исскуству» абсолютно безтабличной верстки приносить в жертву пару сотен байт лишних описаний стилей

DIV vs TABLE -- тема риторическая :) Но по моему скромному мнению, не стоит "пихать под диван" таблички, грамотно верстать таблицами нужно тоже уметь

Цитата:

Значит почти никто нормально эту верстку не увидит

Вы вероятно не до конца прочитали весь абзац, часть которого процитировали :)