• the “ms-rteCustom-ImageArea” style doesn’t apply to <img> tag, but wrapped by <span> with “ms-rteCustom-ImageArea” style;  

• there is no style apply to figure;

<span class="ms-rteCustom-YellowBorderBox">We have a program called <a href="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout">
        SSW LookOut! for Outlook</a> to check for this rule.
        <br />
        <br />
       <span class="ms-rteCustom-ImageArea">
            <img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid;
                border-right: 0px solid;" border="0" alt="Lookout Reply All BCC Warning" src="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout" />
            <br />
       </span><b>
            <br />
            Figure: SSW LookOut! for Outlook warns you if you accidentally 'Reply All' when
            you have been BCC'ed  </b> </span>
1.  Not sure how user inputs the  content into this page. Anyway, here is the right way to add content via Telerik Editor. Please read below example of how I redo this part in Telerik Editor without changing the code manually

Figure:Copy content in the notepad2. Delete the current content from Telerik for a new start;

3. Copy the first sentence from notepad and paste into Telerik Editor in the page; (please avoid copying straightly from web page and pasting them here, it will copy the all tags as well. it might affect the styles which can’t apply correctly )

Figure: Start copying content over4. Insert the image

Figure: Add a link to text5. Add an image

Figure: Inser an image6. Press “enter” key to start a new row, then copy the figure from notepad to the Telerik editor area

Figure: Add figure7. Apply image style to the image by click on the image, then choose a style from “Apply CSS Class” dropdown list

Figure: Apply style to the image

8. Apply style to the figure

Figure: Apply style to the figure9.Apply the yellow box

Figure: Apply yellow border box to the content10. Check in the changes, then you will have - "dada.."

Figure: Right style in use

Use the <dl class="className"></dl> tag to include an image in your page.

You then have this pretty pink flower with a green stem standing on a water pond. It is beautiful.

Figure: Bad Example

Figure: Good example - Add a picture or a screen capture to avoid a thousand words

Technical note for the figure (aka Caption)

Most developers (even WordPress) put the image and the caption in a DIV tag. The figure is just a paragraph.

<div>
<img alt=""/>
<p>Figure: Caption</p>
</div>

Instead, use a figure under the image, using a DL. A DL is a HTML tag that stands for ‘Definition List’. It contains a DT which is the item in the list – in our case an image. A DD (the description of the item). This structure gives the image and the figure, semantic meaning.

<dl>
<dt><img alt=""/></dt>
<dd>Figure: Caption</dd>
</dl>

Sometimes the first thing that comes to the developer mind is to use the "break line" tag (<br />) or the ASCII character code for "space" (&#160;) to create these extra spaces. It's wrong. CSS is the way to go. You can use both "margin" or "padding" CSS properties to get the result you want.

Tip: You might be not familiar with editing a CSS file. In this case, contact a designer. He/She will be more than happy to help you.

You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hash mark and the name you chose:

You can use this new URL to point users to that specific section of your page.

To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

Tip: Use CSS to define the font, size, and color of text.

These are some examples of common spelling mistakes that you can fix:

• thankyou -> thank you
• recieve -> receive
• paremeter -> parameter
• definate -> definite
• seperate -> separate