Remove image border using javascript

Question

I have an image that has a border and shouldn't in Chrome, Safari, IE and Opera, but not in Firefox. I'm assuming its a browser default issue, but I am struggling with how to remove it because it is being run as an AB split test and I am unable to modify the base html/css to run the test. I need to do this using javaScript/jQuery.

The border I need to remove is around the "selected" image.

Here is what I tried:

$('.selectImg').css({
    position:'absolute',
    top:'112px',
    left:'5px',
    height:'26px',
    width:'90px',
    border: 'none',
    borderStyle:'none',
    backgroundImage: "url('http://www.annsbridalbargains.com/assets/ann/images/global/selectedOption.jpg')"
});

Here is the fiddle: http://jsfiddle.net/2rULC/8/

I need to remove it for IE, Chrome and Safari. Opera could be overlooked if necessary. It looks and functions as it should in Firefox.

I agree. It is weird. I initially thought it was apart of the image itself but when it preforms perfectly on one browser, that gets ruled out. — gooser, Feb 18 '14 at 17:14
See http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image. and here's a fiddle showing the padding hack working http://jsfiddle.net/j08691/2rULC/15/. Weird. — j08691, Feb 18 '14 at 17:16

score 1 · Answer 1 · answered Feb 18 '14 at 17:21

The problem is the fact you have no src for the image so it is "broken", there is no alt tag so no text appears in the placeholder area that the browser adds for the missing image.

The solution is

Use the image tag src instead of setting in in the CSS

OR

Use a span/div instead of a img.

score 1 · Accepted Answer · answered Feb 18 '14 at 17:22

I'm not sure why the border is appeared on Webkit browsers, but it seems when the image doesn't have a src attribute, the gray border appears.

I've fixed that by setting the src attribute, instead of using background:

$('.selectImg').css({
    position:'absolute',
    top:'112px',
    left:'5px',
    height:'26px',
    width:'90px',
    border: 'none'
}).attr('src', 'http://www.annsbridalbargains.com/assets/ann/images/global/selectedOption.jpg');

WORKING DEMO.

Remove image border using javascript

2 Answers2