Nifty Corners

There is a most excellent page called Nifty Corners that uses CSS and Javascript to create rounded elements for your web pages.

I’ve found it useful, but I had to change one thing in the Javascript to satisfy me. The problem is that errors occur if you try to round corners on an element that doesn’t exist. The result is that any further elements do not get rounded. This doesn’t work well if you are using the rounded corners on a large website that may not have all of the elements on every page.

Here is the changed nifty.js file. I’m no Javascript expert, but it works in Firefox and IE, so I’m satisfied. :)
I also added a right aligned tab class to the roundedPage.css file:


ul#navright,ul#navright li{list-style-type:none;margin:0;padding:0}
ul#navright{padding-left:15px}
ul#navright li{float:right;width:90px;margin-right:2px;text-align: center}
ul#navright a{float:right;width:90px;text-decoration:none;background: #FFC;color: #999}
ul#navright li.active a,ul#navright a:hover
{color: #000;}

and of course you need to add it to final.js to round the corners.

2 Comments »

  1. mark said,

    September 17, 2005 @ 12:20 pm

    Hi Alex, I’m working on a site that also used Nifty Corners. These sound like great improvments. Would you be able to provide a link to your updates in action? I’m especially curious about the right aligned tab class.

  2. site admin said,

    September 19, 2005 @ 10:10 am

    I don’t have a working example that I can show you, sorry. But here is an example of the right aligned section:

    <div id=”menu”>
    <ul id=”nav”>
    <li id=”home” class=”active”><a href=”index.php”>Home</a></li>
    <li id=”news”><a href=”news.php”>News</a></li>
    <li id=”cont”><a href=”mailto:admin@example.com”>Contact us</a></li>
    </ul>
    <ul id=”navright”>
    <li id=”login”><a href=”login.php”>Login</a></li>
    </ul>
    </div>

RSS feed for comments on this post · TrackBack URI

Leave a Comment