?
Solved

!important style declaration breaks whole background in Firefox 3.0

Posted on 2008-06-23
16
Medium Priority
?
511 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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 672 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 672 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 672 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

777 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