fix bugs 244: different display of checkbox in IE/firefox and 484: Missing onfocus/onblur

	in some user section *.tpl and many admin section *.tpl 
	handle FORM elements with a behaviour (inputfix.htc) in IE
	the behaviour sets onfocus and onblur events too (no longer needed in *.tpl)
	other browsers use css selector :focus and [type=___]

git-svn-id: http://piwigo.org/svn/trunk@1491 68402e56-0260-453c-a942-63ccdbb3a9ee

12 files changed, 65 insertions, 81 deletions

diff --git a/template/yoga/admin/configuration.tpl b/template/yoga/admin/configuration.tpl
index ea4c202c6..5cb3a56d5 100644
--- a/template/yoga/admin/configuration.tpl
+++ b/template/yoga/admin/configuration.tpl
@@ -17,21 +17,21 @@
       <span class="property">
         <label for="gallery_title">{lang:Gallery title}</label>
       </span>
-      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" />
     </li>
 
     <li>
       <span class="property">
         <label for="page_banner">{lang:Page banner}</label>
       </span>
-      <textarea class="description" name="page_banner" id="page_banner" onfocus="this.className='description focus';" onblur="this.className='description nofocus';">{general.CONF_PAGE_BANNER}</textarea>
+      <textarea class="description" name="page_banner" id="page_banner">{general.CONF_PAGE_BANNER}</textarea>
     </li>
 
     <li>
       <span class="property">
         <label for="gallery_url">{lang:Gallery URL}</label>
       </span>
-      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" />
     </li>
 
     <li>
@@ -76,7 +76,7 @@
       <span class="property">
         <label for="nb_comment_page">{lang:Number of comments per page}</label>
       </span>
-      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" />
     </li>
 
     <li>
@@ -96,7 +96,7 @@
       <span class="property">
         <label for="default_language">{lang:Language}</label>
       </span>
-      <select name="default_language" id="default_language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      <select name="default_language" id="default_language">
         <!-- BEGIN language_option -->
         <option value="{default.language_option.VALUE}" {default.language_option.SELECTED}>{default.language_option.CONTENT}</option>
         <!-- END language_option -->
@@ -107,21 +107,21 @@
       <span class="property">
         <label for="nb_image_line">{lang:Number of images per row}</label>
       </span>
-      <input type="text" size="3" maxlength="2" id="nb_image_line" name="nb_image_line" value="{default.NB_IMAGE_LINE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="3" maxlength="2" id="nb_image_line" name="nb_image_line" value="{default.NB_IMAGE_LINE}" />
     </li>
 
     <li>
       <span class="property">
         <label for="nb_line_page">{lang:Number of rows per page}</label>
       </span>
-      <input type="text" size="3" maxlength="2" id="nb_line_page" name="nb_line_page" value="{default.NB_ROW_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="3" maxlength="2" id="nb_line_page" name="nb_line_page" value="{default.NB_ROW_PAGE}" />
     </li>
 
     <li>
       <span class="property">
         <label for="default_template">{lang:Interface theme}</label>
       </span>
-      <select name="default_template" id="default_template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      <select name="default_template" id="default_template">
         <!-- BEGIN template_option -->
         <option value="{default.template_option.VALUE}" {default.template_option.SELECTED}>{default.template_option.CONTENT}</option>
         <!-- END template_option -->
@@ -132,7 +132,7 @@
       <span class="property">
         <label for="recent_period">{lang:Recent period}</label>
       </span>
-      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" />
     </li>
 
     <li>
@@ -151,14 +151,14 @@
       <span class="property">
         <label for="default_maxwidth">{lang:Maximum width of the pictures}</label>
       </span>
-      <input type="text" size="4" maxlength="4" id="default_maxwidth" name="default_maxwidth" value="{default.MAXWIDTH}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="4" maxlength="4" id="default_maxwidth" name="default_maxwidth" value="{default.MAXWIDTH}" />
     </li>
 
     <li>
       <span class="property">
         <label for="default_maxheight">{lang:Maximum height of the pictures}</label>
       </span>
-      <input type="text" size="4" maxlength="4" id="default_maxheight" name="default_maxheight" value="{default.MAXHEIGHT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+      <input type="text" size="4" maxlength="4" id="default_maxheight" name="default_maxheight" value="{default.MAXHEIGHT}" />
     </li>
   </ul>
 </fieldset>
diff --git a/template/yoga/admin/group_list.tpl b/template/yoga/admin/group_list.tpl
index 7b7dd67eb..6c370a96b 100644
--- a/template/yoga/admin/group_list.tpl
+++ b/template/yoga/admin/group_list.tpl
@@ -8,7 +8,7 @@
     <span class="property">
       <label for="groupname">{lang:Group name}</label>
     </span>
