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.
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.