In a simple website, the use of Fieldsets to separate form content is a nice touch, but Internet Explorer and Firefox/Chrome do not round the edges like Internet Explorer does.
If you want round corners on FF and Chrome, you can use a little extra CSS:
fieldset {Â
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 7px;
-webkit-border-radius: 7px;
border-radius: 3px;
}
Here is what it looks like with default styling in some browsers:
| Internet Explorer 8.0 |  |
| Fieldset FireFox 3.6.3 |  |
| Fieldset Safari 5.0.1 |  |
| Fieldset Google Chrome 5.0.375.127 |  |
In IE8 it is not working.
Check the rest of your CSS styling, especially if you’re using a template as there may be something buried in there which you aren’t thinking about. If you have Firefox or don’t mind installing it, you can use a nifty little tool called Firebug which allows you to select elements on the page and peer into the code that created them. Absolutely essential ability for debugging website problems. Good luck!