JQuery UI, CSS and IE
I’m getting increasingly enthusiastic all the time with the jQuery UI framework – especially its well-structured and versatile CSS component. My emerging problem, however, seems to be one of designer acceptance.
JQuery UI uses the -moz-border-radius CSS property to render its rounded corners in dialogs, controls and icons. This is a CSS3 standard and is supported in all upcoming browser versions… except Internet Explorer. If you have looked at the jQuery UI Themes page in Firefox, Opera, Safari or Chrome you’ll see nice rounded corners. View that same page in IE8 (or any version for that matter) and it’s square corners all the way.
This situation proves to be a difficult one at the office when I want to use the jQuery UI CSS framework, but my target audience are overwhelmingly IE users (IE6 comprising a larger-than-normal part of that audience – the horror!). The design company are very uncomfortable with having an inconsistent user experience across browsers – they have a vision in mind and their preference is to have that applied in the same way for every user. The usability / design official in our office also holds this view, wanting to ensure that the company’s brand appears consistent and professional.
So it seems I’m stuck with using images for (the many) rounded corners applied throughout the site. It’s unfortunate, but unless I’ve overlooked something glaringly obvious, I’m resigned to only applying the jQuery UI CSS framework in my personal or extra-curricular projects. Of course, I can still take advantage of the excellent array of plugins and effects.
Have you encountered a similar predicament? What approaches have you taken to reconcile the efficiency of using CSS standards with IE’s inability to support them?
Tags: internet explorer, jQuery UI, The Office, UX, web design
15 Responses to “JQuery UI, CSS and IE”
Leave a Reply
browse news
The Social Networking Stuff
Recent Posts
- Getting Over Your jQuery DOM Ready Addiction
- Introducing the Quicklist: Building a Better Checkbox List
- Event Binding with jQuery delegate()
- Ajax Gotchas with jQuery and ASP.Net MVC
- Quick Hits – jQuery.Map()
I’ve had problems with corners and IE too.
I initially wrote a plugin that added themed edges by dipping the element in DIV soup. It was only for IE but then as IE had different nodes it meant I had to change my other code to step around them, which was a pain, so I ended up giving up on CSS3 curves and instead just adding conventional DIV tags around elements for all browsers.
It, at least, made it possible to have a similar DOM in different browsers.
Ha! “Div Soup”. I like that. Forgot to mention there is that approach also – there’s a good jQuery plugin to do all sorts of fancy things to your corners if you don’t mind annihilating your nice, tidy HTML.
It’s a real problem because IE actually ends up holding back web development overall in many cases as you’ve just pointed out.
Make sure you check out (if you haven’t already) this Filament Group article that shows the power of the jQuery UI CSS Framework for still achieving some kind of rounded corners in IE: http://tinyurl.com/jqueryui-roundedcorners-ie .
I understand your frustration, but I’m quite relieved by the position the jQuery UI Team (which I’m a member of) has taken. The classes are all there to achieve rounded corners in IE by one of so many different means. If that were built into the framework, it would lock you in to one solution, where the right solution is going to depend a lot on your implementation and requirements.
I definitely like the intent. That’s a really intelligent approach to rounded corners in IE.
For me though, the page seemed to take quite a while to load and as you say in your post, the padding does get messed up quite a lot – particularly with the accordion. This is even worse in IE7 and IE8, with accordions not even working properly although YMMV.
So that’s a shame. Still – very good idea.
[...] http://mytechworld.officeacuity.com/?p=313 [...]
Regardless of any opinion about IE, the fact is that most internet users use it. And so to design the UI to more-or-less not work for IE is simply foolish.
I’ll be checking out Moo Tools and whatever else pops up on Google.
@Lowell – No web designer should be building anything that excludes a major portion of the browser market share. Decisions about which elements to include as part of the UI and which are flexible is a design choice, not a functional choice. jQuery UI allows you to retain all the same functionality regardless of browser, but also allows you to go one step further with more standards-compliant browsers (i.e. the rounded corners and other CSS3 features). If consistency of design is that important, just set the border radius of any ThemeRoller theme to 0.
Hey,
I don’t get it, i ran into the same problem. And many enthusiastic programmers are considering using jquery UI. But as someone mentioned earlier it’s not consistence. And i wanted to use this jquery UI because of its rounded corner ability fitting perfectly into my new webdesign.
So if they will not fix these kind of problems, it just keeps beeing a potentially great project.
Hope they will fixed it soon or someone has a consistant solution.
It should be noted that jQuery UI doesn’t pretend to have the ability to create rounded corners in every browser. It takes advantage of the CSS3 spec for rounded corners so that browsers supporting that spec can benefit from the enhanced cosmetic experience CSS3 provides. IE is not part of that club yet (although is rumoured to address that issue and others in the upcoming IE9).
There are some pretty heated philosophical debates on whether a design should look exactly the same in every browser. Sometimes there are good arguments for this, other times not. I personally take this view: http://dowebsitesneedtolookexactlythesameineverybrowser.com/.
I faced to a similar problem and I solved it using DD_Roundies, it works really fine.
@Phil
I encountered the same issue with padding getting messed up and the solution I found was changing the css units from “em”‘s to “px”‘s, of course this requires you knowing the exact radii of those corners
@tlaka
DD_Roundies doesn’t appear to work in IE8
as a developer these days we get requirement in the morning and we have to give the demo in the evening..in this rapid pace developer cannot sit to find a workaround for inconsistency created by frameworks, none has that much BW..we believe coming rel of jquery should give us some standard solun for this out of the box..
When will we as designers take a stand against Internet Explorer? It is such a pain. I have not met one fellow designer/programmer who has not lost money due to that horrific excuse for a program. What would it take for us to unite and put a stop towards development for internet explorer? This is a serious question by the way. It is a matter of getting a better browser to this “majority” of web users? What is it? What would it take? Would it take a company like Google finally saying they don’t support it anymore?
I feel your pain. Really, I do. But it is not the place of designers or developers to rise up and arrive at the door of anyone using Internet Explorer with pitchforks and torches. The fact of the matter is that IE is still used by well over 60% of the global market and abandoning support for that sort of market share is simply impractical.
You may find that your users are split more proportionately with their browser share, but you should still consider IE into your equation – either by providing gentle guidance on how to upgrade / move to a different vendor, or at least explaining why things might look funny when viewed in IE6.
As IE6 continues to age and fall behind current web standards, more companies are recognising the need to send it back to the world of shadow and flame from whence it came. This coupled with Microsoft’s realisation that IE needs to be generally better than it has in the past means that our lot as developers / designers is destined to improve – and soon.
By the way, Google has dropped support for older versions of IE for some products (e.g. YouTube).