I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie= edge">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool
I am building a website using the source files of a previous website I already built. My problem is that the tags that belong to the HEAD appear in the BODY in browsers inspectors (Firefox and Chrome). Here is my HEAD:
<!DOCTYPE HTML>
<html lang="<?php echo $lg; ?>">
<head>
<base href="<?php echo $cfg->getHostDirectory(); ?>assets/cpanel/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">-->
<link rel="stylesheet" type="text/css" href="../css/playfair-display.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/glyphicons.css">
<link rel="stylesheet" type="text/css" href="../css/ts-css.css">
<link rel="stylesheet" type="text/css" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/modernizr-custom.js"></script>
<script src="../js/ts-jquery.js"></script>
<script src="../js/js-admin-create.js"></script>
<title><?php echo $cfg->getTitle($fileName, $lg); ?></title>
</head>
For some reason, I do not understand these tags goes in the BODY at runtime.
I searched on the StackOverflow for solutions but I cannot find anything helpful.
Update:
Update:
Here I see a weird duplicate that does not actually exist in the real file!!!
I had a similar issue with a registration form action to another page (which processed the registration and told the user an email had been sent for them to complete the process) but this latter page appeared to show all the html tags as text!
I tracked it down to a set-up file I had required, which had set the header content-type to application/json, thereby causing the browser to try and treat the response as an AJAX type response rather than a page to be loaded.
I had the same problem when adding a custom <jsdata>-tag to my head. So I think it is due to your <base>-tag. In don't know why you need it but try deleting it or put it at the end of your head because only all the tags after your custom tag will be moved into the body.
I'm creating a landing page for work using a html template, I've taken this template here (www.switchonbook.com) and am editing it for a different product.
Regardless of what I do the second CSS won't show. I have
-Tested the CSS and the HTML through testers online, no problems
-Tried changing the location of the files
-Compared the code to the original code of the landing page
Here is the code I am using for the new landing page;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700' rel='stylesheet'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch On: Your DIY Toolkit</title>
<meta name="description" content="Switch On: Your DIY Toolkit">
<link rel="shortcut icon" href="http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png" type="image/x-icon">
<link rel="icon" href="http://www.ripeandready.com/wordpress/wp-content/uploads/2015/03/favicon.png" type="image/x-icon">
<link href="http://switchonbook.com/css/styles.min.css" rel="stylesheet">
<link href="http://switchonbook.com/css/main.css" rel="stylesheet" >
</head>
<body>
Any help would be greatly appreciated!
There are a few errors in your code. For instance, here:
http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700
There should not be spaces after the ?. Similarly, there should not be a space here after the -:
http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png
Also, you do not have closing </body> and </html> tags.
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
I'm working on a website right now, the homepage links up with the CSS as normal and displays fine. The about page for no apparent reason is not connecting to the style.css, the same header links are there as the homepage has, apart from an additional two stylesheets just to get two web-fonts to work. Can someone have a look and see any issues with this.
I've copied everything within the pages header.
INDEX
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
ABOUT
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/jennasue-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
<link href="css/quickendjerk-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
</head>
Index - http://www.jordancharters.co.uk/nakedradish
About - http://www.jordancharters.co.uk/nakedradish/about.html
This is your stylesheet: it is in a different language. Specify either of the following:
HTML
<meta charset="utf-8">
CSS
#charset "UTF-8";
UPDATE.. It seems as though you are using a relative URL for the stylesheet.. both pages are in different folders.. try setting an absolute URL? Let me know if that works.
Use this: <link href="http://www.jordancharters.co.uk/nakedradish/css/style.css" rel="stylesheet" media="screen">
It... looks like you've got some kind of encoding glitch on your about page, which is making browsers think that the CSS is encoded in a way that it isn't. Here's a brief excerpt of what my browser thinks your CSS says, when loaded as part of the about page:
⼪⁓瑹汥⁒敳整⼊牴楣汥Ⱐ慳楤攬楧畲攬潯瑥爬敡摥爬杲潵瀬敮甬慶Ⱐ獥捴楯渠笊।楳灬慹㨠
It kind of goes on like that for a while. The raw network response for the html isn't much better:
ÿþ<�!�D�O�C�T�Y�P�E� �h�t�m�l�>�
Although it appears that the browser can compensate for that part - you'll notice there's a DOCTYPE html hiding in between those garbage characters. And then it switches encodings or something partway through, and starts looking perfectly normal.
I thinks it loads but It's the Unicode problem ,set The unicode in your your HTML , and save your CSS again with standard Unicode