Привет! Пытаюсь сделать кроссбраузерные закругленные углы для textbox. Помогите пожалуйста, кто не занят. Проблемы такие: 1) div блок, содержащий картинку с левой границей не хочет растягиваться на всю высоту. 2) div блок, который рисует верхнюю границу, выезжает за пределы div блока, который содержит рисунок правого верхнего уголка. посмотреть можно тут Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Redmond </title> <style type="text/css"> .input-multi-text { /* */ margin-top: 30px; float: left; clear: both; /* */ } .input-multi-text textarea { outline: none; height: 200px; width: 500px; border: 0; display: block; margin: 0 auto; } .multi-top { width: 100%; height: 4px; } .multi-top .mt-left { height: 4px; width: 4px; float: left; background: url('images/input-multi-text-ltc.png') no-repeat; } .multi-top .mt-right { height: 4px; width: 4px; float: left; background: url('images/input-multi-text-rtc.png') no-repeat; } .multi-top .mt-top { height: 4px; float: left; width: 100%; margin-right: -8px; background: url('images/input-multi-text-top.png') repeat-x; } .multi-bottom { width: 100%; height: 4px; } .multi-bottom .mb-left { height: 4px; width: 4px; float: left; background: url('images/input-multi-text-lbc.png') no-repeat; } .multi-bottom .mb-right { height: 4px; width: 4px; float: left; background: url('images/input-multi-text-rbc.png') no-repeat; } .multi-bottom .mb-bottom { height: 4px; float: left; width: 100%; margin-right: -8px; background: url('images/input-multi-text-bottom.png') repeat-x; } .multi-middle { width: 100%; height: 100%; } .multi-middle .mm-left { height: 100%; width: 4px; float: left; margin-left: -100%; background: url('images/input-multi-text-left.png') repeat-y; } .multi-middle .mm-right { height: 100%; width: 4px; float: left; margin-left: -4px; background: url('images/input-multi-text-right.png') repeat-y; } .input-multi-text textarea { /*float: left;*/ } .multi-bottom { float: left; } </style> </head> <body> <!-- Многострочное поле --> <div class="input-multi-text"> <div class="multi-top"> <div class="mt-left"></div> <div class="mt-top"></div> <div class="mt-right"></div> </div> <div class="multi-middle"> <div style="width: 100%; float: left;"> <div style="margin: 0 4px;"><textarea cols="40" rows="5"></textarea></div> </div> <div class="mm-left"> </div> <div class="mm-right"> </div> </div> <div class="multi-bottom"> <div class="mb-left"></div> <div class="mb-bottom"></div> <div class="mb-right"></div> </div> </div> </body> </html>
