Firefox background-position problem solved

Question

serkan sendur 821 Postaholic

16 Years Ago

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.

javascript

4 Contributors
4 Replies
468 Views
5 Years Discussion Span
Latest Post 11 Years Ago Latest Post by malithmcr

ShawnCplus commented: The tips are nice but PLEASE don't spam the help forum, and group tips together instead of creating 20 threads -1

Dani commented: I disagree ... I think a mix of helpful tip threads and question threads is nice +31

John Rosegort 0 Newbie Poster

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

TempName6234572 0 Newbie Poster · Answer 1 · 2009-10-21T00:24:33+00:00

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>

TempName6234572 0 Newbie Poster · Answer 2 · 2009-10-21T01:32:03+00:00

CHANGE background TO bgcolor !!! I missed to test the last change I made :(

malithmcr 0 Newbie Poster · Answer 3 · 2013-05-13T13:24:56+00:00

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