Permalink
Browse files

Changed CSS to work better with HTML4/5:

* changed styles to clear containing floats on fieldsets and list items with a more modern clearing technique that doesn't rely on XHTML attributes on the HTML tag
* removed a double declaration that's no longer required now that the xmlns rules are removed

Checked in IE7/8, FF3.6 & Safari 5. The overflow technique should work in pretty much everything except IE6. Add zoom:1; for IE6 support.
  • Loading branch information...
1 parent 084ce3b commit 2f381ba07e6e50cd184c63bad4a939ce34151193 @justinfrench committed Aug 9, 2010
Showing with 3 additions and 18 deletions.
  1. +3 −18 generators/formtastic/templates/formtastic.css
@@ -30,28 +30,16 @@ form.formtastic ul.errors li { padding:0; border:none; display:list-item; }
/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset { }
+form.formtastic fieldset { overflow:auto; } /* clearing contained floats */
form.formtastic fieldset.inputs { }
form.formtastic fieldset.buttons { padding-left:25%; }
form.formtastic fieldset ol { }
form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }
-/* clearfixing the fieldsets */
-form.formtastic fieldset { display: inline-block; }
-form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
-html[xmlns] form.formtastic fieldset { display: block; }
-* html form.formtastic fieldset { height: 1%; }
-
-
/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li { margin-bottom:1.5em; }
-
-/* clearfixing the li's */
-form.formtastic fieldset > ol > li { display: inline-block; }
-form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
-html[xmlns] form.formtastic fieldset > ol > li { display: block; }
-* html form.formtastic fieldset > ol > li { height: 1%; }
+form.formtastic fieldset > ol > li { overflow:auto; } /* clearing contained floats */
form.formtastic fieldset > ol > li.required { }
form.formtastic fieldset > ol > li.optional { }
@@ -100,11 +88,8 @@ form.formtastic fieldset > ol > li.text textarea { width:74%; }
/* HIDDEN OVERRIDES
-The dual declarations are required because of our clearfix display hack on the LIs, which is more
-specific than the more general rule below. TODO: Revist the clearing hack and this rule.
--------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.hidden,
-html[xmlns] form.formtastic fieldset ol li.hidden { display:none; }
+form.formtastic fieldset ol li.hidden { display:none; }
/* BOOLEAN OVERRIDES
--------------------------------------------------------------------------------------------------*/

0 comments on commit 2f381ba

Please sign in to comment.