Hi All,
I have this tool where the user highlights text and a button appears on top of that selected. This works in most case, however I noticed that on the en.wikiperdia page, the button doesnt display unless I set its co-ordinates to the far left on the screen.

Basically when the user hihglights text, an input button is automatically embedded in the html page. This is then called when the user hovers over the selected text.

Any idea why on the en.wikipedia pages it desont display?

Here is my code:

var bodyID = content.document.getElementsByTagName("body")[0];
var newInput = document.createElement('input'); 
newInput.setAttribute("id", "ShareNotes_InputButton_Id"); 
newInput.setAttribute("type", "image");
newInput.setAttribute("style","display: none;position: absolute");

When the user highlights some text and clicks a button, a set of span tags is inserted around the text. For example:

<span onmouseover = "ShowHideButton()" > The car and the house <\span> 

function ShowHideButton

document.getElementById("ShareNotes_InputButton_Id").style.left= "10px";
document.getElementById("ShareNotes_InputButton_Id").style.top = "250px";
document.getElementById("ShareNotes_InputButton_Id").style.display = "block";
document.getElementById("ShareNotes_InputButton_Id").style.position = "absolute";

This works on most pages, but on the en.wikipedia page the button doesnt show. Only if i change the co-ordinates to show ont he far left!

Any input or help would be appreciated

Kind regards