can't apply css - it gets applied, but then it gets overwritten

I've posted this question before, but I've now simplified my web page so that it can be all put here in this post.

If you try out the code, you will see 2 buttons. Either button downloads content into the page using ".Load".

You can try clicking on either or both buttons.

The problem is that I want the color of loaded content to match the color of the button.

To do this, I set the css of the loaded content to be that color.

This works very briefly, and then its covered up again by the default color, which is black.

It is as if the browser loads content, applied my css from my css code, and then makes another pass and applies the default css.

But of course I don't know for sure what the browser is doing.

So there are 3 web pages here. The first is the webpage that has the code. The other two are webpages have the paragraphs that he first page loads. The names of the pages are listed:

So voila - first page (name is demoProblem.htm).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=windows-1252" />
<title>Course page</title>

.WhiteFont { color:rgb(256,256,256); font-size:1em; text-decoration:none; }

.BlueFont { color:rgb(143,212,193); font-size:1em; text-decoration:none; }

.ContainerPanel
{
awidth:400px;
border:1px;
border-color:#1052a0;
border-style:double double double double;
background: #FFFFFF ;
}
.Content
{
        display:inline;
}
.wrapContent
{
/*        display:inline;*/
        max-height: 290px;
        overflow:auto;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:15px;
}

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

#linktable
{
position:absolute;
top: 180px;
/*background-color: white; */
}

#load {
display: none;
/*position: relative; /*was absolute*/
right: 10px;
top: 10px;
background: url(img/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}

#contentouter
{
text-align:left
}

#aFoundingFathers
{
}

#wrapper2 {
awidth: 710px;
amargin: 30px auto;
apadding: 55px 25px 25px 25px;
aborder: 12px solid #2e2e2e;
/* position:relative;*/
}

</style>

$(document).ready(function() {

/* with an hr google chrome want to keep the width when you unload and reload. */
$("#rightTD").attr('width', $("#rightTD").width());
$("#rightTD").css('width', $("#rightTD").width());
$("#linktable").css('width', $("#linktable").width());

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

var toLoad = $(this).attr('href') + ' #content';
var divColor = $(this).parent().css('background-color') ;

$('#contentouter').load(toLoad);

$("DIV.ContainerPanel > DIV.wrapContent").css('border-left-color', divColor); /*2nd place*/
$('#contentouter').load("#"); /* see if this puts color in*/

return (false); /* prevents anchor from opening a page. */

} ) /*end binding click to linktable-a */

      $("TD.style1").click(function() {
                $(this).children("a").trigger("click");
       }   );

}) /* end document.ready(func) */

</script>

        .style1
        {
            height: 2.6em;
            width: 173px;
            padding-top:3px;
padding-bottom:3px;
padding-left:14px;
padding-right:14px;
text-align:left;
        }
        .style2
        {
            width: 181px;
        }

</style>
</head>
<body>

<table cellpadding="0" border="0" cellspacing="5">
<tr>
<td class="style1" style="background-color:rgb(0,200,50);">
<a id="aFoundingFathers" href="FoundingFathers2.htm" class="BlueFont" >Founding Fathers</a>
</td>
</tr>
<tr>
<td class="style1" style="background-color:rgb(187,187,61);">
<a href="ChaimW2.htm" class="WhiteFont" target="_blank" >Chaim Weizmann</a>
</td>
</tr>

</table>

</td>

    <div id="contentouter">
        <h2>Welcome!</h2>
        <p>Page is Loading</p>
    </div>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
=========================now second page: this one is called ChaimW2.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chaim Weizmann</title>

</head>
<body>
<div id="wrapper2">

<div class="wrapContent wrapContentBorder" >
Chaim Weizmann (1874-1952) Zionist leader and first President of Israel, was born in the village of Motol, near Pinsk, in the Russian Pale of Settlement, one of 15 children of a timber merchant where he attended a traditional heder; at the age of 11, he entered high school in Pinsk. Weizmann went on to study chemistry at the Polytechnic Institute of Darmstaat, Germany, and at the University of Freiburg, Switzerland, where, in 1899, he was awarded a doctorate with honors. In 1901, he was appointed assistant lecturer at the University of Geneva and, in 1904, senior lecturer at the University of Manchester.

</div>
</div>

</body>
</html>
=======================now third page - this one is called FoundingFathers2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Founders</title>

</head>
<body>
<div id="wrapper2">

        <div class="wrapContent wrapContentBorder" >
The founders of the state of Israel were a motley crew.
They came from Poland mostly. One was a jazz musician who liked Elvis. Another was a top notch ski instructor at the Alpine resort of Grindelwald. If you believe all this, then I have a bridge to sell you.
    </div>
</div>

    </div>
</div>

</body>
</html>

Topic Participants
gideoni
adam.w.knox

can't apply css - it gets applied, but then it gets overwritten

can't apply css - it gets applied, but then it gets overwritten

Topic Participants

gideoni

adam.w.knox