-    <input type="text" id="groupname" name="groupname" maxlength="50" size="20" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+    <input type="text" id="groupname" name="groupname" maxlength="50" size="20" />
 
     <p>
       <input type="submit" name="submit_add" value="{lang:Add}" {TAG_INPUT_ENABLED}/>
diff --git a/template/yoga/admin/thumbnail.tpl b/template/yoga/admin/thumbnail.tpl
index cf5345d43..8023a5551 100644
--- a/template/yoga/admin/thumbnail.tpl
+++ b/template/yoga/admin/thumbnail.tpl
@@ -78,14 +78,14 @@
         <span class="property">
           <label for="width">{lang:maximum width}</label>
         </span>
-	<input type="text" id="width" name="width" value="{params.WIDTH_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+	<input type="text" id="width" name="width" value="{params.WIDTH_TN}" />
       </li>
 
       <li>
         <span class="property">
           <label for="height">{lang:maximum height}</label>
         </span>
-	<input type="text" id="height" name="height" value="{params.HEIGHT_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+	<input type="text" id="height" name="height" value="{params.HEIGHT_TN}" />
       </li>
 
       <li>
diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css
index c7779075d..7e7eecc6d 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -21,19 +21,25 @@
 }
 
 /* Tables & forms */
-INPUT, SELECT, TEXTAREA {
-	color:black;
+
+/* IE <= 6 is so bad with this that you can't merge with the following rule */
+INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
+INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
+  color:black;
+  background-color: #d3d3d3;	/* lightgrey */
 }
