Posted this in another forum, but no helpful replies so far, so I thought I’d toss it out here, as well.
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: http://misterneutron.com/areaOutline/. Click on a thumbnail - on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I’ve tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. In fact, IE11 seems to ignore all styling of the area, including things like:
outline: 5px solid red;
The only thing I’ve found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn’t validate, of course.
No joy, I’m afraid. As I said, it resolutely ignores all styling on the area tag, as far as I can tell. It’s very stubborn.
I’m tempted to label it a bug in IE11, but the Gnomes of Redmond® have been known to engage in hyper-technical reading of the standards, leading to some implementations that are technically correct, but run counter to normal expectations. So, I’m open to the idea that perhaps the target needs to be specified in a certain way in CSS. Not my strong suit, I confess.
None of the above shows any effect on it whatsoever.
What’s truly revealing is that when you pull up the developer tools in IE11 and make your way to the area tag, the styles section in the tools indicates that the:
Why don’t you sidestep the issue and just use 2 anchors absolutely placed over the respective areas. It’s less code and does the same jobs as you have regular shapes anyway?
Every image in what could be an album containing scores of images will be a different size, different aspect ratio, and so on, so I’m not sure there would be any less code. If anything, I suspect there would be a lot more, and all of it inline style information, or at best, <style> tag material in the <head>.
And this really does work properly in every other browser - Chrome, FF, Safari, older versions of IE. I think I’ll just label this an IE11 bug, and move on.
Absolute elements will keep track of a relative parent so it could be done with top, bottom,left and right co-ordinates and a width at 50% and will adapt to any size container accordingly (the container would be sized via the image it holds).
However as you say if you already have this working then I wouldn’t bother changing it for IE11 (and for what is probably an accessibility aid anyway).
An interesting thought. I’ll have to play with that. It might actually simplify some of the underlying code (these are not hand-crafted pages, as you might have guessed). Thanks.
hi,first sry for my bad english cause im from china.
i had the same problem, and i think i resolved it like this:
as you say you can set area{outline: none} for some other browser as chrome, firefox, opera …
but on ie the only way is to set onfocus = “onblur()” after every <area> or use js like this
<script>
var __areaObj = document.getElementsByTagName(“area”);
var __length = __areaObj.length;
for (var i = 0; i < __length; i++) {
__areaObj[i].onfocus = function () { this.blur(); }
}
</script>
this could hide the outline on ie(i test ie 9,10,11) but it will lead outline on firefox again (i don’t konw why) but you can judge the browser like if is ie than the js code. i give you the code directly ,english makes me mad :- (
<style>area{ outline:none} </style> Or <style>:focus{ outline:none} </style>
<script>
var userAgent = navigator.userAgent,
rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
var browser;
var version;
var ua = userAgent.toLowerCase();
function uaMatch(ua) {
var match = rMsie.exec(ua);
if (match != null) {
return { browser : “IE”, version : match[2] || “0” };
}
}
var browserMatch = uaMatch(userAgent.toLowerCase());
if (browserMatch.browser) {
browser = browserMatch.browser;
version = browserMatch.version;
} //document.write(browser+version);
if(browser == ‘IE’){
var __areaObj = document.getElementsByTagName(“area”);
var __length = __areaObj.length;
for (var i = 0; i < __length; i++) {
__areaObj[i].onfocus = function () { this.blur(); }
}
}
</script>
that’s it.
Just wanted to drop back in and thank Paul O’B for his suggestion. I ended up doing exactly what he proposed. It turns out be a cleaner, more manageable solution than using area maps, and gets rid of the unwanted outlines in the bargain.
