Highlighted

Font Not Behaving

Contributor ,
Nov 14, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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/

TOPICS
Code

Views

433

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Font Not Behaving

Contributor ,
Nov 14, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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/

TOPICS
Code

Views

434

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 14, 2019 0
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2019 1
Contributor ,
Nov 14, 2019

Copy link to clipboard

Copied

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.pngScreen Shot 2019-11-14 at 12.08.23 PM.pngScreen Shot 2019-11-14 at 12.08.52 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2019 0
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2019 1
Adobe Community Professional ,
Nov 15, 2019

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0
Contributor ,
Nov 15, 2019

Copy link to clipboard

Copied

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
 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0
Adobe Community Professional ,
Nov 15, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 1
Contributor ,
Nov 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0
Adobe Community Professional ,
Nov 15, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 2
Adobe Community Professional ,
Nov 15, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 1
Contributor ,
Nov 16, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2019 0
Adobe Community Professional ,
Nov 16, 2019

Copy link to clipboard

Copied

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

  1. External stylesheets are  preferred for sitewide styles.
  2. Embedded stylesheets inside the document's <head> tag are for document specific styles.  Embedded styles take priority over external styles. 
  3. 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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2019 0
Contributor ,
Nov 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2019 0
Adobe Community Professional ,
Nov 17, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2019 0