IE9 fieldset rounded corners

I cannot seem to make IE9 render a fieldset with rounded corners whereas other browsers do. Has anyone encountered this too ?

Answers


This happens only if you use <fieldset> with <legend> - without it the corners render ok.

You can fix this bug by applying display:inline or display:inline-block to your <legend> element - but than you have to reposition it back in place by setting position:relative and moving it around.

Depending how the styling of your legend looks like (with background it will look the same - without the background the border of fieldset will still be visible behind the letters) you can make it look pretty much the same as in other normal browsers.


From my experence in the latest version of IE9, I can not get a fieldset with legend to have a radius. I have not had any trouble with other borders in IE9, the css3 border-radius works just fine, just fieldset/ledgend. I'm still scratching my head over this.


I too used to use fieldset and for more than just forms, but the constant hit and miss on compatibility has caused me to dump them. Better to write your own CSS DIV Classes that emulate fieldset. Using CSS you can get an exact replica of what fieldset looks like and you have a lot more flexibility and compatibility


its only working in latest rc build , aint working in beta version of IE9 try


.class {
 border-radius-right-bottom: 15px;
}


<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

This is how to fix it.


It is still problem under IE11 when using legend , and the solution is in this thread:

Rounded corners on a fieldset

 fieldset {
        margin:20px;
        padding:0 10px 10px;
        border:1px solid #666;
        border-radius:8px;
        box-shadow:0 0 10px #666;
        padding-top:10px;
 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/


Fieldset rendering is always fraught with problems with rendering and particularly with printing. It's hardly surprising that it doesn't work.

The standard workaround is to add another container and style that.


To get IE9 to use rounded corners(CSS 3) you have to add this to the HTML header:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Then use CSS as normal: border-radius-right-bottom:15px;

I had the same issue & this fixed it.


I had an access only to CSS file, so I could not make any changes in HTML, so I made the hack in CSS for IE.

HTML structure was:

<form>
  <fieldset>
      ...form content...
  </fieldset>
</form>

The whole CSS for all browers and with IE hack:

fieldset {
    border-radius: 20px;
    border: 1px #3D3D3D solid;
}
@media screen and (min-width:0\0) {
    form {
        border: 1px #3D3D3D solid;
        border-radius: 20px;
    }
    fieldset {
        border: 0 none;
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

Of course, if your site has another html-structure, this will not work. Therefore instead "form" you can apply in css to a parent div of your fieldset.


Need Your Help

Gridview OnItemClickListener Not Working But Why?

android gridview toast onitemclicklistener android-adapterview

I have a base adapter and gridview. I'm populating items with adapter gridview. When user touches any item, I want to show a toast. But it's never shown.

How do I use JList inside of JPanel So I can set the bounds of the list?

java swing jpanel jlist setbounds

I am having trouble using JLists in Java. I have watched video tutorials on how to use them, but they all use them with some sort of layout. I would like to have it so the "setPreferedLayout" is nu...