css properties apply only by code - javascript

Question

In my firefox extension I created a div element and added to it a paragraph with id named myP.

In the css file I wrote:

#myP
{
    color: red;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    margin: 7px 7px; 
}

but only the first two properties applied to the paragraph.

I tried to set the three others properties in my js code:

myP.style.fontSize = "16px";
myP.style.fontWeight = "900";
myP.style.margin = "7px 7px";

and it worked perfectly.

how can it be?

It worked for me, though having said that p elements aren't supposed to contain block elements like divs. Can you demonstrate the problem with a jsfiddle? — nnnnnn
– nnnnnn, Commented Mar 2, 2012 at 11:46
Manatok already solved it, thanks anyway. I think I did not understand you well, the p element is inside the div not the opposite — adl
– adl, Commented Mar 2, 2012 at 11:51
My apologies, I misread your question vis-a-vis which element was being added to which. I guess Manatok's answer also explains why it worked for me: I didn't have any other styles set that could clash. — nnnnnn
– nnnnnn, Commented Mar 2, 2012 at 11:57

Manatok · Accepted Answer · 2012-03-02 11:46:23Z

2

Maybe there is something else that is overriding your styles, can you inspect it in any way?

Have you tried:

#myP
{
    color: red;
    text-align: center;
    font-size: 16px !important;
    font-weight: 900 !important;
    margin: 7px 7px !important; 
}

answered Mar 2, 2012 at 11:46

Manatok

5,7263 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

you are right. it is working now, thanks! is it because maybe in the page's css file there is these properties to all p elements?