CODEWITHSUNDEEP
javascripthtmlgoogle-chromearduino
Alan Scarpa
Alan Scarpa

Reputation: 79

Why is Chrome loading my HTML in a "pre" tag?

I have a very basic web page that I'm loading with an Arduino Server. When I view the page on Safari, everything works fine and looks good when I use the inspector. But when I load it on Chrome (version 39.0.2), it wraps all of my HTML in a "pre" tag which prevents my webpage from loading (I've attached screenshots showing the Inspector output). It also moves all of my code out of the "head" tag and into the "body" tag. First, here is my HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

         <!-- LOAD THE JSON DATA -->
              <script type="text/javascript" src="data.txt"></script>
              <link rel="stylesheet" type="text/css" href="home.css">
              <script src="home.js" type="text/javascript"></script>




        <title>CANARI JR. | Home</title>

    </head>


<body onload="preparePage()">

<div id="container">


    <div id="headerDiv">

        <div id="logoDiv"><a href="/">
         <img src="cLogo.png"> 
        </div></a>





     </div>



<div id="contentDiv">


</div>



</div>
    </body>
</html>

Now when I inspect my page, I see this:

And it wraps around all my HTML and actually closes the tag outside of my body and html tag!

Anyone see what is going wrong here in Chrome?

Edit 1 - I am using an Arduino Ethernet Shield to host and load this page from an SD card. (It works perfectly on Safari, so I'm thinking there's something in my code and not an issue with Arduino).

Edit 2 - I've attached screenshot of the Google Chrome Inspector (sorry - copy and pasting replaced a lot of the characters, so I went screenshot route https://i.sstatic.net/d09k8.png

Edit 3 - Added "Network" Tab from Chrome Inspector https://i.sstatic.net/zL7L1.png

Upvotes: 4

Views: 6586

Answers (2)

Varad Ujjainkar
Varad Ujjainkar

Reputation: 17

Add Dependency to your POM

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

Upvotes: -1

LJᛃ
LJᛃ

Reputation: 8123

According to your sceenshots the page is delivered with the Content-type: text/plain header. This leads chrome to display it in a pre tag as it assumes you want to view the HTML as text. Your webserver needs to write a proper Content-type header.

An example of how to write headers using the arduino ethernet shield can be found here.

Contrary to the code linked above, you should determine the content-type dynamically, using something like the file extension. So that images are transferred with the correct content-type(for example image/jpg) aswell.

Upvotes: 9

Related Questions