Solved

!important style declaration breaks whole background in Firefox 3.0

Posted on 2008-06-23
16
503 Views
Last Modified: 2011-10-03
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
Comment
Question by:Camo1
16 Comments
 
LVL 82

Expert Comment

by:hielo
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
Hi hielo:
            Sorry I see your example code: But that did not do the trick. Still gives me the same error.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
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
 
LVL 82

Expert Comment

by:hielo
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 82

Expert Comment

by:hielo
Comment Utility
>>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
 

Author Comment

by:Camo1
Comment Utility
yah! the issue at hand is to set the style dynamically.
0
 
LVL 11

Assisted Solution

by:glumlun
glumlun earned 168 total points
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
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
 
LVL 82

Accepted Solution

by:
hielo earned 168 total points
Comment Utility
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
 

Author Comment

by:Camo1
Comment Utility
Thanks hielo, you guessed right, using PHP, will test this code out maybe tomorrow and provide an update. Thanks again.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
<?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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 168 total points
Comment Utility
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now