Image Map becomes visible on click of Microsoft Chart Control in IE only when page has master page

Question

enter image description here

If you look closely at the image above you will see a hit box being rendered on the Microsoft Chart Control. This is being displayed when I click on a DataPoint on the Microsoft Chart Control. The DataPoint has a postback value defined, and the Chart has its On_Click event handler implemented. I am able to cause this image map to render through right-clicking or left clicking.

My setup is such:

Completely empty .aspx base page EXCEPT it has a master page. The master page setup is slightly unique in that there is a "WebForms" master page and a "Root" master page. The "WebForms" master page inherits from the "Root" master page. This is because I have an ASP.NET AJAX page integrated into an MVC solution. I experience no issues with this setup in any other browser. (Also, during testing, I removed the dependence on the intermediary MasterPage -- the issue was still present. I am confident in saying that the hierarchy of master pages is not the source of this issue.)
MasterPageFile="~/Views/Shared/WebForm.master" is the MasterPage declaration on my base page.

The WebForm MasterPage looks a bit like this:

<asp:Content ContentPlaceHolderID="MainContentRoot" runat="server">
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</asp:Content>

There are other content place holders, but I believe this is the only relevant one. Do note that I have wrapped this place holder in starting form tags. This allows me to separate "form" tags from Html.StartForm() and EndForm() as is normal for MVC.

The Root.Master:

<%@ Master Language="C#" Inherits="System.Web.UI.MasterPage" %>
<%@ Import Namespace="CableSolve.Web.Controllers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContentRoot" runat="server" /></title>
    <asp:ContentPlaceHolder ID="CssContentRoot" runat="server" />
</head>
<body>
    <div id="ContentPlaceHolder" style="height: 100%" class="ui-widget">
        <asp:ContentPlaceHolder ID="MainContentRoot" runat="server" />
    </div>
</body>

Once again, there are other place holders, but I believe these to be the only relevant ones. I have disabled all CSS on the pages and I still see this occurring.

So.. what I can assume is that the client ID for the image map is not being properly handled in this scenario. The UniqueID is modified by the fact that there are content place holders. Look at the following:

INTERNET EXPLORER 9.0.8112 HTML MARKUP:

<div class="rdContent" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C">

<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" style="width: 979px; height: 1494px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" alt="" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_3.png&g=4b336a3ffbc346309c1eb2197ee6fe4c" useMap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap"/>

<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">

GOOGLE CHROME 13.0.782

<div id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C" class="rdContent">

<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_1.png&amp;g=f6ae9770eb0d497187804e384e37a51d" alt="" usemap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" style="height:1448px;width:983px;border-width:0px;">

<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">

I am relatively new to web development. What are my options for debugging this further, or patching the issue? I was shooting bullets in the dark in order to stumble into the fact that it was the Master Pages introducing the issue.

Thanks for reading and your time. Cheers.

EDIT: It occurs with compatibility mode enabled or disabled. I moved the form tags to within the content place holder of my base page and experienced no differences.

EDIT2: I also removed the intermediary Master Page. I felt that this could've been a large source of problems, but this issue still arises with just one master page being used.

TL;DR: When my chart control is located inside of a ContentPlaceHolder I am able to see the image map when left or right-clicking on the area containing the image map. This only happens under Internet Explorer.

(post-bounty edits):

I've tried resetting the CSS by using the CSS code-snippet provided by Ryan Ternier. I referenced it using the code snippet below. Dashboard.css' contents was the code snippet provided by Ryan. No effect.
```
<link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />
```
I've tried clearing the link's focus. My concern here is that what I'm clicking isn't really a link, it's an image with a map, and the map is becoming visible. No effect.
I read about the Link Scrubber add-on for Adobe Dreamweaver. This did not seem relevant to the project at hand. I am using Visual Studio 2k10, but I did some googling around in an attempt to find comparable steps for VS. I found none.

