Problem with styles

Add-ons Development
#1

In content script which is injected to web-page I have added inline styles and link to css file. This is what I see when I inspect the DOM:

<head>
<style id="styles">div#panel { position: absolute; z-index: auto; border-radius: 3px; height: auto; }

div#panel ul li { display:inline;list-style-type: none; margin: 0; content: "\0020"; }div#_panel ul li:before { list-style-type: none; content: "\25B6"; }div#panel ul li.none:before { content: ""; }</style>
    <link rel="stylesheet" href="moz-extension://24e6c258-33c5-49d6-ae4d-e2d14e8ba2e4/pages/output_black.css" type="text/css" media="screen">
    </head>

The link seems to be OK, I can see the styles when I open the link. But I do not see the style from file applied in the html element. In the file there is black background for the div, but it stays without background.

Why is it?

#2

Are you expecting the style to be applied only to the div contained in it? In effect to be scoped? To do that you would need a scoped attribute, except that support has been removed from recent Firefox versions. Since the scoped attribute is no longer supported, the style element is now strictly metadata content and should not contain other elements.

For further investigations use DOM inspector or the web console inspector to see what CSS rules are actually being applied to the div. Then you can find out if your style is even being recognised as a CSS rule and whether it is being overridden by another rule.

#3

I am not sure what you are talking about.

I paste image to explain:

I have added red arrows pointing to the text which should be applied from the css file (Font-Family, Font-Size, color:white). The div’s background must be completly black so the text is visible.

Here is the content of the stylesheet:

div#make_it_easy_content, div#make_it_easy_panel  {
  font-family: "Arial Black";
  font-size: 13px;
  background-color: black;
  color: white;
  margin: 20px;
}

I don’t see why you thought I expect to use scoped attribute. What I need is to add css link to the document.

#4

Did you add

    "web_accessible_resources": [
        ...
        "pages/output_black.css"
    ],

to your manifest.json?

Otherwise you will see a network error (at least in chrome).

1 Like
#5

Cool. Thanks man. I did not recall to do it!

#6

You are welcome : )

#7

Now it works very well. I’m thankful to solve it because last days I had many bugs after I did some major updates. Now at least few more problems solved.