• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 692
  • Last Modified:

Cannot add a style to a body tag using JavaScript if FireFox detected

Hello,
I have a website which has a background tile image. However, I need to change the background tile image if the browser is Firefox.

Hence for IE the body tag is:
<body>

But for Firefox it must be:
<body style='background-image:url(/images/common/main_bg.gif)'>

I have attached a code snippet in which I successfully use JavaScript to detect if the browser is Firefox. However, when I view the site in Firefox the whole page simply displays:
style='background-image:url(/images/common/main_bg.gif)'

and that's it, just that line of code and nothing else. It works fine in IE.



<script type="text/javascript">
function checkfirefox(){
	if (navigator.userAgent.indexOf("Firefox")!=-1)
	document.write("style='background-image:url(/images/common/main_bg.gif)'")
}
</script>
<body onload="checkfirefox()">

Open in new window

0
mike99c
Asked:
mike99c
  • 4
  • 2
1 Solution
 
silemoneCommented:
try using this script or any other standard browser javascript to see if it works...

if not, then there may be an error with your styles.
0
 
silemoneCommented:
0
 
silemoneCommented:
also,

looking at the script code you're writing:

try:

 document.body.style.background =

finally what errors are you getting...is the path correct?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mike99cAuthor Commented:
In response to the 3 preceding reponses:

1. I have checked the styles by manually embedding them and ite work. So I have ruled out any issue with the style.

2. I have looked at the quirksmode link but I have no issue detecting the browser, it is simply embedding the css that is the problem.

3. I have checked the path by embedding the style so that is not the issue either.
0
 
silemoneCommented:
you're embedding style, but for what element?  what i mean is where is that code going to be placed?  that's why I said explicitedly set


2:
3:
4:
5:
6:
7:

      

<script type="text/javascript">
function checkfirefox(){
        if (navigator.userAgent.indexOf("Firefox")!=-1)
       {
               document.body.style.background = url(/images/common/main_bg.gif);
        }
}
</script>
<body onload="checkfirefox()">
0
 
mike99cAuthor Commented:
Hello,
I am found a solution but have come up with a different approach.
I have placed the style change in a separate style sheet and used JavaScript to only include the style sheet for Firefox.
I have attached the code snipet.
<script type="text/javascript">
	if (navigator.userAgent.indexOf("Firefox")!=-1)
	document.write("<link rel='stylesheet' href='/css/sitestyles-firefox.css' type='text/css' media='all' />")
</script>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now