I just started a bounty on this. I feel that I have isolated the issue relatively close to its starting point, but am out of ideas on how to test / constructively work on this issue. I've been speaking on the MSChart Forums, but it's a ghost town over there! — Sean Anderson, Sep 06 '11 at 19:56

score 1 · Accepted Answer · answered Sep 06 '11 at 21:17

Sometimes browsers can default a CSS if there is none defined. Haveyou tried to clear all default CSS?

You might want to look at link scrubbing: http://www.projectseven.com/extensions/info/remscrub/

You could also try: a:focus { outline:none; } in a CSS

Clearing Default CSS:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

from: http://meyerweb.com/eric/tools/css/reset/

I will look into these and report back to you. Thank you for your suggestions. — Sean Anderson, Sep 06 '11 at 21:45
Hey Ryan. Thank you for your suggestions, I implemented each one, but was left fruitless, unfortunately. +1'ed for your suggestions and thanks for keeping my brain thinking of other possible reasons it could be going awry! — Sean Anderson, Sep 06 '11 at 21:58
Thanks man - sorry It didn't work. It seemed that what you are getting is the highlight around the image map - Ie has been known to draw borders around those at times. If i come up with something else I'll let you know. — Ryan Ternier, Sep 06 '11 at 23:52

Kirk · Answer 2 · 2011-09-13T02:16:38.937

For good measure, add EnableTheming="false" to your <%@ Master... %> directive. This explains your symptom of only seeing this with a MasterPage. I've had this issue with Menu controls.

Take a look at http://msdn.microsoft.com/en-us/library/ms228176(v=vs.80).aspx for a feeble description of this option.

Also, I haven't been able to compile your example because I can't seem to get the assemblies to load for the Chart tags. However if the above doesn't work, from what I understand the chart is rendered as an imagemap.

The image map tag has a property called hidefocus which should do what you want. If possible can you try to add some brief javascript or try an updated CSS attribute?

CSS - http://css-tricks.com/829-removing-the-dotted-outline/

a
{
   outline: 0;
}

Javascript option instead - You can change the a tag to the id of your control but be careful to make sure you get the right one after it's generated.

$('a').focus(function(){
     $(this).attr("hideFocus", "hidefocus");
});

Hopefully this works.

Original Comment Have you tried these CSS properties? I see you've tried focus, but not active.

a:active
{
  outline: none;
  overflow: hidden; /* careful with this one */
}

a:focus
{
  -moz-outline-style: none;
}

Also I found some JavaScript that may help for IE found at http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
    if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) {
        links[i].onfocus = function() {
            this.blur();
        }
    }
}

Hi. Thank you for your response. I tried the CSS, no go. I don't believe the solution is the IE-dotted-line fix, as I am not seeing a dotted line at all. It is completely solid. In addition, http://stackoverflow.com/questions/7392202/imagemap-visible-on-microsoft-chart-control-click-when-control-is-inside-of-conte I was able to reduce the problem to a runnable demo, if you'd like to take a look at that. — Sean Anderson, Sep 12 '11 at 23:45
I can't compile that thing since I can't seem to get the chart controls to compile in no matter how much I messed with it. In either ASP.NET 3.5 or 4.0, it started to pull in all sorts of extra CSS for certain controls. This may cause an issue you see. I'm going to edit my answer since this is tough to type in. — Kirk, Sep 13 '11 at 01:52
Sorry for another comment but it just dawned on me why it may only be seen with a MasterPage. Try adding EnableTheming="false" to your <%@ Master... %> — Kirk, Sep 13 '11 at 02:17
I went ahead and tried your suggestions, to no avail. I went into Internet Explorer's Developer Console and edited the attributes of the map, img, and surrounding div such that they all had "hideFocus" "true" or "hideFocus" "hidefocus" I played around with both. Of note, I did discover that the masterpage thing... wasn't actually a thing. This issue does seem more focus-related than I had previous believed -- I think I just did bad testing before when I believed that removing the master page had an effect. — Sean Anderson, Sep 13 '11 at 18:15

Image Map becomes visible on click of Microsoft Chart Control in IE only when page has master page

2 Answers2