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>
Related
When I do gg=G, almost everything get indented correctly, except <meta tag and <link tag when there is no / in before > like this />.
here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<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="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
Here is what expected:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<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="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="js/ie.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
I've tried everything I could find on the net, but still the same.
I'm using VIM version 7.4.873. MacVim 7.4 (77) compiled by Homebrew.
here is my .vimrc file:
filetype plugin indent on
syntax on
set bg=dark "background=dark
set ic "ignorecase
set hls "hlsearch
set is "incsearch
set scs "smartcase
set gd "gdefault
set ai "autoindent
set si "smartindent
set ci "copyindent
set pi "preserveindentd
set bs=2 "backspace=indent,eol,start
set fenc=utf-8 "fileencoding=utf-8
set enc=utf-8 "encoding=utf-8
set ts=4 "tabstop=4
set sts=0 "softtabstop=0
set sw=4 "shiftwidth=4
set noet "noexpandtab
"set sm "showmatch
set ru "ruler
set nu "number
set rnu "relativenumber
set wrap "wrap
set ch=1 "cmdheight=1
set title "title
set ls=2 "laststatus=always
set stl=%.50F%m\ "statusline=F
set stl+=\|\
set stl+=%p%%\
set stl+=\:\ %l/%L\
set stl+=\:\ %c\
set stl+=\:\ %v\
set stl+=%=
set stl+=%y
set stl+=[%{&fenc?&enc:&fenc}]
set stl+=[\#%n]
set cul "cursorline
set clipboard=unnamed
" Other settings
let g:PHP_vintage_case_default_indent = 1
No plugin or indent scripts.
Any ideas?
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 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
In my MVC3 project all the pages have the following HTML as output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<link href="/Content/bootstrap-responsive.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="/Content/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/Content/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/Content/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/Content/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/Content/icons/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="well">
<h2>Test</h2>
</div>
</div>
</div>
<hr>
<footer>
<p>©</p>
</footer>
</div>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
</body>
</html>
However, how can I make a filter to trim rows and remove blank lines, to get the output like the following example...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<link href="/Content/bootstrap-responsive.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="/Content/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/Content/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/Content/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/Content/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/Content/icons/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="well">
<h2>Test</h2>
</div>
</div>
</div>
<hr>
<footer>
<p>©</p>
</footer>
</div>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
</body>
</html>
In ASP.NET MVC,
you have can using action filter , caching & compression for fast load your site.
Please view link filter caching and compression (C#)
Hope it will be useful for you
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.