CODEWITHSUNDEEP
htmlencodingutf-8
Haru
Haru

Reputation: 1381

The character encoding of the HTML document was not declared...but it is

I keep getting the below error and I have no idea why. I've declared UTF-8!

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Here is my head section

<!DOCTYPE html>
<html ng-app lang="en">
<head>
<meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>CUalify - Let them know they qualify for membership</title>
</head>

I've tried several different ways of encoding but I keep getting this same issue the page renders blank.

Below is the extent of the entire index page. The site is cualify.org.

<!doctype html>
<html ng-app lang="en">
 <head>
    <meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>CUalify - Let them know they qualify for membership</title>
 </head>
<body>
<div class="header">
    <div class="wrapper">
    <img class="logo" src="images/logo.png"/>
    </div>
</div>
<main>
<div class="wrapper">
<p>Do visitors to your credit union website know if they qualify for membership without having to search and find the requirements?</p>
<b>Simplify!</b>
<p>We created a one click qualification based on the current location of the user. A user simply clicks one button on your credit union site and is alerted whether or not they qualify for membership based on their location within a county or township.</p>
<b>Our Method</b>
<p>We employ multiple methods of geolocation to track the most reliable location of the user. If the user lands outside of the membership area they are prompted to enter their city to double check whether they qualify.</p>
<b>Pro Credit Union</b>
<p>If a member does not qualify for your credit union they are given options of nearby credit unions in which they maybe eligible for membership. We don't want to lose them to a bank so we present other credit union options.</p>

<p id="demo"></p>
</div>
</main>
<div class="wrapper">
<h2>How it Works</h2>
<p>The first button a user will see will be the main <b>check by my current location</b> button. One click is all it takes to confirm if a user qualifies for the area.</p>
<img class="examples" src="images/blue.png"/><br/><br/>
<p>If the user does not qualify based on their location, we give them a chance to enter their city. We also try another method of geolocation and put that in the search field.</p>
<img style="width:600px;" src="images/yellow.png"/><br/><br/>
<p>If the user still falls outside the area to qualify for membership they see a last error message and shows them a list of credit unions nearby they may qualify for.</p>
<img style="width:600px;" src="images/red.png"/><br/><br/>
<p>If at anytime during the process the user qualifies based on their location, they will be shown this message.</p>
<img style="width:600px;" src="images/green.png"/><br/>

<hr/>

<h2>Create Your Script</h2>
<p>Fill in the information below and copy and paste the code anywhere in your website. Multiple entries can be seperated with a comma and no space.</p>

<div class="section">
    <label for="country">
        Country Code - <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements"><b>Find Your Code</b></a>
    </label>
  <input class="creator" type="text" name="country" ng-model="country" maxlength="2" placeholder="US (Optional Filter)"/>
</div>

<div class="section">
    <label for="aa">
        State Code - <a href="https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations#ANSI_standard_INCITS_38:2009"><b>Find Your Code</b></a>
    </label>
  <input class="creator" type="text" name="aa" ng-model="aa" maxlength="2" placeholder="IL (Optional Filter)"/>
</div>

<div class="section">
    <label for="county">
        Counties
    </label>
  <input class="creator" type="text" name="county" ng-model="county" placeholder="LaSalle County,Grundy County"/>
</div>

<div class="section">
    <label for="township">
        Townships
    </label>
  <input class="creator" type="text" name="township" ng-model="township" placeholder="Bruce Township,Ottawa Township"/>
</div>

<div class="section">
    <label for="city">
        Cities
    </label>
  <input class="creator" type="text" name="city" ng-model="city" placeholder="Streator,Peru,Chicago"/>
</div>

<div class="section">
    <label for="phone">
        Credit Union Phone Number
    </label>
  <input class="creator" type="text" name="phone" ng-model="phone" placeholder="800-555-5555"/>
</div>

<textarea class="copyarea">
<iframe src="https://cualify.org/a.html?aa={{aa}}&country={{country}}&county={{county}}&township={{township}}&city={{city}}&phone={{phone}}" width="100%" height="100%" scrolling="no" seamless="seamless" frameborder="0" style="border:0" />

</textarea>
<br/>
<hr/>
<h2>Dig Deeper</h2>
<p>This is an example of how the script can be imported into your website with an iframe.
You can put your option tags on the end of the url. Iframe should be fully responsive to resizing and browser windows. The following inputs are supported.</p>

