A

Anonymous

Answered

Smaller font when list is created

Forum|Forum|9 years ago
March 21, 2017
2 replies
924 views

When I create my document in Dreamweaver CS6, my text is all in the same class. But anytime I have a bulleted, numbered or lettered list, the font appears much smaller once posted live onto the site. I have to go back to my DW file and re-add the class it was already on in order for it to capture the right font size. Does anyone know how this can permanently be fixed so that I don't have to keep re-classing my lists? See image below:

Please note, I am an amateur when it comes to Dreamweaver. I only know the basics in order to do my job. So, if you have feedback, remember to explain it in a simpler way for me. Thank you very much!

Learn Dreamweaver

This topic has been closed for replies.

Correct answer Nancy OShea

Hi Nancy,

We have version 11.
Zoom is set at normal 100% scale.
And yes, compatibility mode was checked! When unchecking the box for compatibility mode, it did indeed make fonts the correct size! It also, however, changed the overall appearance of our whole site which I don't believe the higher-ups would be happy with.

Unfortunately I cant tell our 500+ agents to update their compatibility mode....But after yours and Jon's answers, I believe there has to be a coding issue with my company's platform in not reading our doccss sheet correctly. My BT department is currently researching. Hopefully between the guidance you and Jon provided, and BT checking on their end, that there will be a solve over all.

Thanks again so much for your help! I will let my BT team know about the compatibility mode so they can understand that piece as well.

Compatibility Mode is like a dumbed-down version of legacy IE7. Given that IE7 is now end-of-life, it cannot support advanced CSS properties or other web technologies that are commonly used today.

If switching compatibility mode off creates an unusable document, then code errors are likely at play but just what those are is anybody's guess. It might be something simple like a missing curly brace }, semicolon ; or vendor-prefix for MS browsers in the CSS code. HTML errors can also lead to browser rendering problems.

Check your code. Copy & paste your code into the online validation services for HTML and CSS to see what's being reported.

HTML - http://validator.w3.org/
CSS - http://jigsaw.w3.org/css-validator/

Nancy

Nancy OShea

Community Expert

Browser's have their own default styles for text. Lists are often smaller than normal paragraphs or headings to set them apart. If you wish to override the browser default styles, use CSS code. It's quite possible you already have a CSS file that contains list styles. Open your stylesheet in code view and examine it for ul, ol & li selectors.

See link for details: CSS Styling Lists

Nancy

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

We would need to see your code in order to tell you exactly why this is happening.

The simplest way for us to see your code would be to post a link to your work in progress on a server you have access to so we can examine what you have.

Avery distant second would be to paste your entire html code, including any external stylesheets, into a forum response. Don't use email to do that, the code won't come through.

A

Anonymous

I apologize for the very late response. My job can be quite limiting in the time I can take to work on different things.

I wish I could post a link to my document, however, it is a company intranet site and I am not allowed to share those types of links. My only choice is to copy/paste my code for you to see. I will also copy/paste the external stylesheet we use as well, along with another screen shot of small font issues.

CODE:

