HiYa,

<h3></h3> text displays differently when viewed in "Preview" within CC HTML Editor than it does when viewed on the web. See the 2 attached png files.

Ideas???

Thanks for your time.
--
JamesKB

Do you have a link to the site so we can check the code?

No matter, I found a link. I checked out the code and your style sheet (default.css) defines h3 as an inherited style, though it is not utilised anywhere on the page, therefore it has no defining style to make it bold, big, small or otherwise.

Even 'normal' use of h3 in this case does not render the text as you would expect a heading 3 class to render because it is defined in the style sheet as something else; just what that something else is is the problem. If you open the style sheet in the editor and remove h3 from the top group of selectors, then it will render as a normal html h3 should, that is, biggish and bold, however, if you want to create your own formatted h3 text with something different than default h3, then add a selector to the style sheet, call it h3 and choose some properties for it. This will tell the text how to display. I know this all sounds complicated but I can't think of a simpler way to say it.

Here's an example of a selector that, if entered into your default.css style sheet, will render the standard text as bold (as long as the h3 is removed from the top block of styles as mentioned above).

h3 {
font-size: 11pt;
font-weight: bold;
font-family: Georgia, Times, serif;
color: #000000;
text-align: left;
}

I would go even further and not use h3 at all as it is a reserved selector but instead make my own selector/class and call it something like boldtext.

.boldtext {
font-size: 11pt;
font-weight: bold;
font-family: Georgia, Times, "Times New Roman", serif;
color: #000000;
text-align: left;
}

Then all you have to do is change the page code from:

<h3>Website Mission</h3>

to

<div class="boldtext">Website Mission</div>

for it to show how you defined it.

The again, I might be barking up the wrong tree....

The other thing that could be different would be that the program uses IE as it's base Preview system and if you're viewing it in Firefox or another browser that could also account for differences in how it's seen.

Thanks Dave,

I'll give your solution a shot. It should do the trick. I think I'm going with your boldtext method.

FYI - The h3 text renders not bold on the web using either IE, FireFox and/or Chrome.

Have a good day.
--
James

That's how it should appear, because you are using the style reset at the start of your style sheet. I have no idea why the preview rendering was ignoring this styling.

You should switch back to using h3 so your code is semantic. Then just change the selector for the rule at the end of your style sheet from .myh3 back to h3. You were actually using it correctly to begin with because these are headers you are styling, and headers have a different meaning for screen readers and search engines than divs.