(Nearly) perfect compatibility with Internet Explorer 8

Internet Explorer 8 was released last Thursday, so I installed it and crossed my fingers as I fired up Gallery Server Pro. What would it look like? There has been a lot of talk about how IE8 defaults to a standards-compatible mode that breaks a lot of existing web sites. But I was hopeful since I built GSP to be XHTML 1.0 Strict compliant, which should provide maximum forward compatibility.

And that proved to be true. All of the HTML I wrote worked perfectly in IE8. Woo HOO! This proves the power of web standards and why it is important to develop against the standards instead of against one or two specific browsers. I am also pleased that Microsoft defaults to standards mode - that should make future upgrades go smoothly.

I wish the story ended here. Did you notice the qualification in what I wrote: "All of the HTML *I wrote* worked perfectly in IE8." GSP uses a set of UI widgets from ComponentArt for several complex features like uploading, the menu, toolbar, grid, and pop-up dialogs. I found three cases where the controls were not behaving well in IE8. The good news is that the issues are minor and do not break the page functionality, so you may be happy just living with them until they are resolved in the next release. You can also click the IE7-compatibility button next to the address bar in IE8 to re-render the page according to IE7 standards. I'll describe each one, along with instructions for how you can fix them right away.

Left aligned toolbar

The toolbar above the media object is left-aligned rather than centered:

This issue is caused by ComponentArt code outputting slightly different HTML when it senses IE 5.5 and higher. Presumably they did this as a workaround to some issue. This is a perfect example of how special-casing code for certain browsers can be problematic, and should be avoided when possible.

Fortunately, the fix is simple. Add Style="display:block;" to the Toolbar definition in gs\controls\mediaobjectview.ascx, like this:

<ComponentArt:ToolBar ID="tbMediaObjectActions" runat="server" Style="display:block;" ... />

Extra thick lines in Actions menu

The line break that separates items in the Actions menu appears about 15 pixels high instead of 1 pixel, as seen here:

This is caused by IE8 making space for the invisible icon in the left column. The fix is to use CSS to remove the icon from the page layout. Open gs\styles\ca_styles.css and look for this line:

.gsp_mnu0MenuBreak { background-image: url(../images/componentart/menu/break_bg.gif); width: 100%; height: 1px; }

Add this line immediately after it:

.gsp_mnu0MenuBreak img { display: none; }

Pop-up dialog windows appearing in the top left corner rather than center of window

There are several places where a dialog window pops up in the center of the screen, but in IE8 it appears in the top left corner. This is caused by a bug in the algorithm for finding the center of the screen when the AnimationType property of the Dialog control is set to "Live". The fix is to change this property to "Outline" on each page where it is defined. Look for the text AnimationType="Live" and change it to AnimationType="Outline" in these files:

gs\controls\mediaobjectview.ascx
gs\pages\admin\manageroles.ascx
gs\pages\admin\manageusers.ascx (two places)
gs\pages\task\synchronize.ascx

There are also two places in source code where the AnimationType property is set to Live. These define the dialog window for the edit album info popup. Look for this line:

dgEditAlbum.AnimationType = DialogAnimationType.Live

and change it to:

dgEditAlbum.AnimationType = DialogAnimationType.Outline

The change is needed in these two files (note that this change can only be done in the source code version of GSP and you must recompile after the change):

gs\controls\albumheader.ascx.cs
gs\controls\mediaobjectview.ascx.cs

Any other issues?

I did not do an exhaustive test of IE8, so let me know if you notice any other issue. Thanks!