!important style declaration breaks whole background in Firefox 3.0

Hello,
        Here is my code : document.body.style.background = "url(" + respArray[1] + ") repeat scroll 0% 0% !important;";

Seems to work on all browsers Safari/FF2/IE6/7 but won't work on FF3. I get a warning in the error console and here is how it looks :

Warning: Expected end of value for property but found '!'.  Error in parsing value for property 'background'.  Declaration dropped.

Any ideas anyone?

Thanks.
Camo1Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
Since you are using ajax upon request completion you can call this:
funtion insertCSS()
{
 var link = document.createElement("link");
link.type="text/css";
link.rel="stylesheet";
link.href="dynamicCSS.asp?property=background";
 document.getElementsByTagName("head")[0].appendChild(link);
}

then you will need the server script that will send the css:
<%
'dynamicCSS.asp
Response.ContentType="text/css"
If "background" = Trim( Request("property") ) Then
 Response.Write("body { background: white url(someimage.gif) repeat scroll 0% 0% !important}")
End If
%>

The same concept applies for PHP if that is what you are using
0
 
hieloCommented:
Since you are assigning the style via javascript, get rid of the ending semicolon. Also, you are not specifying the background-color.
 document.body.style.background = "white url(" + respArray[1] + ") repeat scroll 0% 0% !important";


0
 
Camo1Author Commented:
Hi hielo:
           Tried it with removing the semi colon, did not do the trick, can you post an example code of what you mean when you say specify background-color>

Thanks.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Camo1Author Commented:
Hi hielo:
            Sorry I see your example code: But that did not do the trick. Still gives me the same error.
0
 
hieloCommented:
The background property is short-hand for:
background-color background-image background-repeat background-attachment background-position
http://w3schools.com/css/css_background.asp

If you are specifying the right values in the correct order and the problem persists, then the problem is a bug in the browser. Meaning, there's nothing for YOU to fix!
0
 
Camo1Author Commented:
Hi hielo:
           It looks like !important is the one that is breaking it, and very well could be FF3. I put it at the front, at the end and everywhere in between thinking the order maybe causing it. It breaks everywhere. Did you get the background to work with the !important tag?
0
 
hieloCommented:
I did not create a test case. Since FF3 is a recent release, I have not updated (I am waiting for new bugs to be found/reported by someone else) :)

That's why I told you that if you have all the necesary values in the right order, then the issue would be the browser.

On another note, I see you are proving the style dynamically via javascript. Do you get the same problem if you put the definition in <style> code block:
<style type="text/css">
body{ background: white url(image1.gif) repeat scroll 0% 0% !important;}
</style>
0
 
Camo1Author Commented:
Since I am using a Ajax request to set the background style using the data I get back I tried using this code

document.write("<style type='text/css'>");
                                    document.write("body {");
                                    document.write("background: url("+ respArray[1] +") repeat scroll 0% !important;}");
                                    document.write("</style>");

And this code actually overrides the whole DOM and tries to re-write the DOM.

0
 
hieloCommented:
>>this code actually overrides the whole DOM and tries to re-write the DOM.
Correct. You cannot use document.write after the page has loaded or else you destroy the "origional" DOM. What I was suggesting was to put the <style> within the main content with some "fake" values - static values - for testing purposes and see if the problem persists.
0
 
Camo1Author Commented:
yah! the issue at hand is to set the style dynamically.
0
 
glumlunConnect With a Mentor Commented:
if you explicitly set the attribute you want, !important should not be required
why not attempt to change the body class via the script to a styled up class in the css.
0
 
Camo1Author Commented:
Hi glumlun:
                 Does that mean we create dynamic css stylesheets on the backend and point to them onload? can you explain the concept via example code if it is not too much of a pain?

Thanks.
0
 
Camo1Author Commented:
Thanks hielo, you guessed right, using PHP, will test this code out maybe tomorrow and provide an update. Thanks again.
0
 
hieloCommented:
<?php
//dynamicCSS.php
header("Content-Type: text/css");
if( "background" == strval( $_REQUEST["property"] ){
 echo ("body { background: white url(someimage.gif) repeat scroll 0% 0% !important}");
}
?>
0
 
scrathcyboyConnect With a Mentor Commented:
FF3 has tons of bugs, it has only just come out.  You can agonize over these bugs and maybe fix them, maybe not.  You are being a beta tester for free for a brand new product.  I'd go back to FF2 and wait a few months until they come out with an update to fix many of their bugs that others report to them.  Don't waste your time being a beta tester for their only partly debugged code.  Just an ALTERNATE idea.
0
All Courses

From novice to tech pro — start learning today.