Witam,
chcialbym stworzyc bardzo popularny box z naglowkiem i okraglymi rogami. Szerokosc boksa rozszerza sie dynamicznie w zaleznosci od jego zawartosci.
Udalo mi sie cos takiego zrobic na divach ale dziala tylko pod CHROME i Safari. W FF nie widac borderow a w IE - szkoda gadac
http://jatobietymnie.pl/index2.php.box_top_left {
width : 10px;
height : 30px;
background-image : url('../grafika/box_top_left.gif');
background-repeat : no-repeat;
}
.box_top_right {
width : 10px;
height : 30px;
background-image : url('../grafika/box_top_right.gif');
background-repeat : no-repeat;
}
.box_top_center {
height : 30px;
background-image : url('/grafika/box_center.gif');
background-repeat : repeat-x;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
color : #206282;
}
.box_bottom_left {
width : 10px;
height : 7px;
background-image : url('/grafika/box_bottom_left.gif');
background-repeat : no-repeat;
}
.box_bottom_right {
width : 10px;
height : 7px;
background-image : url('/grafika/box_bottom_right.gif');
background-repeat : no-repeat;
}
.box_bottom_center {
border-bottom : 1px solid #e1e1e1;
}
<div style="display:block"> <div style="display:table-row"> <div class='box_top_left' style="display:table-cell"></div> <div class='box_top_center' style="display:table-cell">O nas
</div> <div class='box_top_right' style="display:table-cell"></div> <div style="display:table-row"> <div style="border-left: 1px solid #e1e1e1; display:table-cell"></div> <div style="display:table-cell;">jakas przykladowa tresc
</div> <div style="border-right: 1px solid #e1e1e1; display:table-cell"></div> <div style="display:table-row"> <div class='box_bottom_left' style="display:table-cell"></div> <div class='box_bottom_center' style="display:table-cell"></div> <div class='box_bottom_right' style="display:table-cell"></div>