Question

I have a website which includes 3 images in img tags. When i open the local html file, everything is fine. However, when i upload to my server, the page is identical, apart from the images not being visible. If i use Chrome’s web inspector, i can see that

style="display: none; visibility: hidden; "

has been added by the browser. if i uncheck these stylings the image still are not visible.
I’ve tried it on two totally separate web hosts.

Firefox does not add the rules, but they still aren’t visible.

My code (before browser interferes)

<div class="grid_12" id="adswrap">
            <h2>Adverts</h2>
            <div class="grid_3 ads"><img src="images/ads/1.jpg" /></div>
            <div class="grid_3 ads"><img src="images/ads/2.jpg" /></div>
            <div class="grid_3 ads"><img src="images/ads/3.jpg" /></div>
</div>

and the styling

.ads{
    height: 185px;
    -webkit-transition: all .2s ease-in-out;
    outline: 2px solid #444;
    margin: 0 35px !important;
}

.ads:hover{
    -webkit-transition: all .2s ease-in-out;
    position: relative;
    top: -5px;
    -webkit-box-shadow: 0px 5px 3px rgba(0, 0, 0, .8);
}

.ads img{
    width: 220px;
}

Answer 1

Do you have any advert blocking extension installed?

Maybe there’s something about the id or class of the img elements (or their parents) that is triggering the advert blocking.

I can imagine that an extension would allow anything on localhost, but once you upload it somewhere else, the advert blocking filters would be activated.