IE8 Behavior and Duplicate Publishing Controls

Today I ran across a strange anomaly in IE8. I thought I’d share a post about in the case that someone else runs across this issue, too. Our page had two identical controls on it: one in an Edit Mode Panel and the other in the body of the page. I hadn’t specified the ControlMode property on the Rich Image Placeholder control that wasn’t in the Edit Mode Panel, because I didn’t care if it showed up when the page was being edited, since I was using CSS in the Edit Model Panel to hide the div (so the page content wouldn’t show up when the page was being edited.) In other words, my scenario looked like this:

<PublishingWebControls:editmodepanel runat="server" id="EditModePanel">
  <style type="text/css">
    #pageContent { display: none; }
  </style>
  <PublishingWebControls:RichImageField runat="server" FieldName="PageImage" />
</PublishingWebControls:editmodepanel>

<div id="pageContent">
  <PublishingWebControls:RichImageField runat="server" FieldName="PageImage" />
</div>

When running Internet Explorer 8 in Compatibility View, saving the image was no problem. However, when running in straight IE8 mode, every time I tried to save the page, the change to my image wasn’t being picked up. (In other words, if I added a new image, after I saved the page, it looked like it hadn’t saved the image at all. If the placeholder already had an image in it and I cleared the placeholder, after I saved the page, it looked like the image was still saved.)

Adding the ControlMode=”Display” property to the placeholder control in the “pageContent” div solved the problem.