Blue Border Around Image Maps in Internet Explorer 9

Link on image shows border around the image in Internet Explorer

put this in css

a img{border:none;}

How to remove the blue border around ImageMap control in the Internet Explorer?

When you use

<div style="border:none;"> </div>

You tell the renderer that the div should not have a border, not the image.

Similarly when you use this CSS code:

a img
{
border:none;
}

You are telling the browser that an image within an anchor tag should have no borders.
Try the following code:

img { border: none; }

This will remove borders from all images on the page. You might want to increase the specificity of that statement if you want to have some images with borders.

How can I remove the dotted border from area elements in Firefox?

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/

jQuery mobile creates a blue border around my screen, how to remove?

A quick fix is to remove this outline through css

.ui-page-active { outline: none; }

Done!

Firefox shows blue box around image link

I was able to remove the border by setting the anchor color to transparent:

a.hi {
  color: transparent;
}

Area Blue outlining in HTML markup?

The map tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The required name attribute of the map element is associated with the img's usemap attribute and creates a relationship between the image and the map.

The map element contains a number of area elements, that defines the clickable areas in the image map.

To hide the outline you can do

map area {  outline: none;}

<map name="primary">  <area shape="circle" coords="75,75,75" href="#">  <area shape="circle" coords="275,75,75" href="#"></map><img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

Internet Explorer 11 select element border

The border appears to be intrinsic to the popup window displaying the menu. (You can test this with your fiddle by pressing Alt to display the menu and then choosing View | Style | No Style. It take a bit of scrolling, but when you get down to the rendered element, you'll see that the popup window still uses the larger border.

That border, BTW, is as an visual indicator meant to draw attention to the popup as a touch target. AFAIK, the only way to manage that would be to override the default window style, probably using a BHO. That would only work in IE for the desktop. (It would be ignored in the Windows Store presentation of IE.)

There are a number of proprietary pseudo selectors available, but none appear to affect the popup. (Your testing may be more successful than mine.)

You might consider looking for a relevant suggestion in IE's UserVoice suggestion box. If you find it, vote it up. If there isn't one, you could add one and advocate for it. According to the IE dev team, they're actively reviewing and considering this feedback.

Finally, I don't think there's a supported way to modify the browser's default stylesheets. (I'm reasonably certain there isn't a current reference to the default stylesheets.) Perhaps there should be, but that would likely need another entry in the suggestion box. :-)

Hope this helps...

---

Related Topics