I’ve update the link you can take a look at it online, the changes I had applied were still local 
I’m going to add a harmony here, higher in the scale than Paul as he’s located to the South of me.
Where oh where’s jQueeeeeeeery?
i.e. You need to include a link to the jQuery library in your page. Paul, for example is using this:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
A good starting point may be to follow P’s lead and get the Tabs running in a fresh page without any other distracting code, then do the customisation and then import it into your design. Well, this process tends to work for me anyway.
Oh, and please include the link when you refer to it - it’ll save us rummaging around in the topic to find it.
My link above has like 5 oh-so-simple steps to implement. If it doesn’t click while following that tut, then it’s not going to.
Where oh where’s jQueeeeeeeery?
Ohhh riiiightt
Now ask my question again so no one has to piece previous question from what I had mentioned in the past few messages. That question is can I use the current setup and place the background tabs in a style sheet associated with this version of jQuery tabs, unlike the one Paul is using ?
I know to eliminate the browser text from the tabs but is there a style sheet causing the narrow content box between tabs, it can be easily seen when you switch between tabs you’ll see the words “active post” in a narrow white box.
If you mean the white background behind the revealed content i.e. “Popular Stuff”, “Active Posts Stuff” and “Recent Stuff”, then it’s due to this embedded style:
.tabs-container {
background:#fff; /* kills fadding in/out IE text bug */
}
It’s 2am, and my concentration is fadding out, else I might have some alternative ideas for the IE fading text rendering problem. Meantime, Try Google.
There is no cure for Ie’s fading filter problem other than removing it.
It doesn’t look as though its needed in that example or I didn;t notice any ill effects by removing the white background.
Now ask my question again so no one has to piece previous question from what I had mentioned in the past few messages. That question is can I use the current setup and place the background tabs in a style sheet associated with this version of jQuery tabs, unlike the one Paul is using ?
You just style the tabs like any other tabs that would you do.
The jquery dynamically adds a class of “tabs-selected” to the currently clicked tab as shown below.
<ul class="tabs-nav" id="tabnav">
<li class=""><a href="#tab1">Popular</a></li>
<li class=""><a href="#tab2">Active Posts</a></li>
[B]<li class="tabs-selected[/B]"><a href="#tab3">Recent</a></li>
</ul>
Therefore you should code the tabs as per normal but set up a class of .tabs-selected to style the tab in its active state. When the jquery runs the class gets added to the element and the styles you defined are then revealed.
So if you had double images you would say something like:
li.tabs-selected a {background-position:0 -13px}/* or whatever the dimension is required to show the over state of the tab */
As I mentioned earlier it would be better if you spread the tabs out so they don’t overlap and make life easier for us all
You can hide the text with text-indent (although there are better methods ) but you will need to size the anchors to fill the space of course.
#tabnav li a {
text-indent:-999em;
float:left;
width:75px;
height:12px;
}
Why are you putting different margins on one tab content only? Surely all content should be in the same place?
#tabnav p {
margin:0 0 0 21px;
}
Of course you would be better defining the size of the container rather than adding margins to each individual element.
<ul class= id=“tabnav”>
<li><a href=“#tab1”>Popular</a></li>
<li><a href=“#tab2”>Active Posts</a></li>
<li><a href=“#tab3”>Recent</a></li>
<li class=“tabs-selected”><a href=“#tab3”>Recent</a></li>
etc
etc
</ul>
Add as you see above a class called tab-selected and style that for when you select the tab? And the non-selected tab is when it’s not selected.
The jquery dynamically adds a class of “tabs-selected” to the currently clicked tab as shown below.
I don’t understand what you mean ?
As I mentioned earlier it would be better if you spread the tabs out so they don’t overlap and make life easier for us all
I’m going to do that, don’t worry Hide the browser text you mean, I was going to eliminate it from the HTML completely.
Why are you putting different margins on one tab content only? Surely all content should be in the same place?
I was going to do each one individually but now you mentioned that I should size the container, the container being id=tabnav correct ?
Paul means that Javascript inserts the class .tabs-selected to your li element dynamically, meaning you don’t need to add it to your HTML because jQuery is appending that class to your existing markup.
You can style .tabs-selected within your CSS stylesheet just like every other element.
The container for your tabs is #tabwrap.
I understand, there is a problem I can’t load jQuery to position one of the tabs I’ve finished as my connection is preventing it unless there is another way ?
If you mean you want to load the jQuery library locally without an internet connection rather than hotlinking from googleapis, then simply download the file from there and point your link that instead.
I still don’t know why I can’t see my tabs to position.
I don’t understand the question? You can’t see your tabs to what position? Are we still talking about jQuery?
I can’t see my tabs to position them with jQuery.
Do you have the jQuery file properly linked to in your document? Otherwise it won’t work.
yup
Is it the bg_sidebar background image you’re missing? It’s not at the URL you’ve specified.
.bg_sidebar {
background-image: url(images/sidebar.png); /* not at this URL */
height: 308px;
margin: 145px 0 65px 52px;
width: 292px;
}
Can you refresh my memory as to why you need a .bg_sidebar div rather than applying the background to #sidebar ?
Also, do you use Firebug? It makes tracking and fixing this kind of stuff very simple.
Not the background image, the dynamic tabs I don’t see to position.
Can you refresh my memory as to why you need a .bg_sidebar div rather than applying the background to #sidebar ?
I think I see what you mean, merge them both together ? And get rid of the class bg.sidebar!
lol - We’ve asked about 4 times now but we don’t know what you mean so repeating the same phrase back to us isn’t making it any clearer to us
Can you elaborate a bit more as we dont know what you mean by “the dynamic tabs I don’t see to position”. It just doesn’t make sense and we can’t get a grasp on what you want.
Why do you have to see them before you can position them?
Just apply the css to the elements concerned as per normal but use the “tabs-selected” class for the current item as mentioned before.
You won’t actually see html like this in your document.
<li [B]class="tabs-selected"><a[/B] href="#tab3">Recent</a></li>
The class is added dynamically so your normal html will look like this at first:
[B]<li><[/B]a href="#tab3">Recent</a></li>
You will only see the html with dynamic classes added if you use a web developer tool and get it to print out the "generated source" of the document.
However I don’t think that’s what you are talking about.
No I understand that the jQuery script add that line of code to the HTML automatically without me having to enter it What I mean is the tabs that I created with the on/off state in one image I can’t see them so that I know where to position them exactly ?
Just run the code and the current tab will be selected by jquery and it will show. You can then click the other tabs to see where they appear. If you’ve placed the normal tab correctly then the active tab should also be correct automatically assuming you made the images correctly.
You’ll have to put it live so we can see what’s going on.