-INPUT, SELECT, TEXTAREA, FORM .nofocus {
-	background-color: #d3d3d3;	/* lightgrey */
+
+INPUT.text, INPUT.password, INPUT.button,
+INPUT.submit, INPUT.reset, INPUT.file,
+SELECT, TEXTAREA {
+  color:black;
+  background-color: #d3d3d3;	/* lightgrey */
 }
-FORM .focus {
+/*INPUT.text.focus, INPUT.password.focus, INPUT.button.focus,
+INPUT.submit.focus, INPUT.reset.focus, INPUT.file.focus,*/
+INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .focus {
   background-color: #f5f5f5;		/* whitesmoke */
 }
-INPUT[type="radio"] {	/* for Opera */
-  border: none;
-  background-color: transparent;
-}
 
 .errors { /* Errors display */
   color: red;
diff --git a/template/yoga/fix-ie5-ie6.css b/template/yoga/fix-ie5-ie6.css
index 2361418e9..c3c51859c 100644
--- a/template/yoga/fix-ie5-ie6.css
+++ b/template/yoga/fix-ie5-ie6.css
@@ -11,13 +11,9 @@ H1, #theHeader {
   height: 1em; /* for IE6 it's like min-height */
 }
 
-/* to get less hugly checkboxes at least in tagSelection */
-/* as well as several forms */
-FORM#update FIELDSET INPUT,
-UL.tagSelection LI INPUT,
-#content UL.thumbnails SPAN.wrap2 INPUT {
+/* some theme set a border on INPUT  which is not pretty for those */
+INPUT.radio, INPUT.checkbox {
   border: none;
-  background-color: transparent;
 }
 
 /* fix category thumbnails on main page */
diff --git a/template/yoga/header.tpl b/template/yoga/header.tpl
index 050857ad0..1684c6cd1 100644
--- a/template/yoga/header.tpl
+++ b/template/yoga/header.tpl
@@ -27,7 +27,10 @@ the "text/nonsense" prevents gecko based browsers to load it -->
   <style>
     /* only because we need \{pwg_root\} otherwise use fix-ie5-ie6.css */
     BODY { behavior:url("{pwg_root}template-common/csshover.htc"); }
-    A IMG, .button, .icon { behavior:url("{pwg_root}template-common/tooltipfix.htc"); }
+    A IMG, .button, .icon {
+      behavior:url("{pwg_root}template-common/tooltipfix.htc");
+    }
+    FORM { behavior: url("{pwg_root}template-common/inputfix.htc"); }
   </style>
   <script type="text/javascript" src="{pwg_root}include/pngfix.js"></script>
 <![endif]-->
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index dd07d0135..c96427aab 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -31,14 +31,14 @@
         <span class="property">
           <label for="username">{L_USERNAME}</label>
         </span>
-        <input tabindex="1" class="login" type="text" name="username" id="username" size="25" maxlength="40" value="{USERNAME}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+        <input tabindex="1" class="login" type="text" name="username" id="username" size="25" maxlength="40" value="{USERNAME}" />
       </li>
 
       <li>
         <span class="property">
           <label for="password">{L_PASSWORD}</label>
         </span>
-        <input tabindex="2" class="login" type="password" name="password" id="password" size="25" maxlength="25" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+        <input tabindex="2" class="login" type="password" name="password" id="password" size="25" maxlength="25" />
       </li>
 
       <!-- BEGIN remember_me -->
diff --git a/template/yoga/menubar.tpl b/template/yoga/menubar.tpl
index ddf6c6247..1bcbbec24 100644
--- a/template/yoga/menubar.tpl
+++ b/template/yoga/menubar.tpl
@@ -89,12 +89,12 @@
 
         <label>
           {lang:Username}
-          <input type="text" name="username" size="15" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+          <input type="text" name="username" size="15" value="">
         </label>
 
         <label>
           {lang:password}
-          <input type="password" name="password" size="15" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+          <input type="password" name="password" size="15">
         </label>
 
         <!-- BEGIN remember_me -->
diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl
index f581507e2..e80c817ad 100644
--- a/template/yoga/password.tpl
+++ b/template/yoga/password.tpl
@@ -37,9 +37,8 @@
         <span class="property">
           <label for="mail_address">{lang:Email address}</label>
         </span>
-        <input class="login" type="text" name="mail_address" id="mail_address" size="40" maxlength="40" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input class="login" type="text" name="mail_address" id="mail_address" size="40" maxlength="40" >
       </li>
-
       <li>
         <span class="property">
           <label for="no_mail_address">{lang:No email address}</label>
diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index b3837f454..cfcce030e 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -27,33 +27,29 @@
         <span class="property">{lang:Username}</span>
         {USERNAME}
       </li>
-
       <li>
         <span class="property">
           <label for="mail_address">{lang:Email address}</label>
         </span>
-        <input type="text" name="mail_address" id="mail_address" value="{EMAIL}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" name="mail_address" id="mail_address" value="{EMAIL}">
       </li>
-
       <li>
         <span class="property">
           <label for="password">{L_CURRENT_PASSWORD}</label>
         </span>
-        <input type="password" name="password" id="password" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="password" name="password" id="password" value="">
       </li>
-
       <li>
         <span class="property">
           <label for="use_new_pwd">{L_NEW_PASSWORD}</label>
         </span>
-        <input type="password" name="use_new_pwd" id="use_new_pwd" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="password" name="use_new_pwd" id="use_new_pwd" value="">
       </li>
-
       <li>
         <span class="property">
           <label for="passwordConf">{L_CONFIRM_PASSWORD}</label>
         </span>
-        <input type="password" name="passwordConf" id="passwordConf" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="password" name="passwordConf" id="passwordConf" value="">
       </li>
     </ul>
   </fieldset>
@@ -66,81 +62,68 @@
         <span class="property">
           <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
         </span>
-        <input type="text" size="3" maxlength="2" name="nb_image_line" id="nb_image_line" value="{NB_IMAGE_LINE}"
-               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" size="3" maxlength="2" name="nb_image_line" id="nb_image_line" value="{NB_IMAGE_LINE}">
       </li>
-
       <li>
         <span class="property">
           <label for="nb_line_page">{L_NB_ROW_PAGE}</label>
         </span>
-        <input type="text" size="3" maxlength="2" name="nb_line_page" id="nb_line_page" value="{NB_ROW_PAGE}"
-               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" size="3" maxlength="2" name="nb_line_page" id="nb_line_page" value="{NB_ROW_PAGE}" >
       </li>
-
       <li>
         <span class="property">
           <label for="template">{L_STYLE_SELECT}</label>
         </span>
-        <select name="template" id="template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <select name="template" id="template">
           <!-- BEGIN template_option -->
           <option value="{template_option.VALUE}" {template_option.SELECTED}>{template_option.CONTENT}</option>
           <!-- END template_option -->
         </select>
       </li>
-
       <li>
         <span class="property">
           <label for="language">{L_LANG_SELECT}</label>
         </span>
-        <select name="language" id="language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <select name="language" id="language">
           <!-- BEGIN language_option -->
           <option value="{language_option.VALUE}" {language_option.SELECTED}>{language_option.CONTENT}</option>
           <!-- END language_option -->
         </select>
       </li>
-
       <li>
         <span class="property">
           <label for="recent_period">{L_RECENT_PERIOD}</label>
         </span>
-        <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{RECENT_PERIOD}"
-               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{RECENT_PERIOD}">
       </li>
-
       <li>
         <span class="property">{L_EXPAND_TREE}</span>
-        <label><input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}</label>
-        <label><input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}</label>
+        <label><input type="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}</label>
+        <label><input type="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}</label>
       </li>
-
       <li>
         <span class="property">{L_NB_COMMENTS}</span>
