<img> tag greyed out in firebug hence found the reason for image not showing up. Need help fixing it.

Question

I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.

Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue. Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.

Answer 1

Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).

Answer 2

I'm having the same problem. But the strange thing is that FF seems to be adding some random class names to the tag. It works in IE and Safari but not FF or Chrome.

This is an ad rotator. This is really wiggin' me out. I have never seen anything like it. I wondered if the server might be spitting out the wrong charset or something. Any ideas?

http://www.hopingtoadopt.org/js/adCycler.php

Answer 3

In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.