Solved

TD padding

Posted on 2011-09-13
11
329 Views
Last Modified: 2012-05-12
I have one table that I want the style to have padding of 3 points on all 4 points. If I put this in the td style, it works. If I put it in a class and add it to the td coding, it doesn't. If I put it in a style and add to coding, it doesn't. HOw do I fix this?

Doesn't work:
 <td valign="top" align="left" width="100%" style="padding: 3px 3px 3px 3px;">

Open in new window


doesn't work:
<td valign="top" align="left" class="tdHome">

Open in new window


.tdHome td
{
    vertical-align: top;
    padding: 3px 3px 3px 3px;
}

or 

#tdHome td
{
    vertical-align: top;
    padding: 3px 3px 3px 3px;
}

Open in new window


Does work:
td
{
    vertical-align: top;
    padding: 3px 3px 3px 3px;
}

Open in new window


But I don't want to put it in the 'td' because I only want the padding for THIS table, not for every table.

thanks.
0
Comment
Question by:Starr Duskk
  • 5
  • 2
  • 2
  • +1
11 Comments
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 250 total points
ID: 36533238
if this: <td valign="top" align="left" class="tdHome"> try this: .tdHome {vertical-align: top; padding: 3px 3px 3px 3px;}
or td .tdHome {vertical-align: top; padding: 3px 3px 3px 3px;} ;
last one is inefficient selector
0
 
LVL 7

Assisted Solution

by:Ironhoofs
Ironhoofs earned 125 total points
ID: 36535450
Like SSupreme said, its an notation problem:

.tdHome  //refers to elements with class="tdHome"
#tdHome //refers to a element with id="tdHome"

The difference between ID and CLASS is that ID should be unique inside the webpage, while a class can be used multiple times.

.tdHome TD // refers to any TD inside a element with class="tdHome"

Example:

<table>
  <tr>
    <td class="tdHome">
      <table>
        <tr><td>.tdHome TD changes this</td></tr>
        <tr><td>.tdHome TD changes this too]</td></tr>
    </table>
  </td>
</tr>
</table>
0
 
LVL 8

Expert Comment

by:MelMc
ID: 36537138
Also, if you specifically want 3px and no more, you should add cellPadding="0" within your <table> tag
0
 
LVL 1

Author Comment

by:Starr Duskk
ID: 36537530
Sorry. I failed to mention I had already tried that, and I just tried it again. It doesn't work. This is what I have:

td
{
    margin: 0;
    padding: 0;
    border: 0;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    vertical-align: top;
    text-align: left;
    font-weight: normal;
}

.tdHome
{
        text-align: left;
    vertical-align: top !important;
    padding: 3px 3px 3px 3px !important;
}

Open in new window


Here is my table:
                    <table width="1075px" >
                        <tr>
                            <td valign="top" align="left" class="tdHome">
                                <div id="swishmenu">
                                    <uc:MenuPanelBar ID="MenuPanelBar" runat="server" />
                                    <asp:Label ID="lblError" runat="server"></asp:Label>
                                </div>
                            </td>
                            <td valign="top" align="left" width="100%"  class="tdHome">
                                <div class="swishtext">
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                    </asp:ContentPlaceHolder>
                                </div>
                            </td>
                            <td valign="top" align="center" width="15"  class="tdHome">
                                <asp:Panel ID="panPrintablePage" runat="server">
                                    <uc:PrintablePageIcon ID="PrintablePageIcon" runat="server" />
                                </asp:Panel>
                            </td>
                        </tr>
                    </table>

Open in new window

0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 250 total points
ID: 36537868
This work as you want, I tested it:
.tdHome
{
    vertical-align: top;
    padding: 3px 3px 3px 3px;
}
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:Starr Duskk
ID: 36538210
As I indicated. It simply is not working with my code.

It only works if I put those values in the "td" CSS, and then it applies to every table, not just the on table. My .tdHome class does not override or do anything. It's as though it doesn't exist. It only does with the "td" does.

Oh well. Thanks to everyone anyway.
0
 
LVL 8

Assisted Solution

by:MelMc
MelMc earned 125 total points
ID: 36538244
In the original example you named your class .tdHome td
This naming convention will apply the styling to all of the <td> tags that come after any element with the class .tdHome. If you want to apply styling to the element with the class tdHome reference it in your style sheet as .tdHome or TD.tdHome
0
 
LVL 1

Author Comment

by:Starr Duskk
ID: 36538599
Yes, I did in my original example, and Ironhoofs explained that. Thanks both of you for the explanation. Sadly, it doesn't help my situation.

But in my next example, I indicated that I failed to mention that I had already tried .tdHome by itself, and I again demonstrated the example code I am using showing that I used class="tdHome" and the CSS.

So yes, I've tried what the final recommendations are, shown the source code, and it isn't working for me. So I don't know why mine is failing. It should work. That's what I had tried in the first place, but after trying everything else, failed to report that in my initial post.

Anyway, thanks all. Everything I have tried should work, but it is not. Frustrating. I'll close this out.
0
 
LVL 7

Expert Comment

by:Ironhoofs
ID: 36541962
Styles will sometimes not be applied correctly because of errors in the HTML or CSS. Do you have a working URL where we could see the problem? If not, the full CSS en HTML (not the ASP.NET code) should be sufficient...
0
 
LVL 1

Accepted Solution

by:
Starr Duskk earned 0 total points
ID: 36546630
I figured out the problem. I was redefining a master page in the page: me.masterpagefile = and somehow that was ignoring the classes within the table.
0
 
LVL 1

Author Closing Comment

by:Starr Duskk
ID: 36565536
found reason for problem.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now