Wednesday, May 9, 2012

Rounded Corners on IE 6, 7, and 8

As a web developer, I have discovered CSS3. It works wonders but it's fantastic features work great only on the most recent browsers. And I work for a company that still uses IE 7 and IE 8, so I have to cater to that group.
On my latest build of a site, I wanted to add the rounded corners and have it available for IE too. I searched and found CurvyCorners. I tried it but to no avail. I finally moved on after an hour with more searching on Google. I landed on CSS3 PIE and this worked like a charm for me. Just follow the simple instructions on their documentation and getting started page. Before you knew it, I had my universal look and feel that I can use on all my sites.

Essentially, you upload your behavior file (.htc) and refer to it on your class or id. Simple and useful.

.roundedcorners
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius:15px;
-o-border-radius: 15px;
border-radius:15px;
behavior: url(js/PIE.htc);
}

This is a web developer resource I will use a handful more times. Hope you like it!

Monday, February 20, 2012

Datepicker and UI Z-Index Trick

I recently had to use JQuery Datepicker with another JQuery component, and found the datepicker disappearing on me behind my images that I was fading in and out. If you need a fix, this one works for me.

$(function () {

            $("#datepicker1").datepicker(
            {
                beforeShow: function () {
                    setTimeout(function () {
                        $(".ui-datepicker").css("z-index", 99);
                    }, 10);
                }
            });
            $("#datepicker2").datepicker();
});