Font Not Behaving

Report · Nov 14, 2019

I write stories and post them on my website. To avoid any formatting being brought over from my WP app Pages, I copy and paste the text into plain TextEdit then copy and paste into DW. The text defaults to stylestory from my sytlesheet. I have another font defined by stylechapter with the text-align set at center.

Sometimes when I highlight say Chapter One and select the stylechapter it aligns left and that is caused by the preceeding style.

The code looks like this:

<p class="stylestory"><span class="stylechapter">Chapter One</span></p>

If I remove <p class="stylestory"> then the font aligns correctly at center. Its a RPITA to go ahead and remove the preceeding font code for all the instances of Chapter. The same happens with the font styleasterisk.

Any idea why DW is doing this?

Thanks

Alan

Report · Nov 14, 2019

Could you post a link to your site so the contributors here can take a look?

Chances are good it's a combination of both the way the code is written, and the process you're using to update, that are causing your issue. I'm guessing your styles may be applied to elements that are accidentally being replaced when you paste into your pages, but it's hard to say without seeing exactly what's going on.

Report · Nov 14, 2019

Jon

The code is generated by DW. To me it's a simple fact is that the style of the font is being taken from stylestory because it displays fine, but the alignment is being taken from the default stylestory that stylechapter is supposed to overwrite. Is it normal for the overwritten code to remail in the code string? Linking to my website won't help because the code is no different to what I see in DW. The issue is that DW is somehow retaining the alignment from the overwrittne font style. I should add that this isnt always the case. Look at the screen shots. The first is the code, the second is Design View and the third is Live View but it's not what is displayed on the webpage - the Design View is what's displayed.

Alan

Screen Shot 2019-11-14 at 12.09.29 PM.png

Report · Nov 14, 2019

What's with the <spam> tags? You don't need them you know. Also headings should use H tags, not P tags.

<p class="stylestory"><span class="stylechapter">Chapter One</span></p>

Change it to this

<h3 class="stylestory stylechapter">Chapter One</h3>

or this

<h3 class="stylechapter">Chapter One</h3>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 15, 2019

Nancy

That code <span class="stylechapter"> is generated by DW. I highlight the text 'Chapter One' and select stylechapter from the CSS dropdown list. Yes, I tried the code <h3 class="stylechapter">Chapter One</h3> buy don't know how format it. I have this code in my CSS:

Heading h1 {

font-family: "quicksand", sans-serif;

font-size: 18px;

color: #983200;

text-align: center;

font-weight: 400;

letter-spacing: 5px;

font-style: normal;

}

but when I highlight Chapter One and select Heading 1 from the dropdown list under Format, the font defaulats to this Chapter One instead of the font specified in my CSS.

Thanks

Alan

Jon

The HTML document is a template and all my stories use the same format and Im not having the alignment issue in others. When I highlight the text and select the CSS style, it aligns center as it's supposed to. Here are the errors after running the document throught the checker and I've no idea what to make of it. No errors in my CSS.

Thanks

Alan

Screen Shot 2019-11-15 at 1.34.57 PM.png

Report · Nov 15, 2019

I see a selector naming problem. Heading is neither a class prefixed by a dot nor an ID prefixed by a #. So delete it.

~~Heading~~ h1 {
font-family: "quicksand", sans-serif;
font-size: 18px;
color: #983200;
text-align: center;
font-weight: 400;
letter-spacing: 5px;
font-style: normal;
}

<h1>Chatpter One</h1>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 15, 2019

Nancy

I tried that but I don't see where to apply that font style to text in the body of the document. As I mentioned, if I highlight the text and select Heading 1 from the list under HTML Format, it doesn't format it per my CSS.

Thanks

Alan

Report · Nov 15, 2019

1. You need to add a doctype declaration as the 1st line in your code. <!doctype html> is HTML5's doctype declaration

2. There's got to be a better font link than that one, but I don't really use Google fonts anymore, so I'm not sure what you need to do to fix that. It's basically saying the pipe character is an invalid one (which it generally is) but I'm betting it works fine once the other errors are cleaned up

3 and 4. You've accidentally moved your document's <title> tagset into the <body> from the <head> section where it belongs. Move it back to the <head> section

5. Because of that error, the validator essentially gives up and stops. Once #3-4 is fixed, and the validator is run again, I would be willing to bet there other structural errors in your page that could be causing the display problem.

Report · Nov 15, 2019

This code work as expected. Copy & paste it into a new, blank document to test.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unique Page Title</title>
<style>
h1 {
font-family: "quicksand", sans-serif;
font-size: 18px;
color: #983200;
text-align: center;
font-weight: 400;
letter-spacing: 5px;
font-style: normal;
}
</style>
</head>
<body>
<h1>Chapter One</h1>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 16, 2019

Thanks Nancy. So the style for h1 (or h2 etc.) has to go in the head of the document? I thougjht it had to go in the stylesheet which is where mine is so ir can be used by all docunents. So do I need to move all my main text styles to the head of my template and give them an 'h' designation so I can use them for stories that I publish using my template or is there a way to link them to my stylesheet?

Again, thanks for your help.

Alan

Report · Nov 16, 2019

CSS styles can go in any of 3 places depending on what you need

External stylesheets are preferred for sitewide styles.
Embedded stylesheets inside the document's <head> tag are for document specific styles. Embedded styles take priority over external styles.
Inline styles inside the HTML markup are mainly used in e-mails, not websites. Inline styles take priority over embedded and external stylesheets.

For expediency in this forum, i use embedded CSS styles so everyone can see them. You may move the code to your external stylesheet.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 17, 2019

Thanks for that explanation Nancy. If I put my sytles in my stylesheet, how do I reference them in the document? For instance, for the h1 if I select Chapter One and select h1 from the HTML Format list, it doesn's use the h1 style in my style sheet but some default style - Arial, bold, 30px.

Alan

Report · Nov 17, 2019

This is basic coding knowledge.

https://www.w3schools.com/cssref/sel_class.asp

Change the h1 selector in your stylesheet to what you want it to be. Or, if you prefer, create a re-usable class name prefixed by a dot in your stylesheet.

HTML SELECTOR

h1 {

desired style rules here....

}

RE-USABLE CLASS NAME

.storychapter{

desired style rules here....

}

<h1>Chatper One</h1>

<h1 class="storychapter">Chapter One</h1>

Save changes and upload stylesheet to server.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 15, 2019

Yep, looks you have an issue in your code.

DW allows you to do things "the wrong way" maybe assuming there's going to be a script added at some point that takes care of the problem, who knows, but it allows for all sorts of "wrong" to happen within the interface.

That could be something simple like a missing ; or { in your CSS to a <table> tag in your <head> section and a whole lot more.

The point is, without seeing the code, we can only make guesses based on the very limited info we've been given.

Right now, I would guess you have an extra or missing <span> or </span> somewhere, possibly before the section you've provided screen captures of. Have you run your code through the validatros to fix any errors you might have...

HTML: https://validator.w3.org/nu/
CSS: https://jigsaw.w3.org/css-validator/

Adobe Community

Font Not Behaving

1 Correct answer