[RESOLVED]padding not working in <tr>

Had no problem in the master page setup where the main content is placed inside a <td>.

The ListView page is placed in the main content and I have some css for the <tr> as follows:

tr.lvLayoutRow
{
    background-color: #D1B5A1;
    vertical-align: top;
    padding-top: 3px;
    padding-bottom: 3px;
}

the background color works and the alignment works but for some reason the padding is not working.  The ListView is nested inside the inner table and the DataPager inside the outer table.  They do this so the Pager works with the listview.  Here is the code for tables:

    <LayoutTemplate>
        <table id="Table1" runat="server" width="100%">
            <tr id="Tr1" runat="server">
                <td id="Td1" runat="server">
                    <table ID="itemPlaceholderContainer" runat="server" border="1" style="border-collapse: collapse; border-color: #5C4033; border-style: solid; width: 100%;">
                        <tr id="Tr3" runat="server" class="lvLayoutRow">
                            <td id="Th1" runat="server" style="min-width: 135px;">Actions</td>
                            <td id="Th2" runat="server" style="width: 100%;">Discussions</td>
                            <td id="Th3" runat="server" style="min-width: 60px;">Topics</td>
                            <td id="Th4" runat="server" style="min-width: 50px;">Posts</td>
                            <td id="Th5" runat="server" style="min-width: 100px;">User</td>
                            <td id="Th6" runat="server" style="min-width: 150px;">Last Topic</td>
                        </tr>
                        <tr ID="itemPlaceholder" runat="server">
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="Tr6" runat="server">
                <td id="Td2" runat="server" style="text-align: left;">
                    <asp:DataPager ID="DataPager1" runat="server" PageSize="5">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowLastPageButton="True" />
                        </Fields>
                    </asp:DataPager>
                </td>
            </tr>
        </table>
    </LayoutTemplate>

Any ideas as to why the padding isn’t working?

Apply your padding to the td element instead of tr.

You can not apply CSS padding to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column elements.

Yeah. apply css on td instead of tr like the following

tr.lvLayoutRow td
{
    background-color: #D1B5A1;
    vertical-align: top;
    padding-top: 3px;
    padding-bottom: 3px;
}

try this

.lvLayoutRow
{
    background-color: #D1B5A1;
    vertical-align: top;
    padding-top: 3px;
    padding-bottom: 3px;
}
    <LayoutTemplate>
       
<table id="Table1" runat="server" width="100%">
           
<tr id="Tr1" runat="server">
               
<td id="Td1" runat="server">
                   
<table ID="itemPlaceholderContainer" runat="server" border="1" style="border-collapse: collapse; border-color: #5C4033; border-style: solid; width: 100%;">
                       
<tr id="Tr3" runat="server">
                           
<td id="Th1" class="lvLayoutRow" runat="server" style="min-width: 135px;">Actions</td>
                           
<td id="Th2" class="lvLayoutRow" runat="server" style="width: 100%;">Discussions</td>
                           
<td id="Th3" class="lvLayoutRow" runat="server" style="min-width: 60px;">Topics</td>
                           
<td id="Th4" class="lvLayoutRow" runat="server" style="min-width: 50px;">Posts</td>
                           
<td id="Th5" class="lvLayoutRow" runat="server" style="min-width: 100px;">User</td>
                           
<td id="Th6" class="lvLayoutRow" runat="server" style="min-width: 150px;">Last Topic</td>
                       
</tr>
                       
<tr ID="itemPlaceholder" runat="server">
                       
</tr>
                   
</table>
               
</td>
           
</tr>
           
<tr id="Tr6" runat="server">
               
<td id="Td2" runat="server" style="text-align: left;">
                   
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
                       
<Fields>
                           
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowLastPageButton="True" />
                       
</Fields>
                   
</asp:DataPager>
               
</td>
           
</tr>
       
</table>
   
</LayoutTemplate>

Only the TD can have padding

pnoneal, 

This may be caused due to 3 scenarios:

1: One way you need to check is that, you must specify the entire css parent hirearchy if you are using child elements using a .

eg: #Table1 #Tr1  #itemPlaceholderContainer tr.lvLayoutRow


2: Use Margin property instead of padding

3: Use

padding-top: 3px !important; 
 padding-bottom: 3px !important;
Coz, this may occur as the padding property may get overriden by the parent's padding property. Use !important value to override base value with parent's.
For more details visit: mithunondotnet.wordpress.com

I tried all of them.  The [!important] didn’t work.  The tr.lvLayoutRow td from
protienshow did work.  Putting the class in each <td> worked too.  But if I’m going to do that I might as well use different class names so that I can set the width for each column too.  I’m tyrying
to take out all the layout information and put into a theme so I guess I’ll go with the seperate class for each <td>.  Just makes more work.

I don’t know I’m undecided.  The method that
protienshow
 provided is smooth.  Maybe, I’ll just leave the style for the <td> inline with the code.  I’ve taken out most of the layout and put into .css file.  At least I have some options.

Thanks,

Paul

res.web

<div class="comment-left-col">

<input id="quote-createdby" value="res.web" type="hidden" /></div> <div class="comment-right-col">

Re: padding not working in

4/20/2012 4:46:34 AM

<div id="reference-post-content" class="reply-comment">

try this        .lvLayoutRow

</div> </div>

It worked when I put td.lvLayoutRow instead of just lvLayoutRow.

Hi

Leave a Reply