CSS for padding and spacing are not working for one class but working for the other
Asked by Kathryn Moye:

My CSS for padding and spacing seem to be ignored in the col2 class. col1 is working fine.

Thanks

\<code\>

\<ac:macro ac:name="style"\>  
\<ac:plain-text-body\>\<!\[CDATA\[#savebar-container-scaffold {  
position: fixed;  
width: 100%;  
bottom:0px;  
}  
table {   
width:95%   
}   
td.col1 {  
vertical-align:middle;  
text-align: right;  
padding: 4px;  
spacing: 4px; }   
td.col2 {   
vertical-align: middle;  
padding: 4px;  
spacing: 4px;  
}  

<br />

.wiki-content a:link {  
color:blue;  
}\]\]\>\</ac:plain-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="section"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="column"\>  
\<ac:parameter ac:name="width"\>20%\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="include"\>  
\<ac:default-parameter\>Navigation_JPCB\</ac:default-parameter\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="column"\>  
\<ac:parameter ac:name="width"\>80%\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="table"\>  
\<ac:parameter ac:name="border"\>5\</ac:parameter\>  
\<ac:parameter ac:name="bgcolor"\>#F8F7EF\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="width"\>250px\</ac:parameter\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>JPCB Action Item Title:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="report-info"\>  
\<ac:parameter ac:name="1"\>@self\</ac:parameter\>  
\<ac:default-parameter\>page:title\</ac:default-parameter\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Assigned Date:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="date-data"\>  
\<ac:parameter ac:name="maxDate"\>+5y\</ac:parameter\>  
\<ac:parameter ac:name="name"\>AssignedDate\</ac:parameter\>  
\<ac:parameter ac:name="minDate"\>-2y\</ac:parameter\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:plain-text-body\>\<!\[CDATA\[ \]\]\>\</ac:plain-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:default-parameter\>data:AssignedDate\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Action:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="text-data"\>  
\<ac:parameter ac:name="content"\>wiki\</ac:parameter\>  
\<ac:parameter ac:name="height"\>150px\</ac:parameter\>  
\<ac:parameter ac:name="width"\>800px\</ac:parameter\>  
\<ac:parameter ac:name="name"\>Action\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="type"\>area\</ac:parameter\>  
\<ac:rich-text-body\> \</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:default-parameter\>data:Action\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Actionee:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="text-data"\>  
\<ac:parameter ac:name="content"\>wiki\</ac:parameter\>  
\<ac:parameter ac:name="name"\>Actionee\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="type"\>line\</ac:parameter\>  
\<ac:rich-text-body\> \</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:default-parameter\>data:Actionee\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Due Date:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="date-data"\>  
\<ac:parameter ac:name="maxDate"\>+5y\</ac:parameter\>  
\<ac:parameter ac:name="name"\>DueDate\</ac:parameter\>  
\<ac:parameter ac:name="minDate"\>-2y\</ac:parameter\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:plain-text-body\>\<!\[CDATA\[ \]\]\>\</ac:plain-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:default-parameter\>data:DueDate\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>How was action closed?\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="text-data"\>  
\<ac:parameter ac:name="content"\>wiki\</ac:parameter\>  
\<ac:parameter ac:name="height"\>150px\</ac:parameter\>  
\<ac:parameter ac:name="width"\>800px\</ac:parameter\>  
\<ac:parameter ac:name="name"\>Evidence\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="type"\>area\</ac:parameter\>  
\<ac:rich-text-body\> \</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:default-parameter\>data:Evidence\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Comments:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="text-data"\>  
\<ac:parameter ac:name="content"\>wiki\</ac:parameter\>  
\<ac:parameter ac:name="height"\>150px\</ac:parameter\>  
\<ac:parameter ac:name="width"\>800px\</ac:parameter\>  
\<ac:parameter ac:name="name"\>Comments\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="type"\>area\</ac:parameter\>  
\<ac:rich-text-body\> \</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:default-parameter\>data:Comments\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Close Date:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="show-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="date-data"\>  
\<ac:parameter ac:name="maxDate"\>+5y\</ac:parameter\>  
\<ac:parameter ac:name="name"\>CloseDate\</ac:parameter\>  
\<ac:parameter ac:name="minDate"\>-2y\</ac:parameter\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:plain-text-body\>\<!\[CDATA\[ \]\]\>\</ac:plain-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="hide-if"\>  
\<ac:parameter ac:name="spacePermission"/\>  
\<ac:parameter ac:name="atlassian-macro-output-type"\>INLINE\</ac:parameter\>  
\<ac:parameter ac:name="group"\>OrionPPC-Meeting Support,OrionPPC-Orion Admins\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<ac:macro ac:name="report-info"\>  
\<ac:parameter ac:name="format"\>MM-dd-yyyy\</ac:parameter\>  
\<ac:default-parameter\>data:CloseDate\</ac:default-parameter\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</p\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="tr"\>  
\<ac:rich-text-body\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col1\</ac:parameter\>  
\<ac:rich-text-body\>  
\<strong\>Attachments:\</strong\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\<ac:macro ac:name="td"\>  
\<ac:parameter ac:name="class"\>col2\</ac:parameter\>  
\<ac:rich-text-body\>  
\<p\>  
\<strong\>Please save page first, then click on Browse to attach.\</strong\>  
\</p\>  
\<ac:macro ac:name="attachments"\>  
\<ac:parameter ac:name="sortby"\>name\</ac:parameter\>  
\<ac:parameter ac:name="sortorder"\>ascending\</ac:parameter\>  
\<ac:parameter ac:name="upload"\>true\</ac:parameter\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  
\</ac:rich-text-body\>  
\</ac:macro\>  

\</code\>


Answers:
author: Matthew J. Horn
body: The dark arts of CSS: I typically use Google Chrome to highlight the target class; that usually tells me what class to specify in the CSS. Sometimes, you need to accomodate nested or serially-defined classes to get a style to apply to it. Can you chop down your example to something smaller or provide a simple use case so it can be easily tried/tested?

comments: author: Kathryn Moye
body: Excellent point, thank you for pointing out my oversight. If I look in Firebug, the td has the class I assigned and then there is a paragraph tag.

Source:

\<td class="col2"\>  
\<p\> text text text \</p\>

CSS:

td.col2 { padding: 4px; }

However, there is the sneaky CSS:

.wiki-content p, .wiki-content table { padding: 0; }

GRRR...who would ever want padding=0!!! Thanks a bunch for your help.


author: Kathryn Moye
body: That was my answer, thank you. I added .wiki-content p { padding: 4; } to my CSS and the spacing was finally correct. The formatting applied by p was overidding my CSS for td. This is another indication of Confluence adding p tags everywhere but I'm learning how to get around them.


author: Steffen Heller
body: So, what does it mean? Will you simply remove the superfluous \<p\> and that is it or are you still looking for some other kind of answer?


Tags: confluence-administration