6

In Firefox (current version 14.0.1) I get a dotted outline around some <area> tags that I have created here (http://mediabrands.com.au/). Not only do I see a dotted line, but once it has appeared I can't get rid of it (by clicking another area for example).

enter image description here

I've searched around here and Google for a considerable amount of time, and still haven't managed to get rid of them. They do not appear in any other browsers.

Things I have tried (and all combinations of the below) without success:

  • Add outline: none to the img, map and area tags (and their :focus and :active) counterparts.
  • Added border: none to each of those.
  • Added hidefocus="hidefocus" to each of those.
  • Added various combinations using ::-moz-focus-inner{ border: none; outline: none; } to each of those elements.
  • Added .focus(function(){ $(this).blur(); }) (jQuery) to each of those.

I believe I've exhausted all the information I've been able to come across - is there any other way to get rid of these lines?

Here is the HTML for quick reference, and for the possibility of something in there being the reason I can't get rid of it:

<img src="anatomy/dial/components/foundation.png" id="dial-map" usemap="#dial" />
<map name="dial">
    <area title="Ansible" class="tab" id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#">
    <area title="Cadreon" class="tab" id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#">
    <area title="Orion" class="tab" id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#">
    <area title="Ensemble" class="tab" id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#">
    <area title="Reprise" class="tab" id="click-reprise" shape="poly" coords="73,69,111,39,176,8,242,2,243,53,172,66,112,108" href="#">
    <area title="Magna Global" class="tab" id="click-magnaglobal" shape="poly" coords="245,487,186,481,114,450,71,417,110,377,175,423,246,432" href="#">
    <area title="Airborne" class="tab" id="click-airborne" shape="poly" coords="69,414,37,373,12,316,2,244,55,244,68,322,106,375" href="#">
    <area title="Marketing Sciences" class="tab" id="click-analytics" shape="poly" coords="2,242,11,171,33,120,71,74,109,109,70,168,54,241" href="#">
    <area title="MB3" class="tab" id="click-mb3" shape="poly" coords="257,430,178,422,120,384,82,340,140,305,163,337,206,360,262,364,317,342,348,305,404,340,384,367,324,413" href="#">
    <area title="UM" class="tab" id="click-um" shape="poly" coords="307,134,245,116,246,56,309,68,375,109,418,178,430,237,429,288,404,339,350,303,368,246,358,198,344,169" href="#">
    <area title="Initiative" class="tab" id="click-initiative" shape="poly" coords="80,339,63,289,58,235,72,171,109,112,176,67,243,56,242,119,192,128,152,159,126,206,122,261,137,306" href="#">
    <area title="View Website" id="website" shape="poly" coords="173,330,139,292,133,213,161,167,196,143,245,129,305,146,336,176,359,246,339,300,309,335,260,352,209,351" href="#">
</map>
Marty
  • 39,033
  • 19
  • 93
  • 162
  • @Asad Yep, tried that over `none` too. – Marty Oct 12 '12 at 01:45
  • i feel really bad for saying this but try it again with !important? or in some sort of isolated environment without all the extra css and js around. – Asad Saeeduddin Oct 12 '12 at 01:59
  • @Asad Sorry yeah I've tried everything using `!important` too. – Marty Oct 12 '12 at 02:22
  • there are a bunch of questions asking pretty much the same thing on SO that have fizzled out without accepted answers. I'm going to put a bounty on this tomorrow. – Asad Saeeduddin Oct 12 '12 at 08:53
  • 1
    @MartyWallace Have you tried the `:selection` pseudo selector? – Matt Whipple Oct 14 '12 at 23:01
  • @MattWhipple Gave it a shot, no luck either. – Marty Oct 14 '12 at 23:14
  • Try using firebug to see which styles are applied? – Ben Oct 14 '12 at 23:30
  • 1
    @Ben Yeah, checked Firebug and didn't see anything unusual like browser forced outline styles etc. – Marty Oct 14 '12 at 23:36
  • @A.M.K This is a website for a global company (IPG Mediabrands) for which I work under a digital branch. The majority of the managers in the building are on versions of Firefox much lower than 14 and it's not in my power to have 500+ staff upgrade their browsers. Moreover, updating to the latest browser should never be the solution. – Marty Oct 15 '12 at 00:05
  • @A.M.K Yeah unfortunately there's a paradigm in place across the office network that doesn't allow employees to upgrade their software on their own but rather they need to go through IT (and it needs to be a company-wide update instead of individuals). – Marty Oct 15 '12 at 00:16
  • @MartyWallace Got it, please see my solution and demo below. – A.M.K Oct 15 '12 at 02:03

4 Answers4

7

The problem is your blur-focus function on line 151 of dial.js. Removing it fixes the issue.

$("img, area, map").focus(function(event) {
    $(this).blur();
});

To prevent focusing on area elements, set a tabindexto -1, i.e.

<area tabindex="-1" title="Ansible" class="tab" id="click-ansible" shape="poly" coords="...

Demo: http://jsfiddle.net/SO_AMK/K8Adx/

Community
  • 1
  • 1
A.M.K
  • 16,727
  • 4
  • 32
  • 64
3

It seems that blurring on focus is causing the problem:

Remove from dial.js:

// Prevent focus of areas.
$("img, area, map").focus(function() {
    $(this).blur();
});

Here is a fiddle I made to simplify everything: http://jsfiddle.net/MadLittleMods/gDrAS/ Comment and uncomment the javascript to see the different results.

A solution for the blur and focus is to use event.preventDefault(). So you can replace the what is removed above to:

// Prevent focus of areas.
$("img, area, map").focus(function(e) {
    e.preventDefault();
});

There is also a tabindex fix using tabindex="-1" attribute.

MLM
  • 3,660
  • 3
  • 41
  • 66
  • 1
    I believe the information about `stopPropagation` is wrong. From the docs _Note that this will not prevent other handlers on the same element from running._ It may have seemed to work because its misspelled in your code sample and may have caused a break. `event.preventDefault` would be more appropriate (or a combination) but in quick testing only `return false;` seemed to work consistently. – Matt Whipple Oct 15 '12 at 02:30
  • @MattWhipple Thanks for the spelling check. Fixed it. I am sure that there are a few more functions that will produce the same effect. – MLM Oct 15 '12 at 02:37
0

Try Setting the area Focus and active states to border 0 as the following:

as per the following question: Blue border around image maps in Internet Explorer 9

a,
img {
  outline: none;
}
map > area,
map > area:active,
map > area:focus {
  outline: none;
  border: 0;
}
Community
  • 1
  • 1
Aaron
  • 168
  • 9
  • 1
    This is a solution for Internet Explorer. The question is about Firefox. – Jocelyn Oct 14 '12 at 23:23
  • Thats correct but the css may still fix the problem in FF. according to the question he hasnt tried the :focus and :active. I'd give it a go as the dotted lines only seem to occur after you click the link. – Aaron Oct 14 '12 at 23:25
  • 3
    @Aaron Check out *point 1* in my question under "Things I have tried...". – Marty Oct 14 '12 at 23:27
-2

Try using CSS: text-decoration:none;

jacek_podwysocki
  • 807
  • 10
  • 30