li font size affected by "make paragraph item"

Doug Eaton · Post by **Doug Eaton** » Mon Oct 27, 2008 7:06 am

If <li>=1em and =1em, why would step 1 appear to use a smaller font (in WebHelp output) than step 2 when step 2 has an added paragraph attached to it (List Actions>Make Paragraph Item)?

This is happening in a dropdown that is in a snippet.

Post by **LTinker68** » Mon Oct 27, 2008 8:08 am

If it were just a inside a <li> then it wouldn't be doing it since they're both at 1em, but you mentioned a dropdown -- the dropdown tag has its own font size. Make sure it's also set to 1em and that whatever text is in the snippet is also set to 1em.

Post by **doc_guy** » Mon Oct 27, 2008 10:25 am

If you have Firefox, you should look at your webhelp using the WebDeveloper toolbar. It lets you see the exact hierarchy of nesting, and lets you edit your CSS in place (with live updates), so you can see exactly what you need to edit in order to get the page to render like you want.

In terms of this specific problem, you can create a custom complex selector in your CSS sheet to address this specific issue. Just figure out what the hierarchy of nesting is, then create a complex selector to handle that situation. I can't really get more specific than that without knowing exactly how your topic is structured.

Doug Eaton · Post by **Doug Eaton** » Mon Oct 27, 2008 10:35 am

Thanks for your willingness to help out. Here's an example--not in a snippet or a dropdown--of how font size has been affected by the "make paragraph" action.

Webhelp looks like this:

largetype_stepwithparagraph.png

The content in the authoring pane looks like this:

largetype_stepwithparagraph_authoring.png

My styles follow:
p
{
font-size: 1em;
margin-bottom: 1em;
margin-top: 1em;
}
li
{
font-size: inherit;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

recently created complex selector: td p
{
line-height: 1em;
font-size: 1em;
margin-bottom: 1em;
margin-top: 1em;
}

Post by **LTinker68** » Mon Oct 27, 2008 11:58 am

Doug Eaton wrote: li
{
font-size: inherit;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

This could be your problem. Your <li> tag isn't set to 1em -- it's set to whatever value its parent tag is set to, which would be either the <ol> or <ul> tag. So in your example, the <li> will behave differently than the <li> by itself will, because the tag is expressly set to 1em, so it's overriding the inherit properties of the <li> tag. You need to either set your ol/ul tags to 1em or expressly set the <li> tag to 1em.

Doug Eaton · Post by **Doug Eaton** » Thu Oct 30, 2008 2:28 pm

Thanks, Lisa. I changed both ol and ul to 1em as you recommended, but step 2 was unaffected (i.e., noticeably larger than other steps in the generated webhelp). The only distinction between this step and the others appears to be that I've used the "Make paragraph item" list action.

Post by **LTinker68** » Thu Oct 30, 2008 3:06 pm

Can you copy-and-paste the list code from the page source? That is, open the topic in the Internal Text Editor and copy-and-paste the first few lines of the list? At least from numbers 1 through 3.

Doug Eaton · Post by **Doug Eaton** » Fri Oct 31, 2008 11:47 am

I've experimented with values in the CSS, and it is getting a lot closer. But I would appreciate any guidance on this--mainly I am guessing. I still see a difference in font sizes between steps 1 and 2.

Here are a sample topic and relevant element values.

Here's the topic code:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="4" MadCap:lastHeight="673" MadCap:lastWidth="1135">
    <head>
    </head>
    <body>
        <h1>
            <MadCap:keyword term="System:Removing a" />Removing  a System from a Site</h1>
        <p class="note">Caution: Removing a system permanently deletes it and its supporting information, including its subsystems, from that site.</p>
        <p>Remove a system from a site as follows:</p>
        <ol>
            <li>Open the <a href="../Reference/ToolIcons/ControlIcon.htm" target="_popup" title="Control tool icon" alt="Control tool icon">Control</a> tool.</li>
            <li>
                <p>Select the system to be removed. </p>
                <p>If the system identifier is not listed, click <b>Expand All</b>. Then select the system. The System Control page opens.</p>
            </li>
            <li>
                <p>Click <b>Remove System</b>. </p>
                <p>
                    <img src="../Resources/Images/sw_ccms_6-3_systemcontrol_removesystem_6inch_co.png" alt="Remove System link" />
                </p>
            </li>
            <li>Click <b>Yes</b> to confirm the system deletion.</li>
        </ol>
        <p> </p>
    </body>
</html>

Here's the CSS font info:
body
{
font-family: verdana, arial, sans-serif;
font-size: 1em;
}

p
{
font-size: .75em;
margin-bottom: 1em;
margin-top: 1em;
}

ol
{
list-style-type: decimal;
font-size: .75;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

ul
{
list-style-type: square;
font-size: .75;
}

li
{
font-size: inherit;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

Post by **LTinker68** » Fri Oct 31, 2008 1:17 pm

First, on the ol and ul styles, you need to add the unit of measure. Right now you just have .75 -- it needs to be .75ems.

Second, change the li style to the following and add the complex selector that specifies how a is supposed to act when it's inside a <li> tag. You'll have to add that to the stylesheet file manually because there's not a way (still) to create complex selectors through the Stylesheet GUI.

Code: Select all

li
{
font-size: 1.0em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}

li p
{
font-size:1.0em;
}

Doug Eaton · Post by **Doug Eaton** » Mon Nov 03, 2008 7:40 am

Thanks for catching my typo, Lisa. I added "em." I'm still working out the inheritance issue in font sizes inside lists, however. Specifically, if I've defined ol and ul as. .75 em, and if I want every level within my lists to use the same font size, wouldn't everything just use "font-size: inherit"?

Thank you for recommending that I create an li p complex selector. I am getting closer with each attempt, but the indented items are now somewhat smaller than the first-order steps, and everything looks better than it did with the 1em "large print edition" look.

Post by **LTinker68** » Mon Nov 03, 2008 9:09 am

The reason is because of the Cascading part of Cascading Stylesheets. By default, the more levels into the CSS you go, the smaller the font size. For instance, in print, heading 1 is generally bigger than heading 2 which is bigger than heading 3 which is bigger than the body text. It's the same way by default in browsers. If you don't specify font sizes, then h1 will be bigger than h2 which will be bigger than h3 which will be bigger than the standard tag. Or maybe h3 will be the same size as the paragraph tag -- I don't know what the default sizes are.

Things are a bit trickier with relative sizes, depending on the values you set. If you have the <ol> tag set to .8ems and set the <li> tag to be .8ems, it doesn't mean that the list tag will be the same size as the ol tag even though they appear to be set to the same value. It means that the list item will be .8 times (or 80%) the size of its parent tag, which was .8ems, so the actual size of the list item is .80 x .80ems = .64ems. If you have the <ol> tag set to .75ems and the list item set to inherit, then it's not going to set the list tag to .75ems -- it's going to set it to the default proportioned size, which would result in an actual size of .65ems or .60ems. Again, I don't know what the default values are.

MadCap Software Forums

li font size affected by "make paragraph item"

li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"

Re: li font size affected by "make paragraph item"