Solved

!important style declaration breaks whole background in Firefox 3.0

Posted on 2008-06-23
16
504 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
ID: 21847975
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
ID: 21847992
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
ID: 21848013
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
ID: 21848178
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
ID: 21848240
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
ID: 21848393
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
ID: 21848782
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 82

Expert Comment

by:hielo
ID: 21848816
>>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
ID: 21849017
yah! the issue at hand is to set the style dynamically.
0
 
LVL 11

Assisted Solution

by:glumlun
glumlun earned 168 total points
ID: 21849247
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
ID: 21849366
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
ID: 21849716
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
ID: 21850671
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
ID: 21851003
<?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
ID: 21851502
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
initialise the object angular2 4 30
Need to click button twice to get results 2 32
Apply tab index in forms 6 33
Materializecss - Different Behaviors in Browser's 1 17
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

948 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

18 Experts available now in Live!

Get 1:1 Help Now