I recently put together an HTML page that incorporates some CSS and two simple highcharts from highcharts.com.
After testing the page on my local machine and being satisfied with the outcome, I transferred it to a server on our internal network to make it accessible to everyone.
However, upon loading the page from the server, everything seems to be displaying incorrectly, which you can see in the following screenshots.
(Unfortunately, I cannot post pictures here)
This is the correct layout.
This is the incorrect layout. You may notice that the letters in the menu are smaller, and the word "gigabyte" next to the graphs is experiencing some strange format issues. Furthermore, the sleek animations that appear when the graphs load on my local machine are not visible when loaded from the external server.
Despite the smaller font size, some formatting works as intended, such as the menu, which is created using CSS.
I am puzzled by what could be causing these discrepancies. I assumed that loading the HTML from my local machine or the server would yield the same result.
Thank you in advance for any insights.
The code for the specific page (apologies for the lack of comments):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<!-- More code here -->
</body>
I understand that it may seem redundant that I duplicated the code for the two graphs, but they will differ significantly as the project progresses.