Strange firefox issue with innerhtml

Question

I have this piece of code:

document.getElementById("refhome").innerHTML = "<img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' />";

Now this code executes well on all browsers. but in firefox, nope.

I tried manually adding the img in the a, and still no picture. this is the a:

<a id="refhome" href="index.html"><object id="obj1" style="margin:0 auto;display:block;pointer-events:none;width:320px;" type="image/svg+xml" data="Resources/Wefix2.svg"></object></a>

my javascript should replace the object with an img, but his does not happen in firefox. even if i manually add the img to the a. But when i do this with a diferrent a tag:

<a id="as" href="#"><img src='Resources/WeFix Wide Logo.png' style='height:128px;margin-left:auto;margin-right:auto;text-align:center;display:block;' /></a>

No problem. Really don't understand what's going on here. Why in the other a Tag is doesen't work?

EDIT:

Found the issue but i dont know how to solve it. When i remove the style attribute from the object it works fine and the other js code is not needed. for some reason the style hides the svg, this happens only in FF, I tested in Safari,Chrome and IE

Another EDIT: It appears display:block hides the image... Really strange. How can i center the image? Usually i set it to block and give it a width and then margin:0 auto. How can i center it without the display?

Answer 1

I found a work around, since display block hided the svg i used the following code to center it:

 style="display:inline-block;pointer-events:none;width:320px;"

for this to work i inserted my a tag and object tag into a div with textalign center, and all that did the work. Thanks anyways cheers.