Hey folks,

Got a problem with something either in skinning or module layout, not really sure.

I have a table with the class of skinmaster at a width of 800.

On the home page of my site the width pretty much sticks to what is there, I have some home brew modules as content and one in the left pane.

What's happening is something is going wider than the 800 pixels I defined on other pages. First I thought maybe it was because of long page names, so I shorted a few but the page still goes beyound the 800 pixels. Then I decided to create a blank page with no modules, it goes beyond the 800 pixels. Just about every page manages to get out of that. I even took a page that had modules in it and removed the modules and the page was still wider that it was suppose to be.

What can I do to correct the mysterious widening of the pages?

here's the html file for the skin...

<link rel="stylesheet" href="Skin.css" type="text/css" />
<table class="pagemaster" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top">
            <table class="skinmaster" width="800" border="0" align="center" cellspacing="0" cellpadding="0">
                <tr>
                    <td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center">
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="height: 84; overflow: hidden">
                        <table class="skinheader" cellspacing="0" cellpadding="0" width="100%" border="0">
                            <tr>
                                <td class="slogan">
                                    Partnering with Schools for Children
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color: #d8de8a; height: 2px;">
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 84px;"
                                    class="logo">
                                    Douglas Education Service District</td>
                            </tr>
                            <tr>
                                <td style="background-color: #d8de8a; height: 3px">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="height: 100%;">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" style="height: 100%;">
                            <tr>
                                <td style="background-color:#003366;" colspan="3">
                                    [MENU]
                                </td>
                                <td style="background-color:#003366;"></td>
                            </tr>
                            <tr valign="top">
                                <td class="toppane" id="TopPane" runat="server" valign="top" align="center" colspan="3">
                                </td>
                            </tr>
                            <tr>
                                <td width="155" valign="top" align="left" nowrap style="background-color: #d8de8a;
                                    color: #003366">
                                    [CURRENTDATE]</td>
                                <td width="100%" valign="top" align="center">
                                    <b>..::</b>&nbsp;[BREADCRUMB]<b>::..</b></td>
                                <td width="155" valign="top" align="right" NOWRAP="NOWRAP" style="background-color: #d8de8a;
                                    color: #003366">[SEARCH]
                                    </td>
                            </tr>
                            <tr valign="top">
                                <td class="leftpane" id="LeftPane" runat="server" valign="top" align="left">[MENU:2]
                                </td>
                                <td class="contentpane" id="ContentPane" runat="server" valign="top" align="center">
                                </td>
                                <td class="rightpane" id="RightPane" runat="server" valign="top" align="center">
                                </td>
                            </tr>
                            <tr>
                                <td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <table class="skingradient" cellspacing="0" cellpadding="0" width="100%" border="0">
                            <tr>
                                <td valign="middle" align="center">
                                    [COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY]&nbsp;&nbsp;[LOGIN]</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top" align="center">
                        [DOTNETNUKE]</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here's the skin's skin.css tile...

/*
================================
Skin styles for DotNetNuke
================================
*/  

.slogan
{
 width:100%;
 background-color: #003366;
 color: #ffffff;
 font-style:italic;
 font-weight:lighter;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size:medium;
 text-align: right;
}
.logo
{
 width:100%;
 color: #ffffff;
 font-weight:bold;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size:+40px;
 text-align: center;
 background-image: url(crayons.gif);
 background-repeat: no-repeat;
}
.pagemaster {
 width: 100%;
 height: 100%; 
 background-color: #FEFEFE;
}
.skinmaster {
 height: 100%;
 background-color: #ffffff;
}
.skinheader {
}
.skingradient {
 
}
.controlpanel {
 width: 100%;
 background-color: #DFE5F2;
}
.toppane {
 width: 100%;
 background-color: transparent;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
}
.leftpane {
 width: 150px;
 background-color: #003366;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 height:100%;
}
.contentpane {
 width: 100%;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 background-color: transparent;
}
.rightpane
{
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 width: 175px;
 background-color: #b6cdab;
}
.bottompane
{
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 width: 100%;
 background-color: transparent;
}
.MainMenu_MenuContainer {
 background-color: transparent;
}
.MainMenu_MenuBar {
 cursor: pointer;
 cursor: hand;
 height:16px;
 background-color: Transparent;
}
.MainMenu_MenuItem {
 border-left: #003366 0px solid;
 border-bottom: #003366 1px solid;
 border-top: #003366 1px solid;
 border-right: #003366 0px solid;
 cursor: pointer;
 cursor: hand;
 color: white;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: Transparent;
}
.MainMenu_MenuIcon {
 background-color: #003366;
 border-left: #003366 1px solid;
 border-bottom: #003366 1px solid;
 border-top: #003366 1px solid;
 cursor: pointer;
 cursor: hand;
 text-align: center;
 width: 15px;
 height: 21px;
}
.MainMenu_SubMenu {
 background-color: #003366; 
 z-index: 1000;
 cursor: pointer;
 cursor: hand;
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#003366', Direction=135, Strength=3);
}
.MainMenu_MenuBreak {
 height: 1px;
}
.MainMenu_MenuItemSel {
 background-color: #003366;
 cursor: pointer;
 cursor: hand;
 color: #d8de8a;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
}
.MainMenu_MenuArrow {
 border-right: #003366 1px solid;
 border-bottom: #003366 1px solid;
 border-top: #003366 0px solid;
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}
.MainMenu_RootMenuArrow {
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}
.StandardButton     {
    background: #7994CB none;
    color: #FFFFFF;
    font-family:Verdana, sans-serif;
    font-size: 11px;
    font-weight: normal;
}
.TreeViewMenu
{
 width: 175px;
 background-color: pink;
 BORDER-RIGHT: #7994CB 1px solid;
 BORDER-TOP: #7994CB 1px solid;
 BORDER-LEFT: #7994CB 1px solid;
 BORDER-BOTTOM: #7994CB 1px solid;
 moz-border-radius-bottomleft: 15px;
 moz-border-radius-bottomright: 15px;
 moz-border-radius-topleft: 3px;
 moz-border-radius-topright: 3px
}
.TreeViewMenu_Header {
 BACKGROUND-IMAGE: url(gradient_LtBlue.jpg);
}
.Head   {
    font-family: Tahoma, Arial, Helvetica;
    font-size:  18px;
    font-weight:    normal;
    color: #333333;
}

