20i Reseller Hosting

HTML image elements mysteriously disappearing?

Discussion in 'Scripts and Coding' started by immediate, Apr 25, 2016.

  1. immediate Japan

    immediate Member

    Joined:
    Nov 2009
    Posts:
    16
    Likes Received:
    1
    Please see here, 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:

    Code:
    display: inline !important;
    visibility: visible !important;
    But nothing happens. However if you go to the 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!
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
    articles.co.uk
     
  3. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,235
    Likes Received:
    194
    Last edited: Apr 25, 2016
  4. Kari

    Kari Retired Member

    Joined:
    Jan 2015
    Posts:
    350
    Likes Received:
    4
    The fact the height & width dimensions are not set isn't an issue as it would display at a 100% width & height if they are left unset
     
  5. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,235
    Likes Received:
    194
    Not if height is set to 0, it won't.

    Setting the following in the css fixes this instance, but not sure what effects it will have elsewhere on your site:

    .product_images_exhibit img {
    max-width: 100%;
    height: auto;​
    }
     
    Last edited: Apr 25, 2016
  6. Kari

    Kari Retired Member

    Joined:
    Jan 2015
    Posts:
    350
    Likes Received:
    4
  7. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,235
    Likes Received:
    194
    As a front-end developer by trade, I realise that.

    But I am assuming that a plugin is being used to render the image gallery and that the image dimensions are not being defined manually, so removing the attributes completely has the following issues;
    1. Not possible without editing the script(s) - does the OP have knowledge/skill-set to do this?
    2. Removing the attributes as you suggest actually makes the image overflow it's parent container = undesired effect, I would imagine.
    Without access to the script(s) that generate the output, my CSS suggestion is a partial "fix" that at least displays output as expected, giving the OP time to investigate the script(s) in question, No?
     
  8. Kari

    Kari Retired Member

    Joined:
    Jan 2015
    Posts:
    350
    Likes Received:
    4
    thats true
    however for some reason I didn't see your CSS suggestion
     
  9. spiderspider

    spiderspider Active Member

    Joined:
    Feb 2013
    Posts:
    676
    Likes Received:
    48
    As it works on http:// and not https:// then is not something to do with how its being called?

    You used to get a warning in old browser versions that said something like 'this page has secure and non secure elements, do you wish to display the non secure elements?'

    So, are you images for the bottom of the page, in the secure (https) area?
     
  10. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,235
    Likes Received:
    194
    That was my initial thought, SpiderSpider, but having investigated a little further, the images are being loaded fine, but they are not actually "displayed" because of the height attribute value being 0.