3

I'm using CSS(below). loading64.gif is always visible in FF and IE but not in chrome. I'm using '.loading' inside colorbox. I am not able to resolve the issue.

HTML:

<center><div class="loading" id="loaderImg"><span class="waiting-info"></span></div></center>

CSS:

.loading {
background: url(resources/base/img/loading64.gif) no-repeat center center transparent;
background-color: #ffffff;
float: left;
height: 100%;
min-height: 333px;
width: 100% !important;
z-index: 444;
position: absolute;
opacity: 0.9;
left: 0;
top: 0;
}

Screenshots

Abhishek Agarwal
  • 846
  • 4
  • 13
  • 34
  • Can you try to use quotes inside the `url`? It's optional, but regarding following comments, it seems that even new versions of Chrome have issues with that. Ref: http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary (Read comment section of the "Accepted Answer") – Cagatay Ulubay Apr 17 '15 at 12:22
  • 2
    Do you run this from a web server or local filesystem? Chrome has issues loading files from the hard disk (having url starting with file://...) due to security restrictions. Assuming the gif is using a relative path in the css, it will be pre-pended with the site url. If the site is loaded as file://, you may get to the issue. Anyway, there must be a relevant error in the debug console, you could add it to the post as well if an error indeed occurs. – Ivaylo Slavov Apr 17 '15 at 12:22
  • Is it an animated GIF? – putvande Apr 17 '15 at 12:23
  • Are there any errors in the console? – Gaurang Tandon Apr 17 '15 at 12:23
  • Its on webserver, local its working fine. Yes animated gif. No errors on console. – Abhishek Agarwal Apr 17 '15 at 12:26
  • If you press F12 and go to the network tab, than reload the page, is the gif loaded or is there something written in red color? – Cagatay Ulubay Apr 17 '15 at 12:28
  • I can see all elements loaded properly (through f12 console) but don't know why not visible. – Abhishek Agarwal Apr 17 '15 at 12:31
  • quotes inside url does not have any effect. – Abhishek Agarwal Apr 17 '15 at 12:32
  • Can you include the GIF? Or a link to it? – putvande Apr 17 '15 at 12:36
  • 1
    Maybe.. do you use AdBlock? AdBlock sometimes blocks graphics with wordings like `banner`, maybe `loading` too. Can you just try to rename it, so we know that this is or is not the reason? Also try changing the class `.loading`. – Cagatay Ulubay Apr 17 '15 at 12:37

1 Answers1

0

Try setting an absolute width (example 100px) instead of 100%. Depending on the parent container and its stying, you might have a 0 width div which will explain this.

tribe84
  • 5,432
  • 5
  • 28
  • 30
  • Why would that differ in IE & FF? – OJFord Apr 17 '15 at 14:10
  • Chrome, IE and Firefox have different ways it handles % sizes. It depends on its parent container, in some cases, you need to make sure the pareunt container has a width for it to work in most browsers. Position etc all play a part, but with limited information to go with, it could very well be what I described. – tribe84 Apr 17 '15 at 14:17