.BleedingHeart
{
 background-color:#d8de8a;
 font-weight:bolder;
}
.SubNormal
{
 color: #BdAd3d;
 font-size:smaller;
}
.Pinky
{
 font-size:x-small;
}

a.Pinky:hover
{
 color:#003366;
 font-weight:bold;
}
a.Pinky:link
{
 color:#003366;
 font-weight:bold;
 position:relative;
 left:-5px;
 font-size:x-small;
}
a.Pinky:visited
{
 color:#003366;
 font-weight:bold;
 font-size:x-small;
}
.Monkey
{
 overflow:hidden;
 background-color:pink;
 color:Red;
 width: 75px; 
}

And for what it's worth, here's the css from the Admin page CSS textbox.

/* ================================
    CSS STYLES FOR DotNetNuke
   ================================
*/  

/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  {
}

.ContentPane  {
}

.RightPane  {
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:active   {
}

A.SelectedTab:hover    {
}

/* text style for the unselected tabs */
.OtherTabs {
}
   
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:active   {
}

A.OtherTabs:hover    {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
.Normal
{
}
A.Normal:link
{
 text-decoration: none;
 font-weight: bold;
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
   
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:active   {
}

A.CommandButton:hover    {
}
   
/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:active    {
}

A:hover {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}

UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */   
.Message    {
}  

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

And here is the Skin.xml file

<Objects>
 <Object>
  <Token>[BREADCRUMB]</Token>
  <Settings>
   <Setting>
    <Name>Separator</Name>
    <Value><![CDATA[&nbsp;&raquo;&nbsp;]]></Value>
   </Setting>
   <Setting>
    <Name>RootLevel</Name>
    <Value>0</Value>
   </Setting>
  </Settings>
 </Object>
 <Object>
  <Token>[TREEVIEW]</Token>
  <Settings>
   <Setting>
    <Name>bodyCssClass</Name>
    <Value>Normal</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>TreeViewMenu</Value>
   </Setting>
   <Setting>
    <Name>headerCssClass</Name>
    <Value>TreeViewMenu_Header</Value>
   </Setting>
   <Setting>
    <Name>headerTextCssClass</Name>
    <Value>Head</Value>
   </Setting>
   <Setting>
    <Name>level</Name>
    <Value>root</Value>
   </Setting>
   <Setting>
    <Name>nowrap</Name>
    <Value>true</Value>
   </Setting>
   <Setting>
    <Name>treeIndentWidth</Name>
    <Value>5</Value>
   </Setting>
  </Settings>
 </Object>
 <Object>
  <Token>[MENU:2]</Token>
  <Settings>
   <Setting>
    <Name>bodyCssClass</Name>
    <Value>Normal</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>TreeViewMenu</Value>
   </Setting>
   <Setting>
    <Name>headerCssClass</Name>
    <Value>TreeViewMenu_Header</Value>
   </Setting>
   <Setting>
    <Name>headerTextCssClass</Name>
    <Value>Head</Value>
   </Setting>
   <Setting>
    <Name>level</Name>
    <Value>child</Value>
   </Setting>
   <Setting>
    <Name>nowrap</Name>
    <Value>false</Value>
   </Setting>
   <Setting>
    <Name>treeIndentWidth</Name>
    <Value>0</Value>
   </Setting>
   <Setting>
    <Name>Display</Name>
    <Value>Vertical</Value>
   </Setting>
  </Settings>
 </Object>
 <Object>
  <Token>[SEARCH]</Token>
  <Settings>
   <Setting>
    <Name>ShowWeb</Name>
    <Value>False</Value>
   </Setting>
   <Setting>
    <Name>ShowSite</Name>
    <Value>False</Value>
   </Setting>
   <Setting>
    <Name>Submit</Name>
    <Value>Go!</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>Pinky</Value>
   </Setting>
  </Settings>
 </Object>
</Objects>

Thanks for the reply, tried that and it didn't work.

Might be a red herring, but: Been futzing around with the horizontal menu, it is not full of items and if I look at the page I still have about two inches left of space. I removed one of the menu items and the skin narrowed back down.

Not using a logo, thank goodness. I'm using a background image as part of a style sheet.

It's really frustrating due to the inconsistency to which it does it.

For example:
www.douglasesd.k12.or.us is narrow
http://www.douglasesd.k12.or.us/StudentsParents/HomeSchooling/7Tipsforthehomeschooler/tabid/876/Default.aspx is narrow (until you hit the visibility gizmo then when it collapses it goes wide)
http://www.douglasesd.k12.or.us/Staff/Production/tabid/395/Default.aspx is wide, even when hitting the visibility thing.
http://www.douglasesd.k12.or.us/Visitors/HumanResources/tabid/330/Default.aspx is narrow.

Also. try specifying the colum (TD) widths in the skin as opposed to the style sheet.  I have found that the results will differ.  I spent hours trying to develop skins using the style sheet for 100% of the specifications but had problems getting the skins to look the way I wanted.  I discovered that I had to put the width directly in the tables, which is how I do all my skins now.  Also mixing units (% abd PX) also caused inconsistant behavior.