-        <label><input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}</label>
-        <label><input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}</label>
+        <label><input type="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}</label>
+        <label><input type="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}</label>
       </li>
- 
       <li>
         <span class="property">
           <label for="maxwidth">{L_MAXWIDTH}</label>
         </span>
-        <input type="text" size="4" maxlength="4" name="maxwidth" id="maxwidth" value="{MAXWIDTH}"
-               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" size="4" maxlength="4" name="maxwidth" id="maxwidth" value="{MAXWIDTH}">
       </li>
-
       <li>
         <span class="property">
           <label for="maxheight">{L_MAXHEIGHT}</label>
         </span>
-        <input type="text" size="4" maxlength="4" name="maxheight" id="maxheight" value="{MAXHEIGHT}"
-               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" size="4" maxlength="4" name="maxheight" id="maxheight" value="{MAXHEIGHT}">
       </li>
     </ul>
   </fieldset>
 
   <p class="bottomButtons">
     <input type="submit" name="validate" value="{L_SUBMIT}">
-    <input type="reset" name="reset" value="{L_RESET}">
+    <input type="reset" name="reset" value="{L_RESET}" class="reset">
   </p>
 
 </form>
diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl
index be3fb4a79..c047145af 100644
--- a/template/yoga/register.tpl
+++ b/template/yoga/register.tpl
@@ -28,28 +28,25 @@
         <span class="property">
           <label for="login">* {lang:Username}</label>
         </span>
-        <input type="text" name="login" id="login" value="{F_LOGIN}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" name="login" id="login" value="{F_LOGIN}" >
       </li>
-
       <li>
         <span class="property">
           <label for="password">* {lang:Password}</label>
         </span>
-        <input type="password" name="password" id="password" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="password" name="password" id="password" >
       </li>
-
       <li>
         <span class="property">
           <label for="password_conf">* {lang:Confirm Password}</label>
         </span>
-        <input type="password" name="password_conf" id="password_conf" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="password" name="password_conf" id="password_conf" >
       </li>
-
       <li>
         <span class="property">
           <label for="mail_address">{lang:Mail address}</label>
         </span>
-        <input type="text" name="mail_address" id="mail_address" value="{F_EMAIL}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+        <input type="text" name="mail_address" id="mail_address" value="{F_EMAIL}" >
         ({lang:useful when password forgotten})
       </li>
     </ul>
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index 1c18b6a72..e893d6276 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -22,7 +22,7 @@
 <fieldset>
   <legend>{lang:Filter}</legend>
   <label>{lang:search_keywords}
-    <input type="text" style="width: 300px" name="search_allwords" size="30"  onfocus="this.className='focus';" onblur="this.className='nofocus';"/>
+    <input type="text" style="width: 300px" name="search_allwords" size="30"  />
   </label>
   <ul>
     <li><label>
@@ -33,7 +33,7 @@
     </label></li>
   </ul>
   <label>{lang:search_author}
-    <input type="text" style="width: 300px" name="search_author" size="30"  onfocus="this.className='focus';" onblur="this.className='nofocus';"/>
+    <input type="text" style="width: 300px" name="search_author" size="30"  />
   </label>
 </fieldset>
 
@@ -70,7 +70,7 @@
         <option {start_month.SELECTED} value="{start_month.VALUE}">{start_month.OPTION}</option>
         <!-- END start_month -->
       </select>
-      <input name="start_year" type="text" size="4" maxlength="4" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      <input name="start_year" type="text" size="4" maxlength="4" >
     </li>
     <li>
       <a href="#" onClick="document.search.start_day.value={TODAY_DAY};document.search.start_month.value={TODAY_MONTH};document.search.start_year.value={TODAY_YEAR};return false;">{lang:today}</a>
@@ -89,7 +89,7 @@
         <option {end_month.SELECTED} value="{end_month.VALUE}">{end_month.OPTION}</option>
         <!-- END end_month -->
       </select>
-      <input name="end_year" type="text" size="4" maxlength="4" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      <input name="end_year" type="text" size="4" maxlength="4" >
     </li>
     <li>
       <a href="#" onClick="document.search.end_day.value={TODAY_DAY};document.search.end_month.value={TODAY_MONTH};document.search.end_year.value={TODAY_YEAR};return false;">{lang:today}</a>
@@ -100,7 +100,7 @@
 <fieldset>
   <legend>{lang:search_options}</legend>
   <label>{lang:search_categories}
-    <select class="categoryList" name="cat[]" multiple="multiple" onfocus="this.className='categoryList focus';" onblur="this.className='categoryList nofocus';">
+    <select class="categoryList" name="cat[]" multiple="multiple" >
       <!-- BEGIN category_option -->
       <option value="{category_option.VALUE}">{category_option.OPTION}</option>
       <!-- END category_option -->