AJAX

Firefox background-position problem solved

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2008

Posts: 2,052

Reputation: serkan sendur is a glorious beacon of light

Solved Threads: 120

serkan sendur serkan sendur is offline

Offline

Postaholic

Firefox background-position problem solved

Mar 11th, 2008

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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div id="container" style="background-image: url(images/navigationMenut/left-tile.jpg);background-repeat: no-repeat; background-position: left 109px;">
</div>
<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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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.

Last edited by peter_budo; Mar 12th, 2008 at 1:46 pm. Reason: Keep It Organized - please use [code] tags

Due to lack of freedom of speech, i no longer post on this website.

•

Join Date: Apr 2009

Posts: 1

Reputation: John Rosegort is an unknown quantity at this point

Solved Threads: 1

John Rosegort John Rosegort is offline

Offline

Newbie Poster

Re: Firefox background-position problem solved

Apr 30th, 2009

•

Originally Posted by serkan sendur

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.
Help with Code Tags

html Syntax (Toggle Plain Text)
<div id="container" style="background-image: url(images/navigationMenut/left-tile.jpg);background-repeat: no-repeat; background-position: left 109px;">
</div>
<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.
Help with Code Tags

html Syntax (Toggle Plain Text)
<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>
<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

•

Join Date: Oct 2009

Posts: 2

Reputation: TempName6234572 is an unknown quantity at this point

Solved Threads: 0

TempName6234572 TempName6234572 is offline

Offline

Newbie Poster

Another solution

Oct 20th, 2009

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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>