Tabbed panel changes not showing up

Question

I'm using Dreamweaver CS5 on a Mac. A couple of years ago I created a website using tabbed panels (http://www.4dtr.com/Communication_Interpersonal.html), Recently, I went to make some modification to the tabs:
1. altered the text in the tab
2. Changed background colour of the tabbed panel)
3. Changed the font size
When I preview the changes in DW they seem to have worked...they also show up when I look in the Adobe Browser Lab. When I upload to the server however only the "altered text" modifications shows up. The change to background color as well as change to font size do not. What am I doing wrong? Help please...

Answer 1

The first thing I notice as I look at your CSS Panel is that many of your styles are existing in the page itself instead of in a linked CSS stylesheet.
Before you proceed, check through the list of styles in the CSS Styles Panel and delete styles that you don't need. Any style that has been completely superseded by another style further down on the list can be deleted. You should be left with only styles you want to be active.
It is simple to move those styles to an external stylesheet; you can do it right in the CSS Panel.
The aim is to have styles associated with the tabbed panels in the "SpryTabbedPanels.css" file, and to have no styles embedded in the page. Then you will make sure those external stylesheets are attached to all the pages that need those style. The on-page, embedded styles are shown in the CSS Panel (with "all" selected as the view) under labels that read: "<style>".
I would also recommend creating a global.css stylesheet for those other styles that also should occur throughout your site. Do File > New > Blank Page > CSS to create the new stylesheet. After you have created this stylesheet, attach it to your page. If you are working with a true template file (file extension is .dwt), I suggest attaching it to that template. With the page in question open, open the CSS Panel and click the chain icon at the bottom of the Panel. Select the newly created stylesheet to link it to the page.
Then select the styles you want to move, and keep holding the mouse down while you drag them under the appropriate stylesheet name in the CSS Styles Panel. You could also select them and right click, choosing 'move CSS styles'.
Here's some links to info about the CSS Styles Panel: http://help.adobe.com/en_US/Dreamweaver/CS5/Using/WSbb8fae38174aec9d-4fb84361126e2b2aaf3-8 000.html
The long and the short of it is: If a style was changed and the style sits on the page, that change is not reflected throughout the site, only on that page. If the style is moved (or created) on an external stylesheet, and the stylesheet is linked to all pages, that change will be reflected throughout the site.
N.B.: If you change the template file, be sure to propagate the changes to all the pages that are based on that template. And don't forget to upload the changed files...
Beth