I went through this question so many times in other projects that I decided to ask
I have div boxes with rounded corners. Client requirement is that rounded corners should work also in IE, so I need to use images.
I am in dilema which way is better (see comments in the code):
.roundedBox{border-left:1px solid silver; border-right:1px solid silver;}
.roundedBox .bottom, .roundexBox .top{height:5px; line-height:1px;}
.roundedBox .top{background-image:url(sprite.png) no-repeat 10px 20px;}
.roundedBox .bottom{background-image:url(sprite.png) no-repeat 10px 30px;}
.roundedBox h1{background-image:url(top_round.png) no-repeat left top;}
.roundedBox ul{background-image:url(bottom_round.png) no-repeat left bottom;}
<div id="siderbar">
<!--First way-->
<div class="roundedBox">
<div class="top"></div>
<h1>Title</h1>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<div class="bottom"></div>
</div>
<!--Second way-->
<div class="roundedBox">
<h1>Title</h1>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
The second way has much cleaner code, but then I can not put rounded layers to sprite image, because layers are only 5px height which is less than h1 and ul height, so it will show also other layers inside sprite image. Or is there any trick how to do this in the second way even with sprite image? And since there are about 8 different images used to round different boxes, this count as well.
Which way would you choose and why, is there any difference or only personall decission?
tnx