IE Fixes - Conditional Comment Script will not execute

Question

I'm trying to build a website. I have it displaying correctly in every browser except IE versions 8 and lower. IE renders blue boxes around my img's that are also anchors. I can get rid of this by setting the border property to none but i'd like to do it with javascript. I can get my Javascript to execute in a conditional comment.

try
{
var ancs = document.getElementsByTagName("a");

    for(var i=0; i<ancs.length; i++)
    {
        if(ancs[i].childNodes[0].nodeName == "IMG")
        {
            //Set border property to none
        }
    }
}
catch(err)
{
alert(err);
}

I take it your cannot just do `img { border-style:none;}` via css? — Bob Vale, Sep 20 '11 at 22:28

score 1 · Accepted Answer · 2011-09-21T20:04:24.413

1

I am sorry for not answering to the javascript part. But you should do it with CSS like this:

a img { border:0; }

edited Sep 21 '11 at 20:04

answered Sep 20 '11 at 22:28

score 0 · Answer 2 · answered Sep 20 '11 at 22:25

0

What's your conditional comment look like? And, why not apply this as a style instead? It will be faster than doing it with JavaScript and better supported.

answered Sep 20 '11 at 22:25

Bryan Boettcher

4,412
1
28
49

jfriend00 · Answer 3 · 2011-09-20T23:10:05.617

IE has a default border style for images that don't specify one themselves. This is a known pain of IE. The proper way to fix this is to add a default CSS rule to your page. If this is one of the first CSS rules, then it won't affect any other CSS rules you've already set:

<style type="text/css">
    img {border: none;}
</style>

or if you really only want to affect images that are in an <a> tag, you would use this CSS:

<style type="text/css">
    a img {border: none;}
</style>

If you only want to fix/change one image, you can also address that particular image in the <img> tag by specifying an inline border:

<img border="0" src="xxxx">

If you really want to do it with javascript, you can place this code either after your page has loaded or call it only once the page is loaded:

function nukeImageBorders() {
    // assumes all affected images have an <a> tag as their parent
    var list = document.getElementsByTagName("img");
    for (var i = 0, len = list.length; i < len; i++) {
        if (list[i].parentNode.tagName.toLowerCase() == "a") {
            list[i].style.border = "none";
        }
    }
}

You can see the code work in IE here: http://jsfiddle.net/jfriend00/cnEhY/

IE Fixes - Conditional Comment Script will not execute

3 Answers3