HTML image elements mysteriously disappearing?

[TheDataPlanet.com]

Please see https://www.princessly.com/ivory-lace-blush-pink-tulle-flower-girl-dress.html, scroll down to Product Gallery and there should be several large dress images but they are not displaying at all.

When I check the HTML code and they are all there and the images are all correctly showing up if I access them directly in the browser. However, when I use Firebug to examine the <img> elements they seem to be faded out or hidden or something.

I tried to add these CSS styles via Firebug to the <img> elements on .product_images_exhibit img:


display: inline !important;
visibility: visible !important;

But nothing happens. However if you go to the http://www.princessly.com/ivory-lace-blush-pink-tulle-flower-girl-dress.html - HTTP version (not HTTPS), the images are all displaying properly.

This is really weird to my understanding. What is wrong and what's actually preventing the <img> elements to be rendered?

Maybe Javascript? But I have no idea how to find out which JavaScript line is preventing these elements to be showing. How can I find them?

Any help would be very much appreciated!

[jscheuer1]

It's the width and height that's the problem. And it's inline in the served code, so either there was a typo, or some template or other server side code isn't working properly and/or not getting accessed on the secure page. Maybe a GD or similar server side script that gets the dimensions or calculates them in some way, might be unavailable on the secure side. Nothing definite anyone can see about that without access to the server though, even then it might be hard to figure out. But here's the evidence, on the working page we see in its source code:


<p><img src="http://www.princessly.com/me...lle-Flower-Girl-Dress-31.jpg" width="848" height="1272" alt="" title="" /></p>

And non-working:


<p><img src="https://www.princessly.com/me...lle-Flower-Girl-Dress-31.jpg" width="" height="0" alt="" title="" /></p>

You can use in css for images (img), and then you will see them:


height: auto;
width: 100%;

But it might mess up the presentation of other images on the site. Best to figure out where the erroneous source code is coming from and fix that.

[mlegg]

You have a lot of code errors in the html file (https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.princessly.com%2Fivory-lace-blush-pink-tulle-flower-girl-dress.html)
also, your css has 118 errors (https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.princessly.com%2Fivory-lace-blush-pink-tulle-flower-girl-dress.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en), it's 208 errors for the site overall. I would clean up your code with the tips from ths w3.org links I posted