Rounding those corners

A client recently requested a web-based wallboard/dashboard for their one callcentre, and I wanted to give it a nice smooth look, this is where rounded corners come into play.

I had a look at various solutions available, some using images and some scripting. In the end I settled on a non-image Javascript solution called Nifty Corners.

It really is easy to add to your existing design.

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

I had some issues with alignment and sizing due to the CSS layout with floating divs used, but those issues have nothing to do with Nifty Corners itself.

Here is a part of a screenshot of the final product. I think most people will agree it looks better than the normal sharp corners if you don't apply styling.



Nifty Corners Cube are released under the GNU GPL licence, so you can use it freely in your sites.

Floating div solved

In a previous post I had some issues with floating divs. I asked a CSS guru, and all that I had to do was set the height attribute on the floating divs to get it behaving as expected.

Thanks darkelf!

Have I gone mad?

I'm busy putting together a web-based wallboard for a callcentre, and suddenly my prototype started going crazy. I'm doing all the layout with CSS, and it worked very well, until suddenly, it went crazy.

Before:


After:


As you can see, the floating divs are going horribly wrong. What did I change? The only change was to add a font-family attribute to the body class in the stylesheet, like this:

body
{
    font-family: Verdana, Arial;
}

Can any CSS or HTML guru explain to me why this happens? If I take away Verdana and leave Arial, it works in Chrome, I have to remove the whole font-family line for it to work in IE7.

Awaiting your comments...