Skip to content

Instantly share code, notes, and snippets.

@paranoiq
Created February 15, 2011 18:24
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save paranoiq/827956 to your computer and use it in GitHub Desktop.
Save paranoiq/827956 to your computer and use it in GitHub Desktop.
Cross-browser styling of <fieldset> and <legend> without any additional HTML elements
/*
Cross-browser styling of <fieldset> and <legend> without any additional HTML elements
basic rules:
- fieldset cannot have padding, because it would ruin the legend absolute positioning in Gecko
- cannot use relative positioning on legend, because it does not work in Opera
- legend cannot have padding, because it would break its 100% size in all browsers.
this cannot be fixed by overflow:hidden, because it is stupid in all IE
- selector priority in IE7 is wrong (!important)
- some emulations of paddings do not work in old browsers, but no content is ever hidden from user
*/
/* the hacking */
fieldset {
margin: 0px; padding: 0px; display: block; position: relative; width: 100%;
%border-top: none !important; /* for IE7, does not work with Webkit */
_padding-top: 3em; } /* for IE6 */
fieldset > * {
width: auto;
%width: auto !important; /* for IE7 */
margin-left: 1.5em; /* emulating fieldset padding-left */
margin-left: 1.5em !important; } /* for IE7 */
fieldset *:first-child + * {
margin-top: 3em; } /* emulating fieldset padding-top */
fieldset:last-child {
margin-bottom: 1.5em; } /* emulating fieldset pading-bottom */
legend {
width: 100%;
%width: 100% !important; /* for IE7 */
position: absolute;
top: -1px; left: -1px; /* hide the fieldset border */
margin: 0px !important; /* suppress all margin rules */
line-height: 2em; /* emulating padding-top/bottom */
text-indent: 1.5em; /* emulating padding-left */
%left: -8px; } /* for IE7 */
/* user format */
fieldset, legend {
border: 1px solid #ddd;
background-color: #eee;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
legend {
font-weight: normal;
font-style: italic;
font-size: 1.2em;
text-shadow: #fff 1px 1px 1px; }
fieldset {
background-color: #f7f7f7;
width: 360px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment