I had a background image for one of the container divs in my page. I positioned it to a specific pixel using its style properties. It worked fine in the internet explorer but was located to a wrong position when displayed by firefox. So i wrote the following code to get around this problem, it worked.

<div id="container" style="background-image: url(images/navigationMenut/left-tile.jpg);background-repeat: no-repeat; background-position: left 109px;">
</div>

I insert the following script right after the container div.

<script>
   // checks the browser type to see if it is firefox
   if (navigator.appName.indexOf('Netscape') != -1)
   {
       // changes the position accordingly
      document.getElementById('container').style.backgroundPosition 
      = "left 107px";
    }
</script>

This approach can be applied to all style conflicts between firefox and internet explorer.

Comments
I disagree ... I think a mix of helpful tip threads and question threads is nice
The tips are nice but PLEASE don't spam the help forum, and group tips together instead of creating 20 threads

I had a background image for one of the container divs in my page. I positioned it to a specific pixel using its style properties. It worked fine in the internet explorer but was located to a wrong position when displayed by firefox. So i wrote the following code to get around this problem, it worked.

<div id="container" style="background-image: url(images/navigationMenut/left-tile.jpg);background-repeat: no-repeat; background-position: left 109px;">
</div>

I insert the following script right after the container div.

<script>
   // checks the browser type to see if it is firefox
   if (navigator.appName.indexOf('Netscape') != -1)
   {
       // changes the position accordingly
      document.getElementById('container').style.backgroundPosition 
      = "left 107px";
    }
</script>

This approach can be applied to all style conflicts between firefox and internet explorer.

You should use the above but instead use document.getElementById('container').style.backgroundPosition=100% 50%
This works for Firefox and Internet Explorer did not check it on Safari or any of the other browsers

Y-positioning with a "bottom"-value is still a problem in Firefox. The solution is to first set height = "100%"! Example...

<script type="text/javascript">
	//...For example you set the background in fram x to bottom-right...
	bFn = getElementsByAttribute(top.frames[x].document,"body","background")[0];
	bFn.style.margin = "0";
	bFn.style.padding = "0";
	bFn.style.width = "100%";
	bFn.style.height = "100%"; // <<< important
	bFn.style.backgroundRepeat = "no-repeat";
	bFn.style.backgroundPosition = "right bottom"; //x y
</script>

Edited 7 Years Ago by TempName6234572: n/a

Thank you for this z working perfect i just added only <style="background-position: left 109px;"> to my div , it's working without the js

This question has already been answered. Start a new discussion instead.