SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    In dilema what is better

    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):
    HTML 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
    Dilster.com - Dating blog where you can find new dating tips, advices and ideas or your partner.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for answers!
    Dilster.com - Dating blog where you can find new dating tips, advices and ideas or your partner.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •