• 200704 Jan

    Some of you might have noticed that this site is not valid CSS, which is of course a tid bit weird for a site as this… There’s a reason for this though. New CSS3 features are often “tested” by browser manufacturers by implementing them as vendor specific extensions. These are allowed by both CSS2.1 and CSS3, yet, the validator does error on them, even when it’s validation profile is set to CSS3.

  • 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: