Question

In my page for file upload field i set the attibute style in javascript as below

choicefile.setAttribute("style", "width: 86px;
                                  position: absolute;
                                  margin-left: 83px;  //This pixels shows the upload field in a correct place
                                  margin-top: 90px;  // This pixels shows the upload field in a correct place
                                  z-index: 1;
                                  opacity: 0;");

But in Firefox it shows the file upload in a wrong place. In firefox if we change the two attributes as

choicefile.setAttribute("style", "width: 86px;
                                  position: absolute;
                                  margin-left: 35px;  //In Firefox it is the correct pixels
                                  margin-top: 150px;  //In Firefox it is the correct pixels
                                  z-index: 1;
                                  opacity: 0;");       

How can i solve this problem. Anybody can help for this problem. Thanks in advance

My URL is

http://mytest.php?id=2&mview=69

After click the addnewentry the file uploader displayed in correct place but in firefox it is displayed in wrong place.

<form name="choiceadd" action="" method="post" enctype="multipart/form-data" onsubmit="return validationaddchoice();">
<span id="addnewcontain">
</span>
<input type="hidden" name="choicecount" value="0" />
<div class="four" style='margin-top:40px;'>
<input type="button" value="Add New Entry" onclick="addnewchoice(document.forms['choiceadd']['choicecount'].value)" >
</div>
<div class="five">
<input type="submit" name="choiceaddsubmit" class="choiceaddsubmit" />
</div>
</form>

The above is the form in main page. When click this button the function addchoice is called and it includes the choicefile attribute style mentioned above

The function is

function addnewchoice(val)
{choicefile.setAttribute("style", "width: 86px; position: absolute; margin-left: 83px; margin-top: 90px; z-index: 1; opacity: 0;");
}

Answer 1

instead of setting style like this, you can do it like the one below for fully cross browser compatibility.Assign each style property like the one below

instead of setting style

function addnewchoice(val)
{   
   choicefile.setAttribute("style", "width: 86px; position: absolute; margin-left: 83px; margin-top: 90px; z-index: 1; opacity: 0;");
}

you can set it like this for cross browser compatibility

function addnewchoice(val)
    choicefile.style.width="86px";
    choicefile.style.position="absolute";
    ... so on..
}