In dilema what is better

I went through this question so many times in other projects that I decided to ask :slight_smile:

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

If it’s only one page that has one style then the second. But if you need to put it all over your site I would choose the first. I usually lean towards anything that works universally regardless of change. You never know whats around the corner. As an alternative, you could use css3PIE for the IE corners.

Yes as Eric said and if you want reusable boxes that can use sprites easily then the first method is the safest.

If you need to support all IE then you have to use heavy mark up for all the images images but if you only needed IE8 support then you could be clever and add extra images using :before and :after pseudo classes.

thanks for answers!