I am trying to make IE7 render HTML5 using html5shiv; I thought html5shiv would fix these issues. However, Internet Explorer's debugbar is still griping about HTML5 tags.
How can I fix this using html5shiv to use the same HTML5 content without errors in debugbar?
<!DOCTYPE html>
<!--
See this page for language codes:
http://tlt.its.psu.edu/suggestions/international/web/tips/langtagscript.html
-->
<html class="no-js" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Page Template</title>
<!--
html5shiv via CDN
Provides HTML5 support in hateful IE versions
CDN: http://cdnjs.com/
-->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Standard HTML5 Page</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>About</li>
</ul>
</nav>
<section id="featured">
<article>
<header>
<h1>Title Foo1</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1>Title Foo2</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<section id="ads">
Get a better job!
</section>
<footer>
<p>Insert footer info here</p>
</footer>
</div>
</body>
</html>
You don't. html5shiv only makes it possible to style those elements. IE7 still won't know about them.
I've also had problems getting html5shiv to work in IE Tester (assuming you're using IE Tester), which I found do not occur when I force IE8 to emulate IE7 using a tag, like so:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;">
(See my answer to a similar question here). Based on this experience, I suspect IE Tester might have a problem with html5shiv: it might be worth testing your page in actual IE7 to make sure there really is a problem here.
Related
I started learning html and I encountered a first problem. If someone can explain me why although the nav element is closed is still continues to be applied to the subsequent elements?
See the live example..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p><a href="recipes.html">Recipes</p>
<p><a href="men.html">Menu</p>
<p><a href="operating_times.html">Operating Times</p>
<p><a href="contact.html">Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>
Your <a> tag was not closed, so any text/code there after will be treated as sub-element of <a> tag, and hence you are getting the effect of <a> tag even after the <nav> tag.
NB: There is nothing special to <nav> tag. Don't blame that innocent. :P
See there the running example of your code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p>Recipes</p>
<p>Menu</p>
<p>Operating Times</p>
<p>Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>
You are not closing anchor tag, and remove <p> tag, it create subsequesnt line
every time
<nav>
Recipes
<a href="men.html">Menu<a/>
<a href="operating_times.html">Operating Times<a/>
<a href="contact.html">Contact<a/>
</nav>
I validated my website using: https://validator.w3.org/#validate_by_upload
and I got no errors. However, the website recently changed and now I get these 2 messages:
Info: The Content-Type was application/octet-stream. Using the XML parser (not resolving external entities).
Fatal Error: Empty document, with no root element.
What do these messages mean? How do I correct the error?
The settings I used were: Encoding: utf-8 document type: HTML5
SIMPLE HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<hr>
<footer>Footer</footer>
</div>
</body>
</html>
It could be because you have opening tags that are not closed. I put your code in to the checker and it complained about the body element being found before the div is closed:
<body>
<div class="container"> <!-- no closing tag for this div -->
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<div>
<hr>
<footer>Footer</footer>
</div>
</body>
Message filtering
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: End tag for body seen, but there were unclosed elements.
From line 27, column 1; to line 27, column 7
Error: Unclosed element div.
From line 17, column 1; to line 17, column 23
Fix that and rerun the tests.
This is an issue when using the old w3 validator and Safari as the uploading Browser; If you upload using Chrome it should work fine, or if you cut and paste it should work fine. Also, if you upload using Safari to the "new school" validator it will work as well.
http://html5.validator.nu/
It looks fine but some tags need to be closed like your hr's
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr />
<div>
<p> TEXT </p>
</div>
<hr />
<footer>Footer</footer>
</div>
</body>
</html>
i'v created demo page of mobile jquery using TextEdit...which is,
<!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
but, in my browser code is not getting compiled and it shows these texts as it is as plain text.. and i'v confirmed that my browser support HTML5 here: http://html5test.com/
what is missing!?
Question is what browser are you using? I tried your code with Chrome and it worked perfectly.
My guess is that you are behind a corporate or university firewall that is blockign your CDN urls. So why don't you download the jQuery mobile files and place the js, css files locally and try to run the page again?
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
sorry but issue was weird, actually i had created that page using textEdit which stored all text as rich text format which may not recognized to be compiled as html... so i converted that text to plain text and saved it again and that worked!!
thanks all.
I'm writing a Twitter application that will display the following three (3) things about a Twitter user:
GET statuses/user_timeline
GET friends/ids
GET followers/ids
My question is, is it symantically correct to put the above-mentioned three (3) things inside one (1) <article> tag and separate them using three(3) <section> tags? (See Option 1 below)
Or is it symantically correct to just use three (3) <article> tags (one for each item above)? (See option 2 below)
Option 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter App</title>
</head>
<body>
<article>
<section>
<h2>User's Timeline<h2>
<!-- Displays GET statuses/user_timeline here -->
</section>
<section>
<h2>User's Friends<h2>
<!-- Displays GET friends/ids here -->
<section>
<section>
<h2>User's Followers<h2>
<!-- Displays GET followers/ids -->
</section>
</article>
</body>
</html>
Option 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter App</title>
</head>
<body>
<article>
<header>
<h2>User's Timeline<h2>
</header>
<!-- Displays GET statuses/user_timeline here -->
<footer></footer>
</article>
<article>
<header>
<h2>User's Friends<h2>
</header>
<!-- Displays GET friends/ids here -->
<footer></footer>
</article>
<article>
<header>
<h2>User's Followers<h2>
</header>
<!-- Displays GET followers/ids -->
<footer></footer>
</article>
</body>
</html>
Both are correct, it won't be a problem at all...!!!
Reference: link
The webpage I made will not allow me to scroll. How can I fix this?
Other than viewing the code you can view the live website at this address
Also, the tabs only view on certain web browsers. How do I make it on all browsers?
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js b1" lang="en"> <!--<![endif]--> <!--[TO PUT THE BACKGROUND BACK, CHANGE "b1" to "bg1"-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site.</p><![endif]-->
<header>
<h1>The Down Syndrome Awareness Foundation (DASF)</h1>
</header>
<div id="image">
<img src="img/zoom.png">
<a href="img/big.JPG" class="MYCLASS" title="DSAF Logo">
<img src="img/small.JPG" title="Our Logo">
</a>
</div>
<div id="back" >
<img src="img/back.png" alt-text="Back" title="Back">
</div>
<div role="main" id="container">
<div id="primary">
<h2>TITLE ONE</h2>
</pre>
<p>TEXT</p>
<p>MORE TEXT, ANOTHTER PARAGRAPH</p>
</div>
<div id="content" class="one-edge-shadow">
<!-- <h2>Main content</h2> -->
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">About the Disorder</li>
<li id="tabHeader_2">TAB 2</li>
<li id="tabHeader_3">Commercial</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>HEADER ONE</h2>
<p><strong>What is Down Syndrome?:</strong></p>
<p></p>
<p><strong>Quality of Life:</strong></p>
<ul>
<li>A person with Down Syndrome in 1900 could expect to live to about 9-11 years. Now, patients with Down Syndrome live to 50 years old, with a ratio of 1:10 living to 70
<li>About 92% of pregnant women with babies with Down Syndrome elect to terminate the pregnancy
<li>Rate of bullying to children is increased to children with disorders is much higher
<li>Increase risk for Alzheimer’s Disease, Cancers, Celiac Disease, and Vision and Hearing Impairment
</ul>
<p><strong>Severity:</strong></p>
<p></p>
<p><strong>Famous Cases:</strong></p>
<p></p>
<p><strong>Special Olympics:</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>HEADER 2</h2>
<hr>
<p><strong>Clinical Science</strong></p>
<p></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Having a third copy, or part of a third copy of chromosome 21
<li>1% of cases are hereditary, the other 99% of cases are random or based on the mother’s age being over thirty-five (35) years
</ul>
<p><strong>Symptoms:</strong></p>
<ul>
<li>Delayed physical, social, and intellectual development</li>
<li>Decreased muscle tone</li>
<li>Short neck, excess skin on the back of the neck</li>
<li>Flattened facial profile</li>
<li>Upward slanting eyes</li>
<li>Skin fold that comes out from the upper eyelid and covers the corner of the eye</li>
<li>Wide, short hands and short fingers</li>
<li>A single deep crease in the palm of the hand</li>
<li>White spots on the coloured part of the eye</li>
<li>Deep groove between the first and second toes</li>
</ul>
<p><strong>Treatment</strong></p>
<p>There is no cure for Down Syndrome, however there are treatments to minimalise the symptoms and the conditions associated with them. Speech and coordination can be improved by occupational therapy and special education.</p>
<p><strong>Heart Defects Related to Down Syndome</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>As Seen on "The Today Show"</h2>
<p>PARAGRAPH ONE BECAUSE I'M SO LAZY AND CAN'T ADD MORE, SORRY</p>
</div>
</div>
<!-- <p>Inner containers can be set using % measurements which are relative to the parent container.</p>
<p>If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.</p>
<p>To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.</p>
<p><strong>target ÷ context = result</strong></p> -->
<div id="button-box">
<a class="button">About Us</a>
</div>
</div>
<div id="secondary" class='visuallyhidden'>
<h2>Seconday Sidebar</h2>
<pre>
#secondary {
float:left;
width:25%;
}
</pre>
<p>One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.</p>
<p>You can mitigate this problem by changing font sizes on elements other than the containers themselves.</p>
</div>
</div>
<div id="remedy" class="one-edge-shadow">
<h2>Meet the Team</h2>
<p>I CAN PUT BULLETS IN LATER</p>
<p>BUT IM JUST SO TIRED</p>
<p>DURRRRR</p>
<p><strong>I CAN EVEN MAKE IT BOLD!</strong></p>
</div>
<footer>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> -->
<script src="js/jquery-1.7.2.min.js"></script>
<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
<script src="js/acidTabs.js"></script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Change:
html {
overflow: hidden;
}
to:
html {
overflow: auto;
}