<!--[if lte IE 7]>
..
<![endif]-->
It means if the browser in use is less than or equal to Internet Explorer version 7 then include the code within the conditional comment block.
Here a good article about conditional comments
You may want to look at this article about Conditionals.
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
You may find this one interesting, at the bottom they go into various possible conditionals:
http://onhavinglayout.fwpf-webdesign.de/hack_management/
You will see this comment made about your question in my last link:
The linked stylesheet contains the needed layout-triggers for IE 5 | 5.5 | 6 | 7, example shown above.
Unsurprisingly, it is a comment processed by IE. If the IE version is at or, less than, the level (LTE) specified, it will process the code inside, otherwise it won't.
Related
i have the following CSS code:
.massp_text_box p {
font-size: 20px;
font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
color:#dadbdc;
}
As I only have the font in .otf and .ttf I can not support IE. In that case IE takes Arial as the font. In that case the font-size should not be 20px - it should be 18px.
How can I tell my CSS code "If Eurostile-Bold is not supported, take font-size:18px."
Any idea?
Thanks!
you could target ie with conditional comments and/or conditional compilation in this case, but you can also create the formats you need via http://fontsquirrel.com
I would suggest that you create an IE-only stylesheet so that you can set those values specifically for IE. Microsoft has implemented a solution for accomplishing this called "Conditional Comments". The way they work is conditional comments are only registered when a user is visiting your site with Internet Explorer, and all other web browsers will ignore the comment and any code nested inside of a conditional comment.
In order to use them in your case you'd need to do the following:
1] Create a new stylesheet called ie.css, and place it in the same directory as your original CSS file.
2] Place the same CSS code you normally would to target .massp_text_box p into the ie.css file, but change the font-size to 18px. I used your sample code, but feel free to change these styles to whatever you want, as IE will be the only browser that uses them:
.massp_text_box p {
font-size: 18px;
font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
color:#dadbdc;
}
3] Lastly, in your HTML code, you'll need to place the conditional comment nested in your <head> tag like you would a normal stylesheet, and be sure to change the href= so that it links to the correct location of the ie.css stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
*Note: This conditional comment targets all versions of IE, but you have the option to target only specific IE versions if you so desire. See the extra reading to learn how to do that, but for your immediate needs, the above code should suffice.
Extra Reading:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I'm using the IE 11 (version 11.0.9431.0), to test our current website and see how it would work when IE 11 will be released with Windows 8.1 mid-October.
What I see on almost all pages is the following message:
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
When I look through the source code, there is no second <body> anywhere. Is this a IE 11 bug? Is this something I should take seriously? The pages work fine btw...
Thanks.
EDIT:
I don't have access to that website anymore, therefore I can't try any new solutions you guys are posting.
If you placed some element (that should appear only inside body) before the <body> tag, the <body> is inserted automatically by the parser (the "Anything else" paragraph) - and this is still valid HTML because body has optional both opening and closing tags. That would mean that the actual <body> is the second one the parser sees. Couldn't this be your case?
My guess is you probably have if IE statements, something like:
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
They don't actually work in IE10, let alone IE11 so that's why you'd be getting the extra tag found.
The problem (which is present in IE 10, too) is caused by the element
<script type="text/javascript" src="/_clients/binck_nl/data/js/analytics.js?nl_1377516473" ></script>
It probably modifies the DOM so that IE gets confused.
it's probably your body tag in the css. Replace the body-tag in the css with a class for example .bodystyle {} and refere in your html to it with the tag. That should do the trick.
Hi this may be a very late for suggesting. But, just to help others the probable cause may be any iframe coming in the page which has body tag
I had this same effect showing up in IE10 and IE11 saying there was an extra body tag in the console. What fixed it for me was that I found an element outside of the body that was a div for a spinner while the page loads that should have been within the body.
My guess is that it may be content in the header part which Edge wants in the body part. (If you have a header part).
This works in any other browser but Edge.
I solved this by removing: <header><title>something</title></header> from the tag body. Now edge no longer complains.
<!-- <script type="text/javascript">/*<![CDATA[*/ c-- ;//]]></script> -->
When I have the above line in the <head> section of a plain html page, Firefox 3.5.5 renders the trailing --> as text. If I change c-- to c- it doesn't. Any ideas what's going on here? I getting an artifact on my pages with this due to a very large script that's been crunched. I can change the statement to c-=1 and avoid the problem for now but.... I'd like to know what bit/byte is biting my a$$.
This is due to Firefox implementing SGML (on which HTML was based) comments strictly. This will only occur when the document is loaded in standards mode (i.e. there is a DOCTYPE).
The first <! starts a comment. The first -- enters a section in which > characters are allowed. The second -- (in your script) leaves the section in which > characters are allowed. The > at the end of </script> then ends the comment. The following --> is therefore no longer part of the the comment and gets rendered as text.
See http://www.howtocreate.co.uk/SGMLComments.html for a comprehensive guide to the issue.
Its also worth noting that the HTML 4 Specification says that 'authors should avoid putting two or more adjacent hyphens inside comments' and the HTML 5 Specification says comments must not 'contain two consecutive U+002D HYPHEN-MINUS characters (--)'.
The solution, as you've found, is to not include -- in the middle of a comment.
Technically you are not allowed to have double hyphen in a comment in HTML (or XML). So even if browsers "allow" if it is not valid and should fail an HTML validator.
See Comment section of HTML 4 Specification
I can't replicate this. Doesn't show up on 3.0.1.
Can I use specific html if the browser is IE? (Assuming FF is the default browser)
Foe example:
html line 1
if IE
html line 2
else
html line 2
html line 3
html lin3 4
I am aware of using different CSS, but that won't work for this.
Thanks.
Sure - conditional comments
IE understands "conditional comments," which you can use to selectively show markup even to specific versions. Here's an introduction:
http://www.quirksmode.org/css/condcom.html
I'd like to offer a bit more explanation, since a solution to your question necessarily involves both "downlevel-revealed" and "downlevel-hidden" conditional comments. Both work very well in Internet Explorer, but it's in non-Microsoft browsers that the distinction becomes important:
Content inside "Downlevel-revealed" conditional comments will always display in non-Microsoft browsers (since they do not follow the standard <!-- --> syntax of HTML comments).
Content inside "Downlevel-hidden" conditional comments (which seem to be discussed more often) will never show up in other browsers (since they do follow the standard <!-- --> syntax of HTML comments).
So, marking up your example code:
html line 1
<!--[if IE]>
html line 2
<![endif]-->
<![if !IE]>
html line 2
<![endif]>
html line 3
html lin3 4
You could use conditional comments for code only IE reads:
<!--[if IE]>
IE only code here.
<![endif]-->
Or PHP:
<?php
function ae_detect_ie()
{
if (isset($_SERVER['HTTP_USER_AGENT']) &&
(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
return true;
else
return false;
}
?>
<?php if (ae_detect_ie()) { code here } else { code here } ?>
Ryan
One way you can do this is using Javascript to check which browser is being used. You could have default HTML in your file and then hava Javascript change it out, or add to it, if the user is using IE.
Given the code (which looks like it should be valid):
<!--[if lt IE 7]> <style type="text/css" media="screen">
<!--
div.stuff { background-image: none; }
--></style><![endif]-->
The W3C validator throws a fit:
S separator in comment declaration
invalid comment declaration: found name start character outside comment but inside comment declaration
character data is not allowed here
etc etc
I'm not totally sure whats going on. Is it the 'nested' comments? The tag is being generated by the Zend Framework Viewhelper headStyle
$this->headStyle()->prependStyle('div.stuff { background-image: none; }',
array('conditional' => 'lt IE 7')
);
You can't have a -- inside of a comment unless it's part of the --> ending in valid XML/XHTML. Just the way comments work.
From this source:
For Compatibility, the string "--" (double-hyphen) MUST NOT occur within comments.
You should find a more standard way to differentiate between browsers (or, more ideally, have a layout that doesn't require differentiation between browsers at all).
"-->" closes any comment, there is no notion of nesting comments inside each other. So in your code, the first "-->" closes both of your comments. Then the <![endif]--> is completely outside of any comments, so doesn't make any sense.
It is the nested comments. They are not allowed.
...and why comment out the entire contents of <style>? It's not as if you're coding for a browser that is dumb enough to display it. (Even command-line browsers hide the style/script blocks.)
Edit: Ah, wait. That's generated by Zend.
You should post new issue on issue tracker. It's a good way to make such mistakes corrected.
http://framework.zend.com/issues/secure/Dashboard.jspa
The answer given by Phil Booth is correct in that your HTML comment syntax is incorrect; HTML comments cannot be nested. However, I'd like to take it a step further...
You should not use HTML comments to hide your CSS or JavaScript from XHTML validation. Instead, you should use CDATA tags. This is the most universal solution, supporting pretty much every browser and browser version new and old.
<head>
<style type="text/css">
/* <![CDATA[ */
div.stuff { background-image: none; }
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
function myFunction() {
}
/* ]]> */
</script>
</head>
These articles go into more detail about why the aforementioned solution is the correct one:
JavaScript and XHTML.
Yes, this article is about JavaScript, but the same idea applies to CSS.
9 Requirements to make your pages XHTML compliant