<table width="100%" border="0">
<tr valign="top">
    <td width="100%" height="587"><table width="100%" border="0">
        <tr>
          <td valign="top" colspan="2"> </td>
        </tr>
        <tr>
          <td colspan="2" class="DocSecTitle"><a name="2"></a>Procedure Section Two<a href="#scripting"></a></td>
        </tr>
        <tr>
          <td class="DocSectionBody" colspan="2" height="54"><table width="100%" border="1">
            <tr class="ProcMatrxTop">
              <td width="5%" align="center" valign="top">Step</td>
              <td width="95%" align="left" valign="top">Action</td>
            </tr>
            <tr>
              <td align="center" valign="top" class="ProcMatrxBody">1</td>
              <td align="left" valign="top" class="ProcMatrxBody">This is a sample of a table. </td>
            </tr>
            <tr>
              <td align="center" valign="top" class="ProcMatrxBody">2</td>
              <td align="left" valign="top" class="ProcMatrxBody"><p>This step will have some bullets</p>
                <ul>
                  <li>i apologize for my lack of creativity when providing my examples.</li>
                  <li>I just want this fixed.</li>
                  <li>It would save so much time. </li>
                </ul></td>
            </tr>
            <tr>
              <td align="center" valign="top" class="ProcMatrxBody">3</td>
              <td align="left" valign="top" class="ProcMatrxBody"><p>This step will have a list.</p>
                <ol type="a">
                  <li>Example of yet again, more small font.</li>
                  <li>I have to manually assign the same class (for the second time) to get the font the size it should have already been.</li>
                  <li>So confusing.</li>
                  <li>Help.<br>
                  </li>
                </ol></td>
            </tr>
            <tr>
              <td align="center" valign="top" class="ProcMatrxBody">4</td>
              <td align="left" valign="top" class="ProcMatrxBody"><p>Here is an example with a line item:</p>
                <p><strong>This line tends to become smaller font as well.</strong></p>
                <ul>
                  <li>And of course, the bullets.</li>
                  <li>Small font. </li>
                  </ul>
                <p><strong>And this bold line...</strong></p>
                <ul>
                  <li>with more small font. </li>
                  <li>I hope someone can help!</li>
                  <li>Thanks for looking into it!</li>
                </ul></td>
            </tr>
          </table>
            <p class="DocSectionBody"> </p>
            <blockquote>
              <blockquote> </blockquote>
            </blockquote></td>
        </tr>
        <tr>
          <td class="DocReturnToTop"><a href="#top">Return to top</a></td>
        </tr>
      </table>
    <p class="ProcMatrxEmph"> </p></td>
</tr>
</table>
</body>
</html>

STYLESHEET (doccss): Please note, the items specified with size 12px font are the items having the issue. All the others (size 10, 14 and 18) appear correctly.

.DocTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #0066CC;
}

.DocSecTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
height: 25px;background-color: #0066CC;
}

.DocContentTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
height: 20px;background-color: #0066CC;
border: #0066CC;
border-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

.DocContentBody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}

.DocContentTable {
border: thin solid #0066CC;
}

.DocSectionBody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
vertical-align: top;
}

.DocSectionBodyTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}

.DocSectionBodyTitleUndr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}

.DocReturnToTop {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: right;
background-position: right;
}

.DocDocument {
background-color: #0066CC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}

.ProcDocContentTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FF9933;
border: none;
height: 25px;font-size: 14px;
line-height: normal;
font-weight: bold;
color: #000000;
}

.ProcMatrxTop {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #999999;
color: #000000;
}

.ProcMatrxBody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
background-color: #CCCCCC;
color: #000000;
}

.ProcMatrxScrpt {
font-family: "Courier New", Courier, mono;
font-size: 12px;
font-weight: normal;
}

.ProcMatrxEmph {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
}

.DocRevisionTop {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #999999;
vertical-align: top;
text-align: center;
color: #000000;
}

.DocRevisionBody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #CCCCCC;
vertical-align: top;
text-align: center;
}

.DocRevisionText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #CCCCCC;
vertical-align: top;
text-align: left;
list-style-type: circle;
color: #000000;
}

.Highlight-span {
background-color: #FFFF00;
}

ul,ol {
margin-left:20px;
}
.DocSectionBody ul li ul li {
color: #000;

SCREENSHOT OF HOW THE CODE LOOKS WHEN POSTED:

Jon Fritz

Community Expert

I'm not having the same effect with the code you've given in CC2015 or any of my browsers when I copy/paste your html and integrate the css.

Is the posted CSS absolutely everything from inside the doccss.css file?

Which browser is showing the smaller font?

You could add an element selector that covers all line items in any list, then set the size to whatever you want, something like this at the end of your .css file...

li {

font-size:12px;

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded