Rounded cornes fieldset at IE10

hassam2099 · 22 Aug 2014, 23:02

Hi everyone,

I have a Fieldset like this

 <p:fieldset legend="#{msgs['admin']}" style="margin-bottom:20px">
...
</p:fieldset>

and the css is as follows

Code: Select all

.ui-fieldset {
    -moz-border-radius: 10px 10px 10px 10px !important;
    -webkit-border-radius: 10px 10px 10px 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

When I check my ui in Chrome it works perefectly (the corners of the fieldset are rounded), but in IE8 the corners are not rounded (except if the fieldset does not have legend

)

Can anyone help me?

Thanks a lot

22 Aug 2014, 23:10

IE8 does not support rounded corners via border-radius.

hassam2099 · 22 Aug 2014, 23:54

Hi optimus,
Thanks for replying. My issue is not wih IE8 (sorry it was my mistake) is with IE10. Here I can see rounded corners but only for fieldsets that have no legend.

andyba · 25 Aug 2014, 14:41

You need to make sure that IE is running in native mode 10, IE has the annoying attribute of running in compatibility mode in Intranets which localhost is automatically a part of.
You can set the following in your template/pages to force IE to run in the highest mode available.

Code: Select all

<f:facet id="facetFirst" name="first">
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
</f:facet>

You need the "first" facet because the "x-ua-compatible" meta tag has to be the very first tag in the head section of your page.

hassam2099 · 25 Aug 2014, 17:25

Thanks a lot andyba. I tryed your suggestion but it didn't work

Code: Select all


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

    <h:head>
        <f:facet id="facetFirst" name="first">
            <meta http-equiv="x-ua-compatible" content="IE=edge" />
        </f:facet>
        <ui:insert name="htmlhead" />
        <h:outputStylesheet name="/css/default.css" />
        <h:outputStylesheet name="/css/estilos.css" />
        <ui:insert name="head">
            <title>DCompras</title>
        </ui:insert>
    </h:head>

    <h:body>...</h:body>
</html>

I also checked the antive mode, it is on.

Rounded cornes fieldset at IE10

Who is online