Skillbuilders modal page - success message not closing in Internet Explorer

Question

Hello,
I'm using Skillbuilders modal page plugin on Apex 4.1.
The plugin works great in all browsers except in IE, where I'm unable to close the success message by clicking on the "x" in the upper right corner.
I'll explain further.
I have a report on, say, page 10, and I'm editing each row in a modal page (page 11). Upon saving the changes, the modal page closes and a success message is shown on the page 10. I can see the message both in Firefox and IE, however, I am unable to close it in IE.
When I inspect the success message using Firebug in Firefox, I see that I have:
<div id="messages" style="display: block;">
<div id="success-message" class="success">
<img class="remove-message" onclick="$x_Remove('success-message');" alt="" style="float:right;" src="/i/delete.gif">
Action processed.
</div>
</div>However, when I inspect the success message in IE, I see:
<div id="messages">
</div>The success message is shown on the page, but it doesn't show in the page source code, and clicking on the "x" doesn't close it.
I've tried it with several themes, the problem persists.
Does anyone have any idea what might be the problem here?
Did someone have a similar problem?
Thank you!

Answer 1

I've been looking at it, kind of gutted that indeed the semi-colon means nothing. Was sure that was it, and then didn't bother to test it in the template anymore as it ate so much time already. That should teach me...
Anyway, I was puzzled too. Apparently it has to do with IE8 and jQuery appending code to the document, whether it is .append or .before. The element is there and all, but the onclick just does nothing. Why did it work after editing it? Probably because IE was then able/willing to pick the attribute up.
I've fiddled with it over and over, trying to find something ,googling it, but couldn't really find a certain cause nor fix. Putting   in the anchor? Nope. Onclick reacting only on second click? Nope. Just do an alert? Nope. Just nothing works at all. I really just gave up. IE8 is just such a headache that by trying to "fix" it in its ways you're off worse.
In the end I fixed it in another way. My template is different than yours but the technique is the same.
I removed the onclick attribute from the success message region, on both page templates. If it ain't gonna work I don't want it there (good riddance too). I changed the href attribute too by just putting "#" in, which is probably just me being pedantic. This is my result success message template:
<section class="uRegion uWhiteRegion uMessageRegion clearfix" id="uSuccessMessage">
  <div class="uRegionContent clearfix">
    <a href="#" class="uCloseMessage"></a>
    <img src="#IMAGE_PREFIX#f_spacer.gif" class="uCheckmarkIcon" alt="" />
    <div class="uMessageText">
      #SUCCESS_MESSAGE#
    </div>
  </div>
</section>To be able to close it, I added some javascript in the page header:
  <script type="text/javascript">
    $(document).delegate(".uCloseMessage", "click", function(){$(this).closest(".uMessageRegion").remove(); return false;});
  </script>This is much in the way of a dynamic action with scope "live". I didn't want to bother with having to put a dynamic action on each page, and is why I did it this way. It works fine in each browser too, so hurray.
Your solution works too of course, it's much the same. I wouldn't call it a "workaround" too, since it didn't work initially anyway. I wouldn't look further and stick with what works best for you. :)