• 200630 Nov

    The difficulty many developers face when they start moving to table-less sites is getting the layout to work. Floats and positioning are easy enough for basic layouts, but start to become incredibly complex when moving to a more advanced level. When the push to move to pure CSS layouts became intense, the problem was – and is – that tables are still a lot more convenient in many cases, and there is sometimes no decent alternative without contorting yourself; you can’t even use the display: table family, as there’s no support in IE.

    An interesting potential solution is in the CSS3 Advanced Layout module.

  • 200618 Nov

    Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.

    The simplified HTML code is:

    <div class="curves top">
    <img src="http://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10"
    height="10" alt=""/>
    </div>
    <div class="box"></div>
    <div class="curves bottom">
    <img src="http://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10"
    height="10" alt=""/>
    </div>
    

    The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).

    The basic CSS is:

    div {
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: #ff0000;
    }
    
    .box {
    min-height: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    
    .curves {
    display: none;
    }
    

    This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.

    To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:

    <!--[if IE]>
    <style type="text/css">
    .box { min-height: 80px; }
    
    .curves {
    display: block;
    height: 10px;
    }
    
    .top {
    background: #ff0000 url('images/topr.png')
    no-repeat right top;
    }
    
    .bottom {
    background: #ff0000 url('images/botr.png')
    no-repeat right top;
    }
    </style>
    <![endif]-->
    
    <!--[if lt IE 7]>
    <style type="text/css">
    .box {
    height: 80px;
    }
    <![endif]-->
    </style>

    The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.

    Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.

    Of course there are other solutions for this, but I thought this way was quite simple.

Hosting by: