0

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>
Haru
  • 1,361
  • 2
  • 15
  • 40

3 Answers3

1

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?

theberbie
  • 94
  • 1
  • 6
  • Yep, the site is just cualify.org - all browsers give the same blank white page. – Haru Dec 20 '17 at 13:30
  • Thanks Andrew. I checked the code in the dev tools and it doesn't look that the tag was added. Are you able to see any differences if you change any other element in your html ? – theberbie Dec 20 '17 at 22:54
  • I found a fix see my answer. – Haru Dec 20 '17 at 23:35
0

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.

  • ` ` is the HTML 5 doctype, and `` is an HTML5 element, so this is clearly using HTML5, not HTML4. – Remy Lebeau Dec 19 '17 at 23:59
  • But his browser can still only support HTML4 o_O –  Dec 20 '17 at 06:52
  • As I wasn't using HTML4 that obviously didn't work, but you were right in that encoding shouldn't have caused it. See my solution. – Haru Dec 20 '17 at 23:37
0

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
Haru
  • 1,361
  • 2
  • 15
  • 40