Primefaces menubar style is broken on IE 8

StackOverflow https://stackoverflow.com/questions/19548564

Question

I have a simple menuBar in my application and works very nice on chrome and firefox. But, when I tested with IE 8, the style of menubar is broken. I think is just style because the links are working fine. Below, a screenshot of my menu on IE 8: MenuBar on my IE 8

And my menubar code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition>
        <h:form id="menuForm">
            <p:menubar id="appMenu">
               <p:menuitem value="Celulares" url="#{menuMB.toMeusCelularesIndex()}" rendered="#{p:ifAnyGranted('USER')}" />

                <p:submenu label="Celulares (Admin)" rendered="#{p:ifAnyGranted('ADMIN')}">
                    <p:menuitem value="Titulares" url="#{menuMB.toCelularTitularIndex()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                    <p:menuitem value="Agregados" url="#{menuMB.toCelularAgregadoIndex()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                </p:submenu>

                <p:submenu label="Faturas" rendered="#{p:ifAnyGranted('ADMIN')}">
                    <p:menuitem value="Titulares" url="#{menuMB.toFaturaTitularIndex()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                    <p:menuitem value="Agregados" url="#{menuMB.toFaturaAgregadoIndex()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                </p:submenu>

                <p:submenu label="Sistema" rendered="#{p:ifAnyGranted('ADMIN')}">
                    <p:menuitem value="Forçar Login" url="#{menuMB.toForcarLogin()}" rendered="#{p:ifAnyGranted('ADMIN')}"/>
                    <p:menuitem value="Fazer Checkup" url="#" rendered="#{p:ifAnyGranted('ADMIN')}" />
                    <p:menuitem value="Administradores" url="#{menuMB.toAdministradores()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                    <p:menuitem value="Parâmetros do Sistema" url="#{menuMB.toParametrosIndex()}" rendered="#{p:ifAnyGranted('ADMIN')}" />
                </p:submenu>

                <p:menuitem value="Sair" url="#{menuMB.toLogout()}" rendered="#{p:ifAnyGranted('USER')}" />
            </p:menubar>
        </h:form>
    </ui:composition>
</html>

I accessed the menubar showcase, and it works on IE 8. I can only imagine that I've made some mistake on my code. I am currently using:

  • Primefaces 4.0,
  • MyFaces 2.1.12
  • Tomcat 7.0.42.

If you need more information, please let me know.

Était-ce utile?

La solution

Check your developer tools in IE8 when you open your website where style broken and Primefaces showcase and check for document mode and browser mode in two cases.See you find any differences when you load two websites. Check out these links to know more about this behavior

http://social.msdn.microsoft.com/Forums/ie/en-US/afb57ce6-d149-4a09-8811-63c0645c92e6/force-ie8-to-render-in-ie8-standard-mode?forum=iewebdevelopment

This link tells how to force IE8 to open in the mode which does not break your CSS programmatically by specifying in your XHTML file

http://blog.primefaces.org/?p=1433

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top