В обход ie7

Раз уж лень писать CondCom,
почему бы не прибегнуть к хитростям.

Хокку?

Пара хаков для IE7. Хоть и пользуюсь условными комментариями, но все же в копилку брошу.
Как аналог *html, но только для 7-ой версии эксплорера:

p{background:green;}
*:first-child+html p {background:red; }

И еще один способ, основанный на ошибке прошлых версий браузера:

html>body p{$background:red;}

IE7 не понимает хак с нижним подчеркиванием, (например #some-block{_margin:0} ) но, ставя перед свойством $, все, ныне существующие, браузеры IE будут его воспринимать.

the-border-image

Истинное терпение - это такое терпение, когда терпеть не под силу.

японская пословица

Эх, поглядел, слюни попускал и пошел дальше картинки резать и «фэйковые» дивы по углам загонять. А ведь, как песнь w3c сладка… И спрашивается, почему вот товарищи из Виларибы догадались до -moz-border-radius, а пни из Вилабаджо как специально и не помышляли ни о чем подобном.

Иногда смотришь на дизайнера, а в голову лезет мысль, а ведь он еще свою ноту не нашел (древний анегдот про молодого и старого гитариста).

Создаем круглые углы у изображения с неизвестными заранее размерами

Недавно на одном из моих любимых форумов была задачка о том, как реализовать следующую идею с картинкой: сделать рамку (или обрезать углы у изображения, как вам приятнее и понятнее : ) с круглыми углами, при условии, что размер картинки неизвестен. Сразу подмечу, что в данном примере использовалась графика.

Способов создания круглых углов очень много, использования графики, и заканчивая попиксельным выравниванием. За основу я взял способ, придуманный Adam'ом Kalsey'ем, (по крайней мере, на его сайте я наткнулся на такую конструкцию), по созданию круглых углов у блоков.

Итак, приступим. Для начала нам понадобятся сами углы, рисуем четыре прозрачных гифа.

Используются четыре блока roundcont-это блок-контейнер, куда помещены остальные элементы-это два блока с углами:roundtop-это для верхних углов и roundbottom-для нижних, блок img для картинки.

Далее дело техники: помещаем все в блок-контейнер, прописываем ему свойство float, т.к. мы не знаем заранее ширину картинки, то при помощи свойства float достигнем того, чтобы блок принимал ширину по содержимому. Для блока с картинкой задаем отрицательные поля, на высоту блоков с углами.
Во внутренние блоки вкладываем картинку-уголок, выровненную по левому краю, и задаем бэгграундом другой уголок в правом углу. При помощи z-index перекрываем изображение.

css:

.roundcont {
width: auto;
float:left;
margin:10px;
z-index:10;}

.roundtop { z-index:10;
background: url(i/tr.gif) no-repeat top right;
position:relative;}

.roundbottom {
background: url(i/br.gif) no-repeat top right;
z-index:10;
position: relative;}
*html .roundbottom{position: static;}/*хак для IE6*/
img.corner {
width: 14px;
height: 16px;
border: none;
display: block !important;
}
.img{ margin:-16px 0;}

В Internet Explorer (в 7-ом не проверял) пропадает бэгграунд у нижнего блока, а вместе с ним и наш уголок. Проблема решается хаком *html. Если случается писать хак, лучше пользоваться условными комментариями.

code:

<div class="roundcont">
<div class="roundtop">
<img src="i/tl.gif" alt="" width="14" height="16" class="corner" />
</div>
<div class="img">
<img src="i/flower.jpg" width="200px" height="180px" alt="" />
</div>
<div class="roundbottom">
<img src="i/bl.gif" alt="" width="11" height="12" class="corner" />
</div>
</div>

В результате This Page Is Valid XHTML 1.0 Transitional!, прекрасно работает в FF1.5, IE6, Opera8.5, Opera9. Минусом кажется то, что блок все-таки имеет свойство float, но это легко решить вложенностью div'ов.