<div class="center">
<div class="area">
    <img src="images/state.png"/>
    <b>State / Country</b>
</div>

<div class="area">
    <img src="images/county.png"/>
    <b>County</b>
</div>

<div class="area">
    <img src="images/township.png"/>
    <b>Township</b>
</div>

<div class="area">
    <img src="images/city.png"/>
    <b>City</b>
</div>

<div class="area">
    <img src="images/phone.png"/>
    <b>Phone</b>
</div>
</div>
<br/>
<p>
<b>Parameters: aa</b><br/>

Name: admistrative area<br/>

Type: filter<br/>

Value: state ie 'IL' (Optional field)<br/>

<br/>
<b>Parameters: country</b><br/>

Name: country<br/>

Type: filter<br/>

Value: country ie 'US' (Optional field)<br/>

<br/>
<b>Parameters: county</b><br/>

Name: county<br/>

Value: county name ie 'LaSalle County' (Must match format '[county name] County')<br/>
<br/>
<b>Parameters: township</b><br/>

Name: township<br/>

Value: township name ie 'South Ottawa Township' (Must match format '[township name] Township')<br/>
<br/>
<b>Parameters: city</b><br/>

Name: city<br/>

Value: full city name (Must match format '[city name]')<br/>
<br/>
<b>Parameters: phone</b><br/>

Name: phone number<br/>

Value: any value is allowed<br/>

Notes: The credit union's phone number</br>
<br/>
<h2>Examples:</h2>

<b>One County</b>
<pre>https://cualify.org/a.html?aa=IL&county=Livingston County&phone=815-555-1000</pre><br/>

<b>Multiple Counties</b>
<pre>https://cualify.org/a.html?aa=IL&county=Livingston County,LaSalle County&phone=815-555-1000</pre><br/>

<b>One Township</b>
<pre>https://cualify.org/a.html?aa=IL&township=Bruce Township&phone=815-555-1000</pre><br/>

<b>Multiple Townships</b>
<pre>https://cualify.org/a.html?aa=IL&township=Bruce Township,South Ottawa Township&phone=815-555-1000</pre><br/>

<b>One City</b>
<pre>https://cualify.org/a.html?aa=IL&city=Streator&phone=815-555-1000</pre><br/>

<b>Multiple Cities</b>
<pre>https://cualify.org/a.html?aa=IL&city=Pontiac,Streator&phone=815-555-1000</pre><br/>


<h2>Completed Example</h2>
<p>Below is the code that you would import into your website.</p>
<textarea class="copyarea">&lt;iframe src="https://cualify.org/a.html?aa=IL&county=Some%20County&phone=1234" width="100%" height="100%"frameborder="0" style="border:0" /&gt;</textarea>

<iframe src="https://cualify.org/a.html?aa=IL&country=US&county=Livingston County&township=&city=&phone=" width="100%" height="500px" scrolling="no" seamless="seamless" frameborder="0" style="border:0"></iframe>


<footer>
<p>&copy; 2016 Streator Onized Credit Union</p><br/>
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/"><img src="images/ccbyncnd.jpg"/></a>
<br/>
</footer>
</div>
</body>
</html>

Upvotes: 0

Views: 3405

Answers (3)

Haru
Haru

Reputation: 1381

I was able to resolve this, even though I'm not sure why it works. I changed all my extensions to .php from .html even though I do not have any PHP code at all on the site. I'm using jQuery...it makes no sense.

UPDATE - This issue was being caused by mod_pagespeed that I was running on Apache. As soon as I turned it off HTML files rendered fine.

It has to be something with one of these directives. I haven't had time to test it though. What a headache. 

ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters resize_mobile_images
ModPagespeedEnableFilters inline_preview_images
ModPagespeedEnableFilters inline_google_font_css
ModPagespeedEnableFilters extend_cache

Upvotes: 0

user9112752
user9112752

Reputation:

If you are using HTML4 you should use

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

And your page shouldn't be blank. The error has to be somewhere else. The encoding just says how characters will be rendered.

Upvotes: 0

theberbie
theberbie

Reputation: 94

The meta tag is placed properly, so it should work. I realize this is small, but any chance you are saving and refreshing the correct page after the changes?

What kind of browser are you using?

Upvotes: 1

Related Questions