Internal Stylesheet Not Working in Ie9 with Jsf

Internal stylesheet not working in IE9 with jsf

I checked your website chennaivolunteers.org and I noticed that FacesServlet is been mapped on an URL pattern of /faces/* instead of *.xhtml. As you're using only relative <link> and <script> resource references, they will (unnecessarily) go through the FacesServlet as well.

IE9 sends for CSS files a Accept-Header of text/css while other browsers sends a Accept-Header of text/css;*/*. The FacesServlet itself is not supposed to respond on text/css requests.

There are basically 2 ways to fix this:

• Get rid of the /faces/* mapping and replace it by *.xhtml.

  <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  

• Use domain-relative URLs in <link> and <script> (and <img>) references so that they never go through the /faces path.

  <ui:param name="root" value="#{request.contextPath}/" />
  <link href="#{root}cv_website_styles.css" rel="stylesheet"  type="text/css" />
  <link rel="stylesheet" type="text/css" href="#{root}css/style.css"/>
  <script type="text/javascript" src="#{root}js/jquery.min.js"></script>
  <script type="text/javascript" src="#{root}js/script.js"></script>
  

  Or use the <base> tag, or use <h:outputStylesheet> and <h:outputScript> with a name instead.

Your site has by the way quite some 404's on several resources. Fix that as well. Check the "Net", "Network" section of the browser's builtin web developer toolset (press F12 in IE9/Chrome/Firebug).

intranet jsf application opening in compatibility mode in IE9

In jsf PrimeFaces you have to use the following to reorder the tags

<f:facet name="first">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </f:facet>

It moved the meta to the top of the generated header using that code and it worked

from the following link

CSS display:inherit in IE9

This looks like an IE9 bug.

I agree.

Unfortunately in the problem that I'm trying to fix, specifying
display:inline explicitly on these elements is not a viable solution.

Adding span { display: inline } at the start of your stylesheet solves the problem, and I can't see why adding that is not a viable solution. It makes no difference whatsoever in any other browser.

IE9 css media queries not working properly...Works fine everywhere else

I fixed it. It seems like there were two things causing problems with IE. First I moved the default code for errors to another another media query for 481 and more:

@media screen and (min-width: 481px) {
  #my-form .error {
    position: absolute;
    width: 150px;
    right: -171px;
    margin-right: -20px;
    top: 50%;
  }
}

And then I used floats instead of inline-block. Seems like IE still has problems with inline-block:

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    float: left; // Here
    clear: left;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
}

Demo: http://jsfiddle.net/elclanrs/BMz9U

Why inline JavaScript is not working in Internet Explorer 9?

Kolink has the correct answer as to why the problem is occuring, but if you have the option of using JQuery I recommend the following solution (fiddle) which is more stable for cross browser coding.

The core change is this JQuery selector and the JQuery toggle function;

 $('[id="comnr"][class="show_hide"],#comknap').toggle();

I used three features of JQuery selector here.

The first selection feature used is the multiple-attribute selector which itself is a combination of two attribute equals selectors as requirements:

//A selection of elements whose id is "comnr" and whose class is "show_hide"
var selectionByMultipleRequirements= $('[id="comnr"][class="show_hide"]');

The second selection feature used is the id selector:

//A selection of elements whose id is "comknap"
var selectionById = $('#comknap');

The third selection feature used is the multiple selector which allows us to combine the previous selections into a list of separate criteria sets (selections returned match at least one of the sets of criteria, each set being separated by a comma):

//A selection of elements who either have an id of "comnr" and whose class is "show_hide" OR have an id of "comknap"
var selectionByMultipleCriteria = $('[id="comnr"][class="show_hide"],#comknap');

---

Related Topics