I use Dreamweaver to develop Web sites. I use the templates feature extensively as it helps to make things easier maintaining conformance.
However, I notice that Dreamweaver adds the following code before the doctype:
<!-- InstanceBegin template="/templates/web-public-user-home.dwt" codeOutsideHTMLIsLocked="false" -->
This is throwing my IE into Quirks mode for obvious reasons (i.e. comment before the doctype). Is there a way of dealing with this?! Below is my doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Regards,
Ok, I figured this out.
Because of the extensive IE-compliance tweaking I'm doing, I was using conditional comments. However, I was using them on the html tag. There's nothing wrong with this in principle but Dreamweaver won't handle your live template updates properly when you do this (It will place the Dreamweaver-specific template lock code first before the doctype, thereby ensuring that your pages will throw Quirks mode in IE).
So what I did was move my conditional comment system away from the html tag, instead using them immediately after your opening body tag and immediately before your closing body tag like so:
<body>
<!--[if IE 6 ]> <div id="ie" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <div id="ie" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <div id="ie" class="ie8"> <![endif]-->
<!--[if gt IE 8 ]> <div id="ie"> <![endif]-->
<!--[if !IE]><div id="not-ie"> <![endif]-->
{YOUR HTML CODE}
</div>
</body>
This way, Dreamweaver places the doctype and html tag before the template lock code, and your resulting pages will appear in standards mode on IE (all things being normal).
Cheers.
Dreamweaver (incl. CS6) places the <!-- InstanceBegin template="... comment in front of the doctype tag only if it is unable to locate the opening <html> tag in your template! This happens when you forgot that tag altogether, but also when that tag is placed within conditional comments like this:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
To avoid this you have to refrain from enclosing the <html> tag within conditional comments. When you use a normal undisguised <html> tag in your template code, Dreamweaver will automatically place the <!-- InstanceBegin template="... after that <html> tag in all files derived from that template and IE will not fall into quirks mode.
Related
How can I convert following IE conditional statements in JADE language :
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
I have tried following but it is not working:
//if IE 8
html lang="en" class="ie8"
//if IE 9
html lang="en" class="ie9"
//if !IE
html lang="en"
// <![endif]
It is showing following output :
<!--if IE 8html lang="en" class="ie8"
-->
<!--if IE 9html lang="en" class="ie9"
-->
<!--if !IEhtml lang="en"
-->
<!-- <![endif]-->
Can some one guide me how it can be rectified.
Support for the //if IE 8 conditional comment syntax was removed few months ago: Git Commit
Version 0.35 was the last version to support them; v1.0 is the first release after the removal.
I've been using the literal style #Jayram uses; only differences being conditional logic à la h5bp and the closing html tag:
| <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
Note: Remember to close the document with | </html> since the initial html tag is not Jade's self-closing syntax.
This code should work as expected. It works with Jade version up to 0.35.0.
Please note that the last html element needs to be proper Jade element (that's why attributes are inside parentheses (...)). The first two elements are parts of comments and therefore should be formated as formatted HTML elements.
//if IE 8
<html lang="en" class="ie8">
//if IE 9
<html lang="en" class="ie9">
//[if !IE]><!
html(lang="en")
//<![endif]
Output in a page is as follows:
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
EDIT
As of version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and dropped support for IE conditional comments.
The new approach is to use well formatted IE conditional comments. It is safe to do so as now Jade ignores any line beginning with <.
Your code can be as follows:
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
html(lang="en")
<!--<![endif]-->
Note that html element will be handled by Jade (with all its features e.g. set class name from a request handling method) so you should NOT append | </html> at the end of your Jade file.
You can also refer to IE Conditional Comments in Jade Template Engine post for alternative of using Jade mixing with IE conditional comments.
I hope that will help.
Use it like this. This works for me.
| <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
| <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
| <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
I was just trying to make some snippets but I can't get any of them to work. Can anyone see what's wrong with this? I read their docs and thumbed some examples off the web but they don't work either. I've got it in my /sublime text 3/packages/user folder and it's named using convention myTest.sublime.snippet.
The snippet is:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html lang="en">
<!--[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]-->
<head>
<meta charset="utf-8">
<title>${1:test1|test2|test3} | $2</title>
<meta name="viewport" content="width=device-width">
<meta name="Description" lang="en" content="Description">
<meta name="robots" content="index, follow">
<meta name="robots" content="noodp, noydir">
<!-- Twitter Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
$3
</div>
</body>
</html>
]]>
</content>
<tabTrigger>page</tabTrigger>
<scope>source.html</scope>
<description>HTML5 Base HTML</description>
</snippet>
You should use text.html instead of source.html in scope block.
Sublime 3 needs snippets to have .sublime-snippet endings in file name.
Step1. For html snippet, please change
<scope>source.html</scope>
to
<scope>text.html</scope>
Step2. If you want sublime to show tooltips after you input the keywords, add this line
"auto_complete_selector": true
to your Preferences - Settings User file
You should escape dollar signs in your snippet. $ -> \$.
I had the same problem and what I did was :
Just remove <scope>source.html</scope> line present at the bottom of the snippet.
This is clearly an old thread, but it came up when I was searching on creating sublime snippets. The initial issue might be that you are typing in "page" as your tab trigger without first setting your syntax to html. You can do this quickly with shift + command/control + p then type sshtml then enter. Try your tab trigger again. Worked for me. Cheers.
Remove:
<description>HTML5 Base HTML</description>
Yes, this line comes from the official documentation, but at least in my instance (Sublime 3, Build 3114), it breaks the snippet. When I remove that line, the snippet works.
Also, as Jinglong above answered, add the following to your user preferences:
"auto_complete_selector": true
solved by..
removing <scope>source.html</scope>
adding "auto_complete_selector": true, to user settings
Background
My js/ snippets worked fine with <scope>source.html</scope> but for whatever reason, that line caused issues in my html/ snippets not.
I found the solution to my problem! I have been using the unicode setting for my keyboard for another project. When I changed my keyboard back to US, my problem was resolved. I'm sure this is an unusual issue, but in case anyone else is having this problem:
changing the keyboard back to US also reactivated some of the code navigation shortcuts (e.g., jumping word-to-word on a line by holding down option + arrow keys)
I am searching for an IE6 code which will redirect users from our brand new web page to an older version.
for example something along these lines
<!--[if lte IE6]>
<a href="http://etterengineering.com">
<![endif]-->
Thank you!
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0;url=http://example.com/" />
<![endif]-->
Put this in the head of your page and change the URl to the correct one. This will work even if the user has disabled JS.
Note that meta refresh is discouraged due to some associated drawbacks, but for your purposes should be good enough.
The alternative is to return HTTP 302 for IE6 user agent.
Try this:
<!--[if lte IE6]>
<script type="text/javascript">
window.location.href = "http://etterengineering.com";
</script>
<![endif]-->
i've been using jquery succesfully with almost any browser but ie6, i'm giving up i wish i could use a conditional statement like
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/style-for-ie.css" media="screen" />
<![endif]-->
To disable my scripts, is there anyway i can tell ie6 to stop loading something or to disable javascript altogether? or can i make a script.js for jquery that stops ie6 from loading certain functions?
I'm willing to use php to disable some code in my html if ie6 present, as long as is transparent to the user.
Thank you in advance
Use a downlevel-revealed conditional comment to place a class on the <body>:
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="notie6"><!--<![endif]-->
Now you can target selectors at IE6 or not-IE6, from both stylesheets (so you don't necessarily have to use a separate stylesheet) and scripts (either checking the class of document.body manually, or just using selectors like $('body.notie6 div.something') in jQuery).
There are conditional comments directly in JScript too, but, annoyingly, they only target particular JScript engine version numbers, which don't always tie up with IE version numbers. Using the HTML conditional comments for everything makes it more consistent.
For some reason my web page seems to work fine without a doctype, but doesnt if I specify any in full.
I have gone through various different templates without any success, i.e. code validators then dont like my code and/or it doesnt work.
The only thing "I get away with" is the top line below, but even then I cant specify any details, i.e. its just the beginning of the usual doctype declaration.
The page is the result of Drop down Stackoverflow question.
Also (and the reason why I want to specify type since this may be causing the problems) the page only fully works in IE. It only loads the first drop down in Chrome and doesnt load any in firefox.
I appreciate that above isnt overly clear, but the code is very short, so am hoping if pointed in the right direction I can complete it myself and/or describe other issues better.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Interface</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="dropdown.js"></script>
<html>
<body onload="show_results('','Type1')">
<form name="MainForm">
League:
<span id="FirstList"><b>First List.</b></span>
Team: <span id="SecondList"><b>Loading second list, please wait.</b></span>
<input type="button" value="Button1" onclick="show_results(form.select_second.value,'Type3');" />
<input type="button" value="Button2" onclick="show_results(form.select_first.value,'Type4');" />
Output: <span id="OutputTable"><b>Output table space holder.</b></span>
</form>
</body>
</html>
Managed to solve it myself, even with strict type
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
was perfectly fine after tidying up everything.