I have a CSS quandary.
If I do this:
<!--[if gte IE 8]> <link href="/ELS_Soulard_Project-web/css/soulard_base_ie_butchery.css" rel="stylesheet" type="text/css" media="screen, projection" /> <![endif]-->
That line of code shows up across the top of IE 9 and the css file that gets the IE fonts under control and provides background gradient isn't read. But... the page looks great in Firefox and Chrome.
If I change the statements to:
<!--[if gte IE 8]><!--> blah blah blah <!--<![endif]-->
variety, it looks great in IE 9 and Chrome.... BUT! Firefox ends up actually reading the file and ends up shrinking its own fonts and changing line height so that it all looks like ugly double spacing. I know Firefox is reading it because I went to the file meant only for IE and changed things in and it was reflected in Firefox.
Can someone help me figure out what is going on?
This is running on Glassfish 3.1.2.
In your second example you have added <!--> inside your conditional comment. That way the conditional comment is still open, but the HTML-comment is closed and the code in between is rendered by any browser.
Compare to this chunk:
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="de-DE">
<!--<![endif]-->
The last tag is excluded for several IE versions, but included for any non-MS browser and IE >= 9.
So here was the problem. I am using facelets and this was in the template file. What I didn't realize is that conditional statements as normally applied don't work with facelets. When processed by the servlet it just trashes anything it doesn't 'get' and so all stylesheets are read.
If you want to use conditional statements with facelets you have to put them in something like an element. It can get ugly.
Fortunately a stacker named BalusC has come up with a clever library that includes a tag for taking care of conditional statements. After a day of trying everythign every which way and looking everywhere on this, I finally found a single post that mentioned this issue with facelets and conditional statements. That lead to a Google code page for an 'Omnifaces' project where the tag (and a bunch of other useful features) is documented.
The library is available by way of maven (where I got it) but possibly other ways. Anyway from reading the post to fixing the code was all of about a half hour if that.
Facelets plus IE conditional statements = bad news.
Use outputText or Omnifaces or write your own component.
Related
Have been running some accessibility checkers our website and they seem to indicate lang tag is empty.
Initially I thought the problem was caused because language was setup to be en-US. So I changed it to en-UK
Here is the code on header.php
<!DOCTYPE html /><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
On wp-config.php I have set define('WPLANG', 'en-GB');. Have also downloaded a localised version of Wordpress. Created a languages subdirectory within wp-content and uploaded the en_GB.mo file onto it.
When I run this on the accessibility checker I am still getting an error saying lang tag is empty
http://wave.webaim.org/report#/http%3A%2F%2Fwww.warwickshire.gov.uk%2F
Could anybody point me in the right direction to fix this as it's being flagged up by other accessibility audits run on the site.
Many thanks.
There can be two reasons, the first one is that you missed using xml:lang attribute, also this is not mandatory. Maybe, Wave do care about it?
<html xml:lang="en_US" lang="en_US">
The second one, is the way you define your html tag which can cause problem to the Webaim parser.
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en-GB"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en-GB"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en-GB"><!--<![endif]-->
Note that the starting comment <!--> in the last line is not the same as <!-- --> See: http://www.w3.org/TR/html-markup/syntax.html#comments
I think that it's more some kind of parse error thing (I don't think Wabaim WAVE uses Webkit parser).
--- EDIT
After installating WAVE extension for Chrome, I can see that it does not return the error concerning the language of your page.
In fact, when you look closer at their online tool, they load a proxied version of your webpage, http://wave.webaim.org/data/getpage.php?reportkey=, with an html tag lacking of this attribute. So it is definitely a problem with the Wave parser.
So I suggest you to use the Chrome extension, which will be a better solution to pre-test your website as it does not modify your tag.
You can get this problem even without the IE conditional comments in there. I have / had (depending on when you may read this) a website with just this start:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- etc -->
And it also pops up with the error. I sent in this bug report:
WAVE feedback sent at 10:54 AM, October 11th, 2015
URL: http://wave.webaim.org/report#/http%3A%2F%2Fwww.jeroenheijmans.nl
The URL in question (a wave report of my index page on www.jeroenheijmans.nl) reports a missing "lang" attribute on the "html" element. However, the element is clearly there (if you open the site on its own in a seperate tab and view the source you'll see this). I get this both with Chrome and Firefox latest version on Windows 8.1. I've also tried Chrome incognito mode.
It does seem that if I choose "View Frame Source" on my page inside the WAVE tool that I get a source without the "lang" attribute. I might be experiencing the same issue as https://stackoverflow.com/q/28692421/419956 where it's suggested that the problem is with the way WAVE loads the page under evaluation.
And received the following feedback:
This is a known bug with WAVE that will be fixed in a release in the
very near future.
Thanks,
Jared Smith
WebAIM.org
In short, you're fine. You can try the workaround suggested in the other answer by #Adam, or just ignore the error safely.
In order to fix this problem you have fix two tags for your tool to stop pointing accessibility error. You have to set both "lang" as well as "xml:lang" tag. One way to achieve this through pure Javascript is below. I am proposing this solution as it is independent of any platform.
(function() {
document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
document.getElementsByTagName('html')[0].setAttribute('xml:lang','en-US');
})();
You may replace 'en' with language of your choice to correctly point the correct language in place
Good day,
I want to apply two different CSS codes to fix some font-rendering issue (faux bold) in IE8, the latter cannot recognize all the font-family if they've got the same name, instead it only recognize the first font-family, so i'm attempting to use conditional comments to fix that :
First code is for older versions of IE (including IE8) :
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Second one is for IE9, IE10 and all non-IE browsers (Chrome, Firefox, Opera, Safari...), none of them has this faux bold issue :
<!--[if IE 9 | !IE]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I know the first code is correct (or maybe not :p) , so i want to know if the second is correct too, because i don't get what i expect when i change compatibility mode in IE, certainly there is something wrong in the condition [if IE 9 | !IE]
I also want to know the correct order (if there is one) to put those two conditional comments.
Please help me with this because i'm kind a newbie in anything related to compatibility :/
You could apply the css for IE9+ and other browsers first, and then apply the conditional comment for IE8 or less, so the rules for font-family in fonts.css would be overridden by the rules in IE8fonts.css, if the browser is less than or equal to IE8. This way you can avoid complex and unnecessary conditional comments.
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Hope it helps.
Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with <!-- and ends with -->. Hence <!--[anything]> is the beginning of a normal comment, and non-IE user-agent will ignore anything after that until the next occurence of -->. On the other hand <!--[anything]><!--> is a full comment and non-IE browsers will process whatever is after that.
So I suggest you use:
<!--[if gte IE 9]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
From the point of view of a regular HTML parser (non-IE), this is two regular comments enclosing a link element.
Currently I am working on a webpage and need to set a style only for IE. I am using a conditional comment:
<!--[if IE]>
<link rel="Stylesheet" href="../../IEstyles.css" rel="Stylesheet" />
<![endif]-->
Is this the best way of doing this or would using javascript be the best practice?
That's nearly the best practice. You should probably instead be checking for [if lt IE 9], because IE 9 supports CSS pretty well, but definitely don't use browser-sniffing JavaScript. That's almost always the worst solution to a problem.
Html5Boilerplate is the site for best practices and here's what they suggest:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
This allows you to keep one stylesheet and just prepend any of the above classes to target a specific conditional hack.
Not everyone has JavaScript enabled - HTML comments are supported in every mainstream browser that I know of.
As this is just a stylesheet, and therefore a UI concern, I would avoid javascript and just use the conditional comments to target IE. This then also gets around the issue of people who have javascript disabled, should you try and do some kind of browser sniffing.
Use Conditional Comments. They prevent other browsers from having to download/run any scripts, yet have the benefit of always working for IE users.
Using the conditional would be the best idea, as you have no guarantee that the visitor won't have javascript disabled, or scripting disabled. Where as this will only work in IE browsers, other browsers will ignore it, where as all browsers will process Javascript, whether it's for IE or not.
Javascript can be disabled, so I'd say conditional comments are the best way to serve IE-specific CSS.
I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.
In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?
Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.
http://jsfiddle.net/LsXTk/1/
IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS's part with IE. (Yes, I'm being sarcastic):
http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx
What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.
As for detecting IE8, you can do it without JavaScript via IE's conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
Then in your css, you can easily serve up separate CSS as needed:
.myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
I have a problem with HTML 5 on my blog. I have made some small tiny changes to the default Twentyeleven theme and they site now blows up on IE6, IE7 and IE8.
Since I've started looking under the hood I've been thinking of re-skinning the site myself in HTML 4 Strict doctype.
Taken from the current markup: isn't all this a whole bunch of nonsense?
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://www.example.com/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
All this conditional formatting, for what? If the world isn't ready for it, why use HTML 5 at all?
Is there ANY technical reason to do that? Is my site ever going to validate if I take the HTML 4 route? Will I have to override the output of all plugins I'm using?
Looking forward to your comments.
There is no definitive answer to this question. It depends on the users (specifically, which browsers they are running) and requirements of the site.
Some sites need bleeding-edge technology or rapid design changes, both situations with which HTML5/CSS3 can help. Other sites are very simple and stable, and HTML5 is entirely optional.
There's no need to use HTML5 just because you can - if you can do everything you want to do in HTML4, use that.
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
Is it typo? Closing conditional comment tag missed. Add this code after yours
<![endif]-->
Maybe it will help.
Second. If you have different opening html tag for dfferent versions of IE, how do show this tag for other browsers? Conditional comments are understood only by IE.
More information more help.