Rob's Ramblings

So a while back I blogged about a jQuery plugin I used for rounding corners, the CurvyCorners plugin. At first I thought it was great, and I have used it on two sites since finding it. But I have also found that this plugin does not play nice with IE 6-8. There are a lot of headaches involved with those browsers.

Here is a list of the issues and/or tradeoffs I had to make to get this to work in IE 6-8. Keep in mind I never ran into these issues with Firefox, Safari, or Chrome during testing.

1. In IE 6-8, you cannot use this tag with a fluid box. Whatever proportions the box is when you load the page, that is how they will remain no matter how you resize your browser. This was not a problem for one site that had a fixed width design, but for the one that did have it, I had to turn it into a fixed width design for IE browsers using some conditional comments and CSS. I picked a width that will work for the amjority of screens, but I don't like that I had to do it to begin with.
2. I ran into a problem where a page using jQuery for a form was not executing the jQuery (in a document.ready() block in a SCRIPT tag placed in the HEAD tag by a CFHTMLHEAD call) the first time you went to the page after opening an IE 6-8 browser. Refreshing the page or clicking a link to go to the page again fixed it, but that very first time it would not work. In the end, the issue was that I had placed the call to this plugin before the jQuery code block. I cannot fully understand why that was a problem, but because of that, the corner rounding was somehow blocking the rest of the cript being processed by the browser, for some reason. The fix for this was to place the call to the plugin as the very last tag in the HEAD. For whatever reason, that solved it.

As of today, my postings of these issues to the CurvyCorners Google Groups support forum have gone unanswered.

Because of these, I am now in search of a better solution if one exists. I could code the CSS manually, but now that I know these quicker solutions are out there my desire to do it longhand has faded. I also hate making tradeoffs when I know it should not be neccesary.

Comments are moderated solely for spam-prevention purposes.

This entry was posted on March 17, 2011 at 12:23 PM and has received 658 views. There are currently 3 comments. Print this entry.

A client made some requests to alter his site. The two main things requested were using rounded corners for the container that the site content sits in, and the redoing of some images on the site, and having them rotate through to provide some animation.

Normally I would use the tried and true methods of creating rounded corners in photoshop, and then having to redo the container div into multiple divs to properly set them for that task. On a whim, I decided to do some searching for other ideas.

In comes jQuery to, once again, save the day. I found the Curvy Corners plugin (http://curvycorners.net/) which did this task cross-browser in about 15 minutes, give or take. Thank you very much, I'll move on.

For the animating of the images, in years past, animated GIFs or Flash was the medium of choice. But I wanted other options, especially since the Flash wouldn't be supported on anyone viewing in iOS. Again, a Google search turned up a jQuery plugin to take care of things. This time it was the Cycle plugin (http://jquery.malsup.com/cycle/). Another 15 minutes (10 of that to write a quick randomization block in CF), and task #2 complete.

If it wasn't for having to tweak 41 images in Photoshop, I'd have been done inside of an hour! Thanks jQuery! (again)

This entry was posted on January 24, 2011 at 11:48 AM and has received 596 views. There are currently 1 comments. Print this entry.