Made CSS rules for fieldset lists more specific

This will make conflicts with other rules less likely. Tested in Chromium/Mac TRUNK, Safari 4.0.4 Mac, Firefox 3.5 Mac, IE8, IE8 compat. view without any noticable differences.
linojon · Mar 1, 2010 · 9efd185 · 9efd185
1 parent 38479e7
commit 9efd185
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 49 deletions.
diff --git a/generators/formtastic/templates/formtastic.css b/generators/formtastic/templates/formtastic.css
@@ -45,100 +45,100 @@ html[xmlns] form.formtastic fieldset { display: block; }
 
 /* INPUT LIs
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li { margin-bottom:1.5em; }
+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.required { }
-form.formtastic fieldset ol li.optional { }
-form.formtastic fieldset ol li.error { }
+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.required { }
+form.formtastic fieldset > ol > li.optional { }
+form.formtastic fieldset > ol > li.error { }
 
 
 /* LABELS
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; }
-form.formtastic fieldset ol li li label { line-height:100%; padding-top:0; }
-form.formtastic fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}
+form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; }
+form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; }
+form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}
 
 
 /* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li fieldset { position:relative; }
-form.formtastic fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
-form.formtastic fieldset ol li fieldset legend span { position:absolute; }
-form.formtastic fieldset ol li fieldset legend.label label { position:absolute; }
-form.formtastic fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
-form.formtastic fieldset ol li fieldset ol li { padding:0; border:0; }
+form.formtastic fieldset > ol > li fieldset { position:relative; }
+form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
+form.formtastic fieldset > ol > li fieldset legend span { position:absolute; }
+form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; }
+form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
+form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; }
 
 
 /* INLINE HINTS
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }
+form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }
 
 
 /* INLINE ERRORS
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
-form.formtastic fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
-form.formtastic fieldset ol li ul.errors li { padding:0; border:none; display:list-item; }
+form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
+form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
+form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; }
 
 
 /* STRING & NUMERIC OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.string input { width:74%; }
-form.formtastic fieldset ol li.password input { width:74%; }
-form.formtastic fieldset ol li.numeric input { width:74%; }
+form.formtastic fieldset > ol > li.string input { width:74%; }
+form.formtastic fieldset > ol > li.password input { width:74%; }
+form.formtastic fieldset > ol > li.numeric input { width:74%; }
 
 
 /* TEXTAREA OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.text textarea { width:74%; }
+form.formtastic fieldset > ol > li.text textarea { width:74%; }
 
 
 /* HIDDEN OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.hidden { display:none; }
+form.formtastic fieldset > ol > li.hidden { display:none; }
 
 
 /* BOOLEAN OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.boolean label { padding-left:25%; width:auto; }
-form.formtastic fieldset ol li.boolean label input { margin:0 0.5em 0 0.2em; }
+form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; }
+form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; }
 
 
 /* RADIO OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.radio { }
-form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em; }
-form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
-form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; }
-form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }
+form.formtastic fieldset > ol > li.radio { }
+form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.6em; }
+form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
+form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; }
+form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; }
 
 
 /* CHECK BOXES (COLLECTION) OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.check_boxes { }
-form.formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom:-0.6em; }
-form.formtastic fieldset ol li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
-form.formtastic fieldset ol li.check_boxes fieldset ol li label { float:none; width:100%; }
-form.formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right:0.2em; }
+form.formtastic fieldset > ol > li.check_boxes { }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.6em; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; }
+form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; }
 
 
 
 /* DATE & TIME OVERRIDES
 --------------------------------------------------------------------------------------------------*/
-form.formtastic fieldset ol li.date fieldset ol li,
-form.formtastic fieldset ol li.time fieldset ol li,
-form.formtastic fieldset ol li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
+form.formtastic fieldset > ol > li.date fieldset ol li,
+form.formtastic fieldset > ol > li.time fieldset ol li,
+form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
 
-form.formtastic fieldset ol li.date fieldset ol li label,
-form.formtastic fieldset ol li.time fieldset ol li label,
-form.formtastic fieldset ol li.datetime fieldset ol li label { display:none; }
+form.formtastic fieldset > ol > li.date fieldset ol li label,
+form.formtastic fieldset > ol > li.time fieldset ol li label,
+form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; }
 
-form.formtastic fieldset ol li.date fieldset ol li label input, 
-form.formtastic fieldset ol li.time fieldset ol li label input, 
-form.formtastic fieldset ol li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }
+form.formtastic fieldset > ol > li.date fieldset ol li label input, 
+form.formtastic fieldset > ol > li.time fieldset ol li label input, 
+form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }
diff --git a/generators/formtastic/templates/formtastic_changes.css b/generators/formtastic/templates/formtastic_changes.css
@@ -5,6 +5,6 @@ This will allow you to update formtastic.css with new releases without clobberin
 
 For example, to make the inline hint paragraphs a little darker in color than the standard #666:
 
-form.formtastic fieldset ol li p.inline-hints { color:#333; }
+form.formtastic fieldset > ol > li p.inline-hints { color:#333; }
 
 --------------------------------------------------------------------------------------------------*/