Hello,

I have made a container which have some nice rounding graphics on each corner and on each side. I have also made a skin, with the same mechanism as the default blue skin, which make contentpane flow over the leftpane or the rightpane if one of them is not used (leftpane /rightpane width = 175px contentpane width = 100%) instead of leaving an unused space where the pane should be.

The problem I encounter here is that when putting my container in the rightpane, the right side is missing. If I put the container into the contentpane, it shows correctly. If I use the default blue skin, the same problem occur. You can see the problem att Keylinx DNN Site , where the "In the spotlight" container shows up normally, but the "Blog RSS" does not.

The container code looks like this (problem code is bold):

      <div class="RoundDark" align="right" >
        <div class="UpDark">
        <div class="LeftUpDark"></div>
                <div class="UpDark"><dnn:ACTIONS runat="server" id="dnnACTIONS" ProviderName="DNNMenuNavigationProvider"

ExpandDepth="1" PopulateNodesFromClient="True" /></div>
                <div class="UpDark"><dnn:ICON runat="server" id="dnnICON" /></div>
                <div class="UpDark"><dnn:TITLE runat="server" id="dnnTITLE" /></div>
        <div class="RightUpDark">&nbsp;</div>
        </div>
        <div style="clear:both; " >
<table cellSpacing="0" cellPadding="0"  border="0">
<tr>
            <td class="LeftDark">&nbsp;</td>
                <td class="RoundDarkContent" id="ContentPane" runat="server" ></td>
            <td class="RightDark">&nbsp;</td>
</tr>
</table>
        </div>
    <div class="downdark">
        <div class="LeftDownDark">&nbsp;</div>
            <div class="DownDark" ></div>
        <div class="RightDownDark">&nbsp;</div>
    </div>
      </div>

and the corresponding CSS:

.RoundDark
{

top: 0px;
left: 0px;
width: 100%;

}


.RoundDark .Head
{
    font-family: Lucida Sans Unicode, Lucida Sans, Lucida, Verdana, Tahoma, Arial, Helvetica;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.RoundDark .Normal
{
    font-family: Lucida Sans Unicode, Lucida Sans, Lucida, Verdana, Tahoma, Arial, Helvetica;
    font-size: 12px;
    font-weight: normal;
    color: #333;
    padding-left :3px;
    padding-right :3px;
}
.RoundDark a:link
{
    text-decoration: none;
    color: #400;

}
.RoundDark a:hover
{
    text-decoration: none;
    color: #000;
    background: #ccc;
}

.RoundDark a:visited
{
    text-decoration: none;
    color: #400;
}


.LeftUpDark
{
    background: url(up_left_dark.jpg) no-repeat;
    height: 21px;
    width: 5px;
    left: 0px;
    top: 0px;
    float: left;

}
.LeftDark
{
    background: url(left_dark.jpg) repeat-y;
    width: 5px;

}
.RoundDarkContent
{
width: auto;
}

.RightDark
{
    background: url(right_dark.jpg) repeat-y;
    width: 6px;

}

.UpDark
{
    font-family: Lucida Sans Unicode, Lucida Sans, Lucida, Verdana, Tahoma, Arial, Helvetica;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: url(up_dark.jpg) repeat-x; top;
    top: 0px;
    float:left;

}
.RightUpDark
{
    background: url(up_right_dark.jpg) no-repeat;
    height: 21px;
    width: 6px;
    float: right;

}
.DownDark
{
    background: url(down_dark.jpg) repeat-x; top;
    height: 6px;
    float: left;
width: auto;
}
.RightDownDark
{
    background: url(down_right_dark.jpg) no-repeat;
    height: 6px;
    width: 6px;
    float: right;

}
.LeftDownDark
{
    background: url(down_left_dark.jpg) no-repeat;
    height: 6px;
    width: 5px;
float: left;
}

 If I set the RightDark to padding-right: 3px; the container is ok in the rightpane, but the one in contentpane is then not showing the right line correct. I know that I could go with border-right properties on the contentpane cell for this one, but this is merely just a test container. I will do more advanced containers later, and really need this to work in all panes. Can someone please advise? (Or did you just fall asleep halfway through my monster post? :))

Best Regards,

Tobias

Hi,

You are right, however if I set ContentPane and LeftPane to be a fixed width, there will be a gap when LeftPane is not used and ContentPane content is not using the whole space. It is confusing, if I use a Container that has not a left and right column, then this bug will not appear. I guess that there is a limitation in the css?

Thank you for your help, I finally found the problem. The ContentPane of the container contained long words which caused it to go and "steal" the space allocated for the right td. A simple nowrap on the right td made the trick.

<td class="RightDark" nowrap>&nbsp;</td>

Best Regards,

Tobias