i am using this in HTML5
<link rel="stylesheet" type="text/css" href="css/loader.css" media="all"/>
But w3c validator giving me this error:-
Element link is missing required attribute property.
Please help i am stucked with it,
My Code is:
<!DOCTYPE html>
<html lang="en">
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en"><![endif]-->
<head>
<!-- The title of your site -->
<title>Directus Media LTD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Always make sure to check the robots tag -->
<meta name="robots" content="index,follow">
<meta name="description" content="Directus Media specialises in websites for small to medium businesses"><meta name="keywords" content="southport graphic design, liverpool web design, southport social media management"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/lib/modernizr.js"></script>
<!-- Liquid Slider Master -->
<!-- Essential stylesheets -->
<link rel="stylesheet" href="css/loader.css" media="all"/>
<link rel="stylesheet" href="css/lib/essentials.css"/>
<link rel="stylesheet" href="css/lib/ytplayer.css"/>
<link rel="stylesheet" href="css/lib/font-awesome.min.css"/>
<link rel="stylesheet" href="css/lib/magnific-popup.css"/>
<link rel="stylesheet" href="css/lib/jquery.bxslider.css"/>
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/colors/black.css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
Everything is according to standards. Please have a look on the code. I don't know why validator is not passing my page.
you can add property="stylesheet" in the link tag
link tags don't need self closes. Remove that and try again.
http://www.w3schools.com/tags/tag_link.asp
Related
I developed a site using simple HTML, CSS, javascript and PHP as backend language. Lately there has been an issue, the site seemed to be not loading any stylesheets, but there was no error in console that..the css files were loading normally. I tried clearing the cache and it solved the problem. But i faced the issue once again. Again i tried clearing the cache but the problem dint get fixed. I tried disabling the cache in devTools, still no solution. The site is continuously taking inputs from the cache, even if I try changing something for example the font size or anything it reflect the changes. Can somebody please give me a solution. Here is a screenshot
enter image description here
<?php ob_start(); ?>
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
<!-- Basic -->
<title>Margo | Home</title>
<!-- Define Charset -->
<meta charset="utf-8">
<!-- Responsive Metatag -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Page Description and Author -->
<meta name="description" content="Margo - Responsive HTML5 Template">
<meta name="author" content="GrayGrids">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
<!-- Revolution Slider -->
<link rel="stylesheet" href="css/settings.css" type="text/css" media="screen">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
<!-- Slicknav -->
<link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
<!-- Margo CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/customstyles.css" media="screen">
<!-- Responsive CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
<!-- Css3 Transitions Styles -->
<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
<!-- Color Defult -->
<link rel="stylesheet" type="text/css" href="css/colors/red.css" media="screen" />
<!-- Color CSS Styles -->
<link rel="alternate stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
</head>
Try this
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
Taken from: http://www.php.net/manual/en/function.header.php
i don't know weather it will work or not but give a try with pressing Ctrl+f5 once on browser :)
it will refresh a page with new code.
The following navbar is not clickable in Internet Explorer. I have been using Bootstrap 3.
<!DOCTYPE HTML>
<head>
<!-- force IE8+ into standards mode -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>XYZ Management Pvt Ltd.</title>
<!-- Custom CSS -->
<link href="css/management.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
At the end I have also put this
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</body>
Nav link is not clickable at all in Internet Explorer.
You need to have <!DOCTYPE HTML> on the first line of your html.
Some of my CSS elements don't work in IE8. So I am using a conditional style sheet to set display:none for them; however, this affects everyone using IE browsers no matter the version. I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
<meta name="description" content="web description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
Where am I going wrong?
My understanding is you want to target all the old IEs including IE8, so lte IE 8 (lower/equal) would work. You can also merge that lt IE 9 into the above one actually, like this:
<!--[if lte IE 8]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
For debugging, you can try to add something like body {10px solid red !important;} into your ie8.css and to see if that applies to the correct browsers.
[if lte IE 8] means that the stylesheet is added if version of IE is less than 8. You need the [if IE 8] conditional.
I'm doing some w3 validation. I've done most of the work as I started with 40 reported issues, now is only 3.
This is the page I'm validating:
<?php
session_start();
ob_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<html>
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Andrew's Webpage</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/layout.css">
<link rel="stylesheet" href="assets/css/navcss.css">
<link rel="stylesheet" href="assets/css/map.css">
<link rel="stylesheet" href="assets/css/about.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon- 114x114.png">
</head>
<body>
<div id= "background">
<div id = "main-head" class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Advanced Internet Development A </h1>
<h5>Andrew David Dunkerley</h5>
<h6> Login</h6>
<h6> Register</h6>
<h6> Cart</h6>
</div>
</div>
</div>
</body>
</html>
and these are the errors im getting. its probably something so simple but something i keep missing.
Error Line 10, Column 6: Stray start tag html.
<html>
Error Line 66, Column 36: Stray start tag div.
</html><div class="sixteen columns">
Error Line 66, Column 36: Cannot recover after last error. Any further errors will be ignored.
</html><div class="sixteen columns">
try this
<?php
session_start();
ob_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Andrew's Webpage</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/layout.css">
<link rel="stylesheet" href="assets/css/navcss.css">
<link rel="stylesheet" href="assets/css/map.css">
<link rel="stylesheet" href="assets/css/about.css">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
</head>
<body>
<div id= "background">
<div id = "main-head" class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Advanced Internet Development A </h1>
<h5>Andrew David Dunkerley</h5>
<h6> Login</h6>
<h6> Register</h6>
<h6> Cart</h6>
</div>
</div>
</div>
</body>
</html>
I've added new meta tags and a different title tag to the head of my document, which makes the IE code that redraws the black background not work.
Any idea what I have missed? I can't see anything in the new code which would be causing this to break?
Old correct working code:
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>netball</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"> <!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE]>
<style type="text/css">
.black_overlay {position:absolute; top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px");}</style><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.simpletip-1.3.1.min.js"></script>
</head>
None working new code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball - notice board</title>
<meta name="description" content="netball description to go here." />
<meta name="keywords" content="net, ball, netball, womens" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"> <!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE]>
<style type="text/css">
.black_overlay {position:absolute; top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px");}</style><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="jquery.simpletip-1.3.1.min.js"></script>
</head>
It looks like your link tags are malformed. Close them and you should be good.