Coda Style JQuery Bubble – Now works in IE !

After finding the Coda Bubble article i was keen to implement it on my site. Its a really cool effect that can add a lot to the web page with limited room to add in all the desired content. Its also a really attractive bit of candy that gives that little extra wow factor.

There are a few problems to the solution however:

• The main being it doesnt work in any version of IE ( See image below )
• Its riddled with inline tables and the code is a mess
• Any text within the pop gets anti aliased by IE making it ugly

I thought that it would be a shame to waste the original authors time and my own after taking a few hours to get it working. Is there a solution to get round these three problems?

Yes there certainly is: Very simple just use a gif image with transparency. View the demo.

While this solution isnt ideal* it works in all browsers, and the code is so much cleaner. To make the method accessible either add an “alt” or “longdesc” tag with a description of what’s in your pop up box.

*You are of course limited to colours with gif images but in most cases its generally text thats going to go in the pop up box anyway.

Did it work for you? Leave a comment…

This entry was posted on Sunday, March 22nd, 2009 at 1:12 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.