I made this website bigeyeslion.com years ago with a template. Recently, I changed some text and images. After that the CSS stop working. I test it locally before upload to server, it worked fine. but the css files just wont load on the server. Here is the header
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leon Sun - Creative Designer - Graphic and 3D</title>
<meta name="description" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="keywords" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="author" content="bigeyeslion.com"/>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I put the css files in a folder public_html/css and index is in public_html folder.
Please help, I been struggle with this for days
I find it very strange. I test the site on a MAC with firefox and on a PC with google Chrome at my working place. both of them show the same problem. with F12, it tells me I have 2 img (which I did not use) were missing. But when test at home with chrome it works fine and also working on a cellphone too.
Related
I have a .html file which is identical to the one on CSS Zen Garden, a .css file which I restyled to my liking. Those two files and all materials are put in the same folder on Desktop. The page opens and is styled when using Google Chrome and Mozilla Firefox, however there is no styling whatsoever when trying to open the .html file with Internet Explorer and Microsoft Edge.
How do I resolve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS"
href="http://www.csszengarden.com/zengarden.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be
accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
As it turns out, I didn't take a look at the HTML well enough.
Deleting the... comments? around the line made it work in IE and also Microsoft Edge.
From
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
To...
<script src="script/html5shiv.js"></script>
should work...
My first responsive Website validates, works with all browsers and displays fine when run locally on a machine with IE7, but won't work on IE 7 or 8 when run live.
The top 2 rows of the site are there but nothing else appears, I've tried using respond/s.js but I'm assuming it to be a problem with my links.
A reworked version of the site can be seen [here] and if anyone can help it will be GREATLY appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Urban Dreamscapes Web Design and Development for Fun</title>
<meta name="description" content= />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, all" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, all" />
<script src="scripts/css3-mediaqueries.min.js"></script>
<script src="scripts/html5shiv.min.js"></script>
<![endif]-->
</head>
Your page breaks when it loads the html5shiv js library in IE7/8 and in my case, becomes unresponsive.
Try to add all the elements you want to "shiv" before html5shiv.js is included.
window.html5 = {
'elements': abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video'
};
From your rendered markup, I see hgroup, header and footer. It's better to include everything though just to be sure
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 am encountering strange problem while developing a static website for my customer. Every time when I push my changes to the server on my hosting (through to FTP to usuall public_html folder), my customer needs to delete cache of the browser in order to see new changes that I put there. This also happens on other computers with exception of my own. This is head of all my pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>STINGPRO s.r.o.</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
So should I forbid caching in meta header like in this question or problem lies somewhere else?
Your server is most likely sending the Cache-Control and Expires headers when serving up the page and telling the browser not to check for the content. If you cannot control the request headers, you can manually force the reload. See this other question for details on turning off caching.
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