I have code that lets the user click on a link.  When he does that, it calls the .Load function.  This loads some HTML (a div and some contents) into a tag.  Then it tries to color the left border of the DIV that it loaded.

Now the interesting thing is that it does succeed to color that border very briefly - but immediately the color is covered up with black, which is the original color.

When it sets the color, it uses the statement:

            $("DIV.ContainerPanel > DIV.wrapContent").css('border-left-color', divColor);
(wrapContent is a div that is in the loaded HTML).

Now in the CSS file, you might have something like:

.wrapContent
{
border-left-style: solid;
border-left-width: 15px;
}

This assumes a color of black, since no color is specified.

I happen to include this CSS file in 2 places.  I include it in the main page that loads the other page, and I include it in the other page as well.

So it looks like the .load function and its callbacks fire first, and they color in the border of the div exactly the way I want it, and then unfortunately the main css is applied again, and the color is overwritten by BLACK.

Here is the function:   .Load has a 2nd argument which is a callback, and that fires when .load is finished, and there are a series of functions with callbacks.  This is probably irrelevant here, but main point is that one of the callbacks tries to change the color, and it succeeds, but then the color reverts back to black:

 

$('#linktable a').click(function() {

        $('#contentouter').hide('fast', loadContent); /*this calls all the other funcs*/

        function loadContent() {
            $('#contentouter').load(toLoad, '', showNewContent())
        }
        function showNewContent() {
            $('#contentouter').show('normal', hideLoader());
        }
        function hideLoader() {
            $("DIV.ContainerPanel > DIV.wrapContent").css('border-left-color', divColor);    /*SET COLOR*/
        }