Chrome: display: inline wierdness...

Question

Hi,

I'm stuck on a very strange problem, and I can't figure out what exactly is happening... Unfortunately, I cannot link to the page in question, as it is under internal development, but the problem is as follows:

I have page with 3 links - A, B and C. Each of these links to dynamically generated files, and it can easily take several seconds for these files to be created. We therefore put the functionality for generating these files on seperate pages. A, B and C request the relevant page; When the page has generated the desired file, it responds with the filename which the user then downloads. So far, so good - all of this works.

To visually indicate activity, we show / hide a small gif when these operations are started / stopped. (A, B and C each has it's own icon). They are enabled via:

.getElementById().style.display = 'inline'; 

and disabled via:

.getElementById().style.display = 'none'; 

This works perfect for B and C --- but not for A!

I know it finds the image to enable correctly (via alerts() and what will become clear in a second), and I know the style is set as well (for the same reasons), but the gif just doesn't show up. Furthermore, this happens ONLY in Chrome - both Firefox and IE shows the icon just fine. And, more than this - if I use

.getElementById().style.display = 'block'; 

rather than

.getElementById().style.display = 'inline'; 

Chrome shows the image as well! I don't want to use block as it moves the gif to a line of it's own which is ugly, but at least it demonstrates I have the correct image and so forth.

And, furthermore, if I don't change the display via JS but instead just create the gif with display: inline (rather than the current display: none) it shows up just fine in Chrome. All of this makes me think JS + Chrome is somehow the problem --- but I'm not sure. :/

Oh, and a little extra wierdness - if I click A, nothing happens. If I then click B, THEN A's gif shows up!

All in all I have no idea what is happening, but I hope someone here can enlighten me!

Thanks in advance!

EDIT: I've put the sample code on http://jsbin.com/uzosu3/edit

Answer 1

If you don't want to use block because it pushes the image down a line.

Try using

.getElementById().style.display = 'inline-block';

Might want to check it in the IE browsers though.