If you look closely at the image above you will see a hit box

Question

0

Asked: May 25, 20262026-05-25T09:53:20+00:00 2026-05-25T09:53:20+00:00

If you look closely at the image above you will see a hit box

0

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.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-25T09:53:20+00:00

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/

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

If you look closely at the image above you will see a hit box

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply