My CSS for padding and spacing seem to be ignored in the col2 class. col1 is working fine. Thanks 20% Navigation_JPCB 80% 5 #F8F7EF 250px col1 JPCB Action Item Title: col2 @self page:title col1 Assigned Date: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins +5y AssignedDate -2y MM-dd-yyyy INLINE INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins MM-dd-yyyy data:AssignedDate col1 Action: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins wiki 150px 800px Action INLINE area INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins data:Action col1 Actionee: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins wiki Actionee INLINE line INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins data:Actionee col1 Due Date: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins +5y DueDate -2y MM-dd-yyyy INLINE INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins MM-dd-yyyy data:DueDate col1 How was action closed? col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins wiki 150px 800px Evidence INLINE area INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins data:Evidence col1 Comments: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins wiki 150px 800px Comments INLINE area INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins data:Comments col1 Close Date: col2 INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins +5y CloseDate -2y MM-dd-yyyy INLINE INLINE OrionPPC-Meeting Support,OrionPPC-Orion Admins MM-dd-yyyy data:CloseDate col1 Attachments: col2 Please save page first, then click on Browse to attach. name ascending true

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSS for padding and spacing are not working for one class but working for the other

Kathryn Moye_vso5k6

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;
}

.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>
JPCB Action Item Title:
</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>
Assigned Date:
</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="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>

<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>

</ac:rich-text-body>
</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>
Action:
</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="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>

<ac:macro ac:name="report-info">
<ac:default-parameter>data:Action</ac:default-parameter>
</ac:macro>

</ac:rich-text-body>
</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>
Actionee:
</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="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>

<ac:macro ac:name="report-info">
<ac:default-parameter>data:Actionee</ac:default-parameter>
</ac:macro>

</ac:rich-text-body>
</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>
Due Date:
</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="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>

<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>

</ac:rich-text-body>
</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>
How was action closed?
</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="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>

<ac:macro ac:name="report-info">
<ac:default-parameter>data:Evidence</ac:default-parameter>
</ac:macro>

</ac:rich-text-body>
</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>
Comments:
</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="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>

<ac:macro ac:name="report-info">
<ac:default-parameter>data:Comments</ac:default-parameter>
</ac:macro>

</ac:rich-text-body>
</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>
Close Date:
</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="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>

<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>

</ac:rich-text-body>
</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>
Attachments:
</ac:rich-text-body>
</ac:macro>
<ac:macro ac:name="td">
<ac:parameter ac:name="class">col2</ac:parameter>
<ac:rich-text-body>

Please save page first, then click on Browse to attach.

<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>

Accepted answers

Matthew J. Horn

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?

All comments

Matthew J. Horn

Kathryn Moye_vso5k6

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">
 text text text

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.

Steffen Heller

So, what does it mean? Will you simply remove the superfluous and that is it or are you still looking for some other kind of answer?

Kathryn Moye_vso5k6

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.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-administration