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

!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.
0
Camo1
Asked:
Camo1
3 Solutions
 
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
 
Camo1Author Commented:
Hi hielo:
            Sorry I see your example code: But that did not do the trick. Still gives me the same error.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
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
 
glumlunCommented:
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
 
hieloCommented:
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
 
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
 
scrathcyboyCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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