Nesting DIV loses format with Axjaxtabs

[techfella]

1) Script Title: Ajaxtabs content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem: I'm trying to nest the Axjaxtabs pages inside a DIV tag on a page. The script actually does work but I lose the css page format for that div. The DIV in question is "story" in get over ridden by the ajaxtabs.js. If I comment out the .js in the head the page renders properly but of cousre the script does not work.

<div class="story">


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="ajaxtabs/external.htm" rel="ajaxcontentarea">Link 1</a></li>
<li><a href="ajaxtabs/external2.htm" rel="ajaxcontentarea">Link 2</a></li>
<li><a href="ajaxtabs/external3.htm" rel="ajaxcontentarea">Link 3</a></li>
<li><a href="ajaxtabs/external4.htm" rel="ajaxcontentarea">Link 4</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

[jscheuer1]

It is unclear to me where you want the 'story' styles applied but, give this a shot:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="ajaxtabs/external.htm" rel="ajaxcontentarea">Link 1</a></li>
<li><a href="ajaxtabs/external2.htm" rel="ajaxcontentarea">Link 2</a></li>
<li><a href="ajaxtabs/external3.htm" rel="ajaxcontentarea">Link 3</a></li>
<li><a href="ajaxtabs/external4.htm" rel="ajaxcontentarea">Link 4</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle story">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

or even possibly:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="ajaxtabs/external.htm" rel="ajaxcontentarea">Link 1</a></li>
<li><a href="ajaxtabs/external2.htm" rel="ajaxcontentarea">Link 2</a></li>
<li><a href="ajaxtabs/external3.htm" rel="ajaxcontentarea">Link 3</a></li>
<li><a href="ajaxtabs/external4.htm" rel="ajaxcontentarea">Link 4</a></li>
</ul>

<div id="ajaxcontentarea" class="story">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

[techfella]

Thanks for the suggestion, but neither worked. If you can visualize the "story" class is a box that has content, I want to house the ajaxtabs inside that area.
Here's the css for the normal box.

<div class="post">
<h2 class="title">Sample Tags</h2>
<h3 class="posted">Posted on January 1st, 2007 by Author</h3>
<div class="story"> this is where I want the ajaxtabs, but it cancels out the other DIV tags that create the boxed area. It's not the stylesheet that does it, it's when the ajaxtabs.js is active that I lose the formatting.
<p>A blockquote: </p>
<blockquote>
<p blah, blah, blah</p>
</blockquote>
</div>
<div class="meta">
blah, blah, blah</div>
</div>
</div>

[jscheuer1]

Well, only style can be 'cancelled out' so, if that is what is really happening, edit the style so that it is reinforced rather than cancelled. But, I see that you have some content inside the story div that uses blockquote and p tags. That's markup and will be overwritten if it falls inside the div with the id of "ajaxcontentarea', or that simply won't be there if if you are changing from:

<div class="story"> this is where I want the ajaxtabs, but it cancels out the other DIV tags that create the boxed area. It's not the stylesheet that does it, it's when the ajaxtabs.js is active that I lose the formatting.
<p>A blockquote: </p>
<blockquote>
<p blah, blah, blah</p>
</blockquote>
</div>

to:

<div class="story">


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="ajaxtabs/external.htm" rel="ajaxcontentarea">Link 1</a></li>
<li><a href="ajaxtabs/external2.htm" rel="ajaxcontentarea">Link 2</a></li>
<li><a href="ajaxtabs/external3.htm" rel="ajaxcontentarea">Link 3</a></li>
<li><a href="ajaxtabs/external4.htm" rel="ajaxcontentarea">Link 4</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>
[</div>]

You can put whatever markup you like in that "ajaxcontentarea" section though as well as on the external pages that will load into it. And, if that markup has style hooks (class and/or id names) that hook in your style on the 'top' page, it will be styled by those styles.

If you need more help, I would need a link to a 'before' and an 'after' page to really see the problem.