Why doesn't Internet Explorer display the Custom Panel Widget properly?

  • Problem
  • Updated 4 years ago
  • Solved

Above is what I see on FF latest version

Below is IE9 latest version

Not only are corners missing but colors show as flat instead of gradients as on FF
Photo of KanThaiDecor


  • 2398 Posts
  • 263 Reply Likes

Posted 4 years ago

  • 1
Photo of the_pete


  • 65 Posts
  • 16 Reply Likes
Official Response
Hey Folks

Sorry about the confusion with this widget.

Hopefully I can clear things up a bit.

The Panel Widget makes use of a new web standard, CSS3, for some of it's more advanced visual features. CSS3 is not supported in IE7 and IE8, and is only partially supported in IE9. Because enabling CSS3 in IE9 requires an opt-in rendering choice instead of progressive enhancement across the board (you'll notice that our own SiteBuilder doesn't have rounded corners in IE), turning it on runs a significant risk of breaking existing sites in unpredictable ways.

For this reason, when editing the Panel Widget in IE, all of the features that are powered by CSS3 are turned off - and their editing interfaces aren't displayed. These features are background gradient, rounded corners and shadows. When these features are turned off, the widget will still display the same primary background color, border style, margin, padding and background image - and for the most part, will still look good - though not quite as good as is possible in more advanced browsers.

When we created the widget we were faced with the decision of only enabling the features that were supported by all browsers - or enabling all features and having some of them only work in Firefox, Chrome, Safari and Opera.

We made the decision to put all the features out there as we believe that the slight majority of users right now use a non-IE browser - and according to current trends - this number will only increase. We also hope that the next iteration of the IE browser will have better support for the feature, and when these two factors are considered - over time, this rendering discrepancy will become a non-issue.

If you would like to ensure complete consistency between browsers in the mean time - you will have to make sure you don't use background gradient, rounded corners and shadows.

The end effect of all this is something web developers call 'progressive enhancement'. In IE the panel looks fine - and in all other browsers it looks progressively better. We make use of new features, even though in some browsers they aren't supported - but we make sure that in the unsupported browsers, the fallback visuals are still acceptable. Over time all browsers start to support the feature add it becomes a non-issue.

I should also say that while it is possible to create a Panel Widget that has these features supported across all browsers - it would require dynamic graphic rendering on the server side - which would have been several orders of magnitude more difficult to build (which would have meant that we wouldn't build it at all), would load slower in modern browsers and wouldn't allow for a real time preview in the editing interface.

We're really sorry we don't support everything in IE, we really wish we could, but we hope you understand why we made the choice to roll the features out anyway.