CSS - "style" property not overriding class

Question

I have a DIV container that is a CSS class defined on the top level. That container also has a style that has a couple elements that should override the main class elements. As far as I understand, this is what it should be doing, but it seems to ignore everything I am putting in there.

/* In the CSS file. */
div.ItemContainer {
    position:absolute;
    left:50px;
    top:15px;
    width:80px;
    height:70px;
}

and In the HTML file:

<div class="ItemContainer" style="left:200px; top:150px;">
    Test text.
</div>

Am I doing something wrong here? If not, any suggestions on how to get this to work? Thanks.

Answer 1

try !important

left:200px !important;

Answer 2

Sometimes things don't cascade correctly in some browsers. Use the !important flag to override behaviour.

style="left: 200px !important; top: 150px !important"

Answer 3

Your code seems to be alright. Have a look at the markup language you are using (HTML/XTML...) to see if it has an error such as a unclosed quotes, missing tag or missing end tag. Another thing that could mess up your style is the use of JavaScript for styling. It is a bad practice to use JavaScript for styling! Have a close look at what you are doing with the use of JavaScript for styling.

---

iScroll

Using iScroll seems to be the source of your problem. You might want to use a JavaScript library that does not mess with CSS. Also, you could try to modify the library or find a way to bypass what ever you are doing with the library.

You might find something useful in these links:

• jQuery TOOLS
• jQuery UI