Google Chrome images have border

Question

Some kind of wild sorcery is taking place here o.O. In Chrome images have border and for some reason I cannot do nothing about that. Problem is with slider - thumbs, and only in Chrome. I tried applying border: none and border-style: none to img elements , but still nothing.

HTML code:

<div class="promo_tumbs col_12">
                    <div data-dir="prev" class="prev"></div>
                    <div data-dir="next" class="next"></div>
                    <div class="promo_tumbs_centar">
                        <a><img class="promo_tumb promo_tumb_current" /></a>
                        <a><img class="promo_tumb"/></a>
                        <a><img class="promo_tumb"/></a>
                        <a><img class="promo_tumb"/></a>
                        <a><img class="promo_tumb"/></a>
                        <a><img class="promo_tumb"/></a>
                        <a><img class="promo_tumb"/></a>
                    </div>
</div>

CSS:

.promo_tumbs .prev:hover, .promo_tumbs .next:hover {cursor: pointer;}
.promo_tumbs .prev {position: absolute; left: 0;background: url('../img/resursi/slider_arrows.png') no-repeat 0 -208px;}
.promo_tumbs .prev:hover {background: url('../img/resursi/slider_arrows.png') no-repeat 0 -312px}
.promo_tumbs .next {position: absolute; right: 0;background: url('../img/resursi/slider_arrows.png') no-repeat 0 0px; }
.promo_tumbs .next:hover {background: url('../img/resursi/slider_arrows.png') no-repeat 0 -104px}
.promo_tumbs_centar {width: 90%;margin: 0 auto;}
a .promo_tumb {margin: 0; padding: 0; height: 105px; width: 145px; display: block; float: left; background: url('../img/resursi/thumbs.png') no-repeat 0px 0px;}
a:hover .promo_tumb {background: url('../img/resursi/thumbs.png') no-repeat 0 -105px}
.promo_tumb {height: 75px; width: 125px; float: left; margin: 15px 10px;}
.promo_tumb:hover {background: url('../img/resursi/proba.png') no-repeat}
.promo_tumb_current{background: url('../img/resursi/thumbs.png') no-repeat 0 -105px !important; }

Since you have no src listed, are you referring to the grey outline that appears in Chrome when left "unsourced"? — Joel Etherton, Jun 01 '12 at 10:42
I did, and also tried **border: 0px solid black** and still nothing. — Sasha, Jun 01 '12 at 10:42

score 12 · Accepted Answer · answered Jun 01 '12 at 10:48

12

As there is no source(src) set for image so its displaying white border.

answered Jun 01 '12 at 10:48

SVS

4,245
1
23
28

very good catch http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image – ltiong_sh Jun 01 '12 at 10:51
That was the problem. Thank you for helping me :) – Sasha Jun 01 '12 at 10:53

Google Chrome images have border

1 Answers1