Хочу поделиться вариантом вертски тянущегося (резинового) как по ширине, так и по высоте блока.
В данном случае необходим был такой блок с цветом внутри отличным от цвета снаружи, плюс фон снаружи неоднородный, то есть для скругления применяются полупрозрачные png.
Для начала нам необходимо подготовить 4 png с закругленными углами, в моем примере ширина и высота обрамления составляет 23 пикселя, сами картинки - верхняя правая (rtr.png) и нижняя левая (tbl.png) - картинки размером 23 на 23 пикс, а вот картинки верхняя левая (rtl-full.png) и нижняя правая (rbr-full.png) сделал заведомо более крупными чем может быть сам блок и разместил в них кроме закругления также полоски бордюра.
Ниже представлен вариант, рабочий в Opera, Google Chrome, FireFox и Internet Explorer 7.
Сразу хочу сказать что его можно оптимизировать методом css-sprites а также возможно уменьшить число элементов (если есть мысли - жду с удовольствием в комменты).
И еще интересная особенность всплыла у IE7 - если задавать margin для внутреннего div (5го) то IE 7 игнорирует margin-top при условии что перед этим div стоят div с абсолютным позиционированием, если же их переставить за него, то все хорошо, именно этим кстати и объясняться то что дивы стоят не по порядку.
<DIV id="nf1"> <DIV id="nf2"> <DIV id="nf5">Сам текст обрамленный</DIV> <DIV id="nf3"> </DIV> <DIV id="nf4"> </DIV> </DIV> </DIV>
div#nf1 { background: url("../images/rtr.png") no-repeat top right; overflow:hidden; } div#nf2{ position:relative; background: url("../images/rbl.png") no-repeat bottom left; overflow:hidden; padding:23px; } div#nf3{ position:absolute; background: url("../images/rtl-full.png") no-repeat top left; overflow:hidden; left:0px; top:0px; right:23px; bottom:23px; } div#nf4 { position:absolute; overflow:hidden; background: url("../images/rbr-full.png") no-repeat bottom right; left:23px; top:23px; right:0px; bottom:0px; } div#nf5 { overflow:hidden; background: white; }
А вот ссылка на готовый пример.
