table td width in CSS is not being applied

John_Mc

Hi,

I have a table column defined as follows:

<td class="RightSlice">  </td>

The CSS is:

table.MasterPage td.RightSlice
{
width:10px;
background-image: url('/Web/App_Themes/Default/Images/RightBodySlice.png');
background-repeat: repeat-x;

}

My problem is that the width is not being applied but the background is. The only way I can control the td's width is by using spaces.

I've tried different CSS display settings but to no avail.

Would appreciate any help thanks

seamus

Works fine for me. The problem though is that without any text content, the height of the cell is effectively zero.

Specify a height for the cell and you should see it.

John_Mc

seamus wrote: »

Works fine for me. The problem though is that without any text content, the height of the cell is effectively zero.

Specify a height for the cell and you should see it.

Hi, thanks for the quick reply. I know the td has to contain some content but   usually satisfies this requirement.

I'm not sure where height comes into it though as it's not really important to my design. Would not specifying a height effect width being applied?

seamus

The width aspect worked fine for me when I checked it here, with and without content.

The general rule is that unless you specify a height and/or width, the object will only be as big as the elements within it. In this case since you're not specifying a height, it has an effective height of zero when it has no content. It does still have a width though.

Specifying a height shouldn't make any odds to the width.

John_Mc

seamus wrote: »

The width aspect worked fine for me when I checked it here, with and without content.

The general rule is that unless you specify a height and/or width, the object will only be as big as the elements within it. In this case since you're not specifying a height, it has an effective height of zero when it has no content. It does still have a width though.

Specifying a height shouldn't make any odds to the width.

Yeah I'm pretty sure height and width are independent of each other but said I'd ask to be sure.

Here's the Table row code, perhaps you can see a problem with it?

<tr valign="top">
        <td class="NavigationBar">
          <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>  
				          <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="SoftexPanelBar"
					          ExpandMode="singleExpandedItem" Width="200px" EnableEmbeddedSkins="false">
					          <DataBindings>
					            <telerik:RadPanelItemBinding ValueField="Key" NavigateUrlField="Url" ToolTipField="Description"/>
					          </DataBindings>
				          </telerik:RadPanelBar>
            </ContentTemplate>
          </asp:UpdatePanel>
        </td>
        <td class="LeftSlice">&nbsp;&nbsp;</td>        
        <td  class="Contents" >
          <div class="SiteMapPath">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <asp:SiteMapPath runat="server" ID="path" ShowToolTips="true" RenderCurrentNodeAsLink="true" >
                <CurrentNodeStyle CssClass="CurrentNode" />
              </asp:SiteMapPath>
            </ContentTemplate>
          </asp:UpdatePanel>
          </div>
          <div class="Contents"><asp:contentplaceholder id="cph" runat="server" /></div>
        </td>
        <td class="RightSlice">&nbsp;&nbsp;</td>
       </tr>

P.S I'm using a table based layout in this instance to achieve the look and feel provided by our graphic designer. It can't be achieved using DIVs and CSS because of an uneven background gradient...

Liam Byrne

John_Mc wrote: »

P.S I'm using a table based layout in this instance to achieve the look and feel provided by our graphic designer. It can't be achieved using DIVs and CSS because of an uneven background gradient...

You have my sympathies! Can you not get a graphic designer who's experienced with the web ?

John_Mc

Liam Byrne wrote: »

You have my sympathies! Can you not get a graphic designer who's experienced with the web ?

Yeah I probably could, but the problem is easily overcome by putting a td on the left and right, and applying a background image to them using CSS.

My only problem is that the td's aren't displaying at the width specified in the CSS