My w3c validator check bought up the following error.
Line 9, Column 53: Stray start tag html.
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Here is the full code.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<!--[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]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Where is the stray start tag?. What would be the correct version of this code?
Thanks
Paul
Related
I'm using the conditional statement here to add i.e. browsers css styles
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
If I test in emulators this conditional statement doesn't seem to work, the html tag doesn't have the 'lt-ie9' class.
If I test in products like browserstack the conditional statement seems to work and I can see the text thats is shown with the class .lt-ie9
Is the conditional html tag correct? Should I not trust the emulators
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.test{
color: red;
display: none;
font-size: 2em;
}
.lt-ie9 .test{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="test">IE8</div>
</body>
</html>
Without knowing the emulators in question, there's no way for us to know. Your best course of action in debugging is to copy down that code into the body and replace the html tags with something visible:
<!--[if lt IE 7]> IE, Less than 7<![endif]-->
<!--[if IE 7]> IE 7 <![endif]-->
<!--[if IE 8]> IE 8 <![endif]-->
<!--[if gt IE 8]><!--> IE 9+ or not-IE <!--<![endif]-->
I am trying to validate this HTML document in http://validator.w3.org/#validate_by_input but I am getting the following errors:
Line 3, Column 47: Stray start tag html.
<!--[if IE 7]><!--><html lang="en" class="ie7"><!--<![endif]-->
Line 4, Column 47: Stray start tag html.
<!--[if IE 8]><!--><html lang="en" class="ie8"><!--<![endif]-->
Line 5, Column 47: Stray start tag html.
<!--[if IE 9]><!--><html lang="en" class="ie9"><!--<![endif]-->
Line 6, Column 46: Stray start tag html.
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
This is the HTML I am inputting:
<!DOCTYPE html>
<html lang="en-US">
<!--[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]-->
<head>
<title>Test</title>
</head>
<body>
</body>
</html>
Any ideas where I'm going wrong?
Correct conditional comments:
<!--[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-US"><![endif]-->
You don't close them. That's all and you define 2 html tags now.
You start with a html-tag that's always present and then you add html-tags depending on version of IE so you might very well end up with multiple html-tags.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Use this file and then start tag...
How would I format HAML to output a style similar to the conditional HTML tags used for cross-browser targeting?
<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
If I add a conditional, it wraps entire page in the conditional as well. I thought about using HAML's :plain filter at the top and manually adding </html> at the bottom, but this seems less than ideal to me.
The first three of these are pretty simple, as they are just plain HTML comments and you can use the Haml support for conditional comments:
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
The last one is a bit different. Breaking it down, what you want is two comments surrounding the html opening tag, so the second comment is the first content of the html element. Also you can’t use the Haml syntax for conditional comments, you’ll have to use a literal comment. In Haml this would look like:
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}
<!--<![endif]-->
This will produce HTML like this:
<!--[if gt IE 9]><!-->
<html class='no-js' lang='en'>
<!--<![endif]-->
If you wanted you could use the whitespace removal syntax to make the generated HTML more like your example:
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
<!--<![endif]-->
Putting it all together:
!!!
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
<!--<![endif]-->
content here
which produces:
<!DOCTYPE html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->
content here</html>
An alternative technique would be to use Haml’s surround helper:
= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
content here
<!doctype html>
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
/ [if gt IE 9]><!
%html.no-js{:lang => "en"}
/ <![endif]
I'm using the placeholder attribute on input fields like they do in my Bootstrap examples, but it doesn't show up in my of my elements. Am I missing something? Is there some doctype that I'm missing? I'm using it like in the examples on Boostrap, seemingly a simple attribute, but nothing shows up.
<!doctype html>
<!--[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]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<form class="form-search">
<input type="text" class="input-medium search-query" placeholder="Search by Tag">
<button type="submit" class="btn btn-primary">Search</button>
</form>
My stupidity is to blame as usual - I was using one of those "downloadable Bootstrap themes", and this particular theme set the placeholder to #ffffff and the background on inputs to #ffffff.
I am trying to target a class for IE. However, since the boilerplate template has changed this no longer works..
.myclass {
//do something
}
.ie7 .myclass {
///do something
}
This is what's in the new header of the boilerplate template.
<!doctype html>
<!--[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]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
We do not recommend you target IE9 as it has all the marking of a modern browser, which is why we do not have IE9 specific conditional class. If you still would like to, you can use:
<!doctype html>
<!--[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]-->
<!--[if IE 9]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Note that IE10 will not recognize conditional comments.
Yak Boilerplate! Anyway:
.lt-ie9.lt-ie8 .myclass {}
should do what you want.
EDIT
Sorry misread your question since you put IE7 in example. If you want to IE9 you can just do:
.myclass {}