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.

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

Recommended Answers

All 4 Replies

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>

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

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

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.