Page-Level Style for Space After Element

Evetsm · Post by **Evetsm** » Wed Aug 05, 2015 1:36 pm

I know page-level styles are not recommended, but I would like to try this approach for now. I want to increase space after elements that are subordinate to <td> elements, so in the <head> element of a topic I inserted this:

Code: Select all

<style>
    p td {margin-bottom: 5pt; }
</style>

However, it's not having any effect on the desired elements. As I understand it, page-level styles will override any styles in external stylesheets, so that's not the issue. I know that inline styles will override page-level styles so I checked and there are no inlines. The table I'm examining has a table class applied to it -- a table stylesheeet, but as far as I know, table stylesheets don't define margins for elements, correct?

Any insight is appreciated. If necessary I can send the topic and related stylesheets.

Thanks

Paulie · Post by **Paulie** » Wed Aug 05, 2015 1:54 pm

Hi there,

From your description, it sounds like you want to apply this style to all elements inside <td> elements. If this is the case then you will need to swap the order of your CSS declaration, as it will currently apply to <td> elements inside elements instead:

Code: Select all

<style>
    td  p {margin-bottom: 5pt; }
</style>

Take a look here for more information and examples of the selectors in use:
http://www.w3schools.com/cssref/css_selectors.asp

Evetsm · Post by **Evetsm** » Wed Aug 05, 2015 2:11 pm

Paulie,
Thanks.
That did not work. Here is part of a table with elements inside <td> elements

Code: Select all

 
        <table style="width: *;mc-table-style: url('../../Resources/TableStyles/parameters_tablestyle.css');" class="TableStyle-parameters_tablestyle" cellspacing="0">
            <col class="TableStyle-parameters_tablestyle-Column-Column1" style="width: 69px;" />
            <col class="TableStyle-parameters_tablestyle-Column-Column1" style="width: 801px;" />
            <tbody>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1" MadCap:pattern="4" style="background-color: #d3d3d3;">
                        <p><b>Code</b>
                        </p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1" MadCap:pattern="4" style="background-color: #d3d3d3;">
                        <p><b>Description</b>
                        </p>
                    </td>
                </tr>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1">
                        <p>200</p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1">
                        <p>Success; value in the asdf header: 0 - success</p>
                    </td>
                </tr>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1">
                        <p>400</p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1">
                        <p>Bad Request; missing or invalid parameters; possible values in the asdfsadf header:</p>
                        <p>-3 - asdflakjsdflj</p>
                        <p>-8 - a;lsdjflasdfj</p>
                        <p>-51 a;sldkfjasdf</p>
                    </td>
                </tr>

I would expect to see spacing after the last three elements above, but no spacing appears in the output.
Do you see anything in the table that might be overriding the style I set? The TableStyle-parameters_tablestyle is the table style I was referring to in my first post.

Thanks!

Paulie · Post by **Paulie** » Wed Aug 05, 2015 3:03 pm

Is the formatting applied correctly if you open up your source topic directly in a web browser?

A slightly modified version of your above code works fine directly in IE:

Code: Select all

<html>
<head>
<style>
td  p {margin-bottom: 50pt; background: yellow; }
</style>
</head>
<body>
<table style="width: *;mc-table-style: url('../../Resources/TableStyles/parameters_tablestyle.css');" class="TableStyle-parameters_tablestyle" cellspacing="0">
            <col class="TableStyle-parameters_tablestyle-Column-Column1" style="width: 69px;" />
            <col class="TableStyle-parameters_tablestyle-Column-Column1" style="width: 801px;" />
            <tbody>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1" MadCap:pattern="4" style="background-color: #d3d3d3;">
                        <p><b>Code</b>
                        </p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1" MadCap:pattern="4" style="background-color: #d3d3d3;">
                        <p><b>Description</b>
                        </p>
                    </td>
                </tr>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1">
                        <p>200</p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1">
                        <p>Success; value in the asdf header: 0 - success</p>
                    </td>
                </tr>
                <tr class="TableStyle-parameters_tablestyle-Body-Body1">
                    <td class="TableStyle-parameters_tablestyle-BodyE-Column1-Body1">
                        <p>400</p>
                    </td>
                    <td class="TableStyle-parameters_tablestyle-BodyD-Column1-Body1">
                        <p>Bad Request; missing or invalid parameters; possible values in the asdfsadf header:</p>
                        <p>-3 - asdflakjsdflj</p>
                        <p>-8 - a;lsdjflasdfj</p>
                        <p>-51 a;sldkfjasdf</p>
                    </td>
                </tr>
				</table>
				<p> <p> Element outside table</p>
				<p>These elements are outside the table so do not have the background color or margin</p>
</body>

</html>

A couple of thoughts and questions:

What output are you producing? I assume that it is either WebHelp or HTML5. I have noticed that not all advanced CSS selectors work in the other output types.
Have you tried building your output? I have also noticed that the Flare WYSIWUG editor often ignores styles that are declared in the <head> section of a topic, however they display fine when the output is built.
Do you have any conflicting CSS in your MasterPage? This would also get added to the <head> element when the output is built, and could possibly override your margin settings (I'd say this is unlikely, but you never know).

It might be worth building an HTML output, then looking at what is in your <head> tag to see if that is what you expect.

Also, in Chrome, if you right click on one of your paragraphs and click Inspect Element a new frame will open that will show you how the CSS is being interpreted (including any styles that have been overridden by other CSS declarations). This is really useful for CSS troubleshooting and might help to point you in the right direction.

Evetsm · Post by **Evetsm** » Thu Aug 06, 2015 7:33 am

Paulie,

Thanks for the tips. I'm using both PDF and HTML output and I built them both. The spacing worked in the HTML but not the PDF, no doubt because I'm still a relatively new Flare user and some of the styling dependencies seem to be complex. If I stick with it I'm sure I'll learn.

I will also check out your other suggestions.

Thanks again for a thoughtful reply.

Steve

ChoccieMuffin · Post by **ChoccieMuffin** » Thu Aug 06, 2015 7:44 am

Evetsm wrote:...The spacing worked in the HTML but not the PDF...

Steve

I suspect MEDIUMS are causing the problem. Make sure that little amendment goes into your PRINT medium (or whatever your PDF generation uses) as well as your online medium.

MadCap Software Forums

Page-Level Style for Space After <p> Element

Page-Level Style for Space After <p> Element

Re: Page-Level Style for Space After <p> Element

Re: Page-Level Style for Space After <p> Element

Re: Page-Level Style for Space After <p> Element

Re: Page-Level Style for Space After <p> Element

Re: Page-Level Style for Space After <p> Element