CSS not assigned to a javascript created element - Why?

Question

I create an element by Javascript and apply it to another element, I also have a CSS File with styles for this new element, I check the code, the new element exists and has the given ID and class name, but my CSS is not used. The code looks like this:

var mainDiv=document.createElement("DIV");
mainDiv.id="ambiVid_controls";
mainDiv.className="ambiVid_controls";

Conts.parentNode.appendChild(mainDiv);

And the CSS:

.ambiVid_controls{
    position:absolute !important;
    bottom:15px ;
    width:60% !important;
    height:50px !important;
    margin-left:50% !important;
    background-color:#333 !important;
    z-index:1000 !important;

}

Anyone have any ideas why this gets ignored or is there any known issue with ApplyChild and CSS?

The browser is Safari, if this matters.

"Amyome am odea why this igets ignored" I'm sorry, but seriously, couldn't you have done just a bit of proofreading, either in the edit area or the proofing area? — T.J. Crowder
– T.J. Crowder, Commented Jul 7, 2011 at 22:04
I think we're going to need more code. This looks like it should work. — Matchu
– Matchu, Commented Jul 7, 2011 at 22:06
I concur. At the risk of sounding useless, why should I expend any effort on an answer if there was no effort expended on the question? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 7, 2011 at 22:07
Why do you have both an ID and a class name with the same name? Use one or the other... — Šime Vidas
– Šime Vidas, Commented Jul 7, 2011 at 22:15

Amir Raminfar · Accepted Answer · 2011-07-07 22:11:47Z

1

Maybe the div is not being added correctly. Because it works here http://jsfiddle.net/XDYbN/

answered Jul 7, 2011 at 22:11

Amir Raminfar

34.2k8 gold badges97 silver badges125 bronze badges

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

Comments

Taersious · Accepted Answer · 2011-07-08 14:17:24Z

0

You would not have to add the className property if your CSS was defined thusly:

#ambiVid_controls
{
    position:absolute !important;
    bottom:15px ;
    width:60% !important;
    height:50px !important;
    margin-left:50% !important;
    background-color:#333 !important;
    z-index:1000 !important;    
}

This, of course, would not work if you are adding multiple elements with that ID value.

Edit: Instead of: Conts.parentNode.appendChild(mainDiv); .. and if Conts is the ID of an existing element in the DOM, like say a DIV, just do Conts.appendChild(mainDiv);

edited Jul 8, 2011 at 14:17

answered Jul 7, 2011 at 22:11

Taersious

7891 gold badge9 silver badges20 bronze badges

2 Comments

T.J. Crowder Over a year ago

While true that the OP could use the ID instead, that doesn't address the OP's question. In the question, the OP is clearly adding an element with the relevant class name, which matches the CSS shown. Changing the CSS so it matches the element's ID instead isn't going to help.

Serge Sander Over a year ago

So currently i tried all your suggestions with no luck, i removed the ID from JS, i added also a selector to the CSS for the Parent, i check Safari Inspector, everything was added correcly, the Element was created and is at the wanted position but the CSS was not used, the CSS Class was not applied, the Element uses just default CSS or gained by Parents...

Collectives™ on Stack Overflow

CSS not assigned to a javascript created element - Why?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related