Go to jimgwilliams.com, and select spiritual topics, and tell me what’ s up with the lettering in front of “Jesus Christ, Superstar” as well as after, and how to get rid of it? Admittedly, I have only been on the site recently to add this topic, and it turned out weird. I added the page as a txt file, and ended up with this. How do I fix it? Thanks!
The page lacks an encoding set, that’s why the funky letters. 
On the home page you have the correct encoding, just copy that to the faulty page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
2 Likes
Yep, that fixed it! Thanks!
Your doctype is missing an exclamation mark!
<!DOCTYPE html>
2 Likes
Whenever you return, you might note of the malformed <!doctype html> on the spiritual page that was shown my @Erik_J and @Gandalf. The exclamation is part of the <!doctype ... > element. Without the exclamation mark, the page has no doctype. That little detail matters for cross-browser consistency.
I would also like to recommend that you check the “about me” page with the HTML validator (as we’ve recommended in the past).
https://validator.w3.org/nu/?doc=http%3A%2F%2Fjimgwilliams.com%2F
The following outdated screen shot still shows the same errors.
Finally, one more item that everyone who visits your site will notice.
Compared to the aspect ratio of the image on your User Card (left), your image on the “About Me” page (right) is squeezed narrower than it’s proper aspect ratio. Makes you look a bit narrow minded. 
That can easily be fixed… you’ve been shown several methods of fixing it in the past. The easiest method would be to crop the image so the width and height are equal. As it is now, the width of the original image is 1124px and the height is 980px. You don’t seem to need it to be any larger than 200x200 or 400x400 for retina screens… I’m not going to repeat any of the other methods now, but if you need help cleaning up the image or any of the validation errors, you know where to find us.
2 Likes
Truth be known as to picture, the dimensions in the code are 220 x 220. I lowered it to 200 x 200, so the irregular aspect ratio is from the browser, maybe? Its square in the HTML.
But, thanks for your input. I do want to have another try at the vaidator. What is the address, please?
Thanks for your input! I have made the suggested changes, as you mentioned. Not being a developer, I have not spent a lot of time working on code. Just needed a site up that I could use for work.
Thanks again for all your help, though. Jim
@ronpat supplied the link in his last post…
https://validator.w3.org/nu/?doc=http%3A%2F%2Fjimgwilliams.com%2F
1 Like
The intrinsic dimension for the image is 1124px x 980px, scaled down to a 220px x 220px square in the img tag, which distorts the image as @ronpat said. He posted both the original image and a screenshot of the distorted display of the image for comparing.
Then there are some typos in the html:
<p>
<a><img class="me"src="me2.jpg" width="220px" height="220px alt="me2"</p>
Corrected html with complete img tag and anchor’s end tag:
<p>
<a><img class="me" src="me2.jpg" width="220px" height="220px alt="me2" ></a>
</p>
2 Likes
When you declare the width and height attributes in the HTML, you only need to use numbers; the pixel unit is understood.
<p>
<a><img class="me" src="me2.jpg" width="220" height="220" alt="me2" ></a>
</p>
Changing the dimensions of an image in the code like this simply takes the original, large image and “squashes” it to fit in the given dimensions. Changing the dimensions from rectangular to square won’t crop the image to make it square; it will squeeze it more in one direction than the other to make it fit the alloted space, resulting in the distortion you see here.
If you want that image to fit in a space not exceeding 220px, then you need to scale it correctly:
<p>
<a><img class="me" src="me2.jpg" width="220" height="191" alt="me2" ></a>
</p>
As I’m sure we’ve explained previously, it’s better to resize the image to the required dimensions before you upload it, to save the browser having to load a much larger file than required.
4 Likes
I knew I’d miss something! 
Lucky browsers are such AI nowadays and interpret code as intended. 
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.