SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Area outline in IE11

    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:

    Code:
    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:

    Code:
    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:

    Code:
    outline: 5px solid red;
    The only thing I've found so far that works is the old:

    Code:
    hidefocus='true'
    on the img tag itself, but that doesn't validate, of course.

    Can anyone crack this with CSS?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Maybe adding overflow hidden. Or giving it a transparent or white border?

  3. #3
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try

    a, img {outline:none;}
    map > area,
    map > area:active,
    map > area:focus {outline: none; border:0; }

    Or

    area:focus {border:0 none;}

    Does this do it?


    *:focus {border:none;}

    That's not a solution but it will tell you it's a focus issue. In fact I don't even know if you can do that with star.

  5. #5
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    area {outline: none;}

    is being applied to that tag!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It doesn't seem to want to go away does it.

    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?

  7. #7
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    It doesn't seem to want to go away does it.

    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    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).

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  10. #10
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Of course, IE12 will probably break it.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad you worked something out and thanks for letting us know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •