View Issue Details

This bug affects 1 person(s).
 10
IDProjectCategoryView StatusLast Update
05059Bug reportsAccessibilitypublic2011-10-17 23:55
Reporteronderzoekspraktijk Assigned Totpartner  
PrioritynormalSeverityminor 
Status closedResolutionfixed 
Product Version1.90+ 
Fixed in Version2.00a1 
Summary05059: text elements on buttons not in language file
Description

I would like to delete the >> and << signs on the next and previous buttons inside the navigator on the footer of each page.
I tried this by looking at the tranlation, but cannot find these signs there.

I want to delete these signs because they are read in the screenreader and are translated to larger larger for instance. This does not add to the joy of filling in a survey.

Steps To Reproduce

Any template, any survey.

Read the text of a survey using a screenreader. The text on buttons will be read as greater then greater then for the next button for instance.

Additional Information

Shnoulle reported on this issue: Yore right, it's not in translation file. You can modify it directly in index.php (search >> and <<, line 2578).

Mazi wrote: That's definetely a not so perfect implementation.

TagsNo tags attached.
Attached Files
gt.png (3,361 bytes)   
gt.png (3,361 bytes)   
lt.png (2,861 bytes)   
lt.png (2,861 bytes)   
updated_solution_build_9642 (5,137 bytes)   
1,31d0
< 	
< <style type="text/css">	
< 	.fg-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
< 	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
< 	
< 	a.fg-button { float:left; }
< 	
< 	/* remove extra button width in IE */
< 	button.fg-button { width:auto; overflow:visible; }
< 	
< 	.fg-button-icon-left { padding-left: 2.1em;background-color: red; margin-left: 3em}
< 	.fg-button-icon-right { padding-right: 2.1em; }
< 	.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
< 	.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
< 	
< 	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
< 	
< 	.fg-buttonset { float:left; }
< 	.fg-buttonset .fg-button { float: left; }
< 	.fg-buttonset-single .fg-button, 
< 	.fg-buttonset-multi .fg-button { margin-right: -1px;}
< 	
< 	.fg-toolbar { padding: .5em; margin: 0;  }
< 	.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
< 	.fg-toolbar .fg-button { font-size: 1em;  }
< 
< 	/*demo page css*/
< 	h2 { clear: both; padding-top:1.5em; margin-top:0; } 
< 	.strike { text-decoration: line-through; }
< </style>	
< 
2609,2610c2578,2579
<        $surveymover .= "<button class='fg-button fg-button-icon-left ui-state-default ui-corner-all'  type='submit' id='moveprevbtn' accesskey='p' name='move2' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-prev'></span><b>Previous</b></button>";
<        
---
>         $surveymover .= "<input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\" value=' &lt;&lt; "
>         . $clang->gT("Previous")." ' name='move2' id='moveprevbtn' />\n";
2614,2615c2583,2584
<        $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>Next</b></button>";
<       
---
>         $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' />\n";
2620c2589,2590
<       $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>Next</b></button>";
---
>         $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' />\n";
2624c2594,2595
<        $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>Next</b></button>";
---
>         $surveymover .=  "\t<input class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' />\n";
2628,2631c2599,2600
<       $surveymover .= "<button class='fg-button ui-state-default ui-corner-all' accesskey='l' type='submit' name='move2' 
<  onclick=\"javascript:document.limesurvey.move.value = 'movesubmit'; \"><b>Submit</b></button>";       
< 
< 
---
>         $surveymover .= "\t<input class='submit' type='submit' accesskey='l' onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" value=' "
>         . $clang->gT("Submit")." ' name='move2' />\n";
3013c2982
<                 echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><button class='fg-button fg-button-icon-left ui-state-default ui-corner-all' type='submit' id='moveprevbtn' accesskey='p' name='move2' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-prev'></span><b>Previous</b></button>;
---
>                 echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" value=' &lt;&lt; ". $clang->gT("Previous")." ' name='move2' />
updated_solution_build_9642 (5,137 bytes)   
Changed_Next.png (90,689 bytes)   
Changed_Next.png (90,689 bytes)   
Changed_Prev_Submit.png (74,627 bytes)   
Changed_Prev_Submit.png (74,627 bytes)   
index.php_build9642.diff (5,337 bytes)   
1,31d0
< 	
< <style type="text/css">	
< 	.fg-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
< 	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
< 	
< 	a.fg-button { float:left; }
< 	
< 	/* remove extra button width in IE */
< 	button.fg-button { width:auto; overflow:visible; }
< 	
< 	.fg-button-icon-left { padding-left: 2.1em;background-color: red; margin-left: 3em}
< 	.fg-button-icon-right { padding-right: 2.1em; }
< 	.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
< 	.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
< 	
< 	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
< 	
< 	.fg-buttonset { float:left; }
< 	.fg-buttonset .fg-button { float: left; }
< 	.fg-buttonset-single .fg-button, 
< 	.fg-buttonset-multi .fg-button { margin-right: -1px;}
< 	
< 	.fg-toolbar { padding: .5em; margin: 0;  }
< 	.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
< 	.fg-toolbar .fg-button { font-size: 1em;  }
< 
< 	/*demo page css*/
< 	h2 { clear: both; padding-top:1.5em; margin-top:0; } 
< 	.strike { text-decoration: line-through; }
< </style>	
< 
2609,2610c2578,2579
<        $surveymover .= "<button class='fg-button fg-button-icon-left ui-state-default ui-corner-all' class='submit'  type='submit' id='moveprevbtn' accesskey='p' name='move2' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-prev'></span><b>".$clang->gT("Previous")."</b></button>";
<        
---
>         $surveymover .= "<input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\" value=' &lt;&lt; "
>         . $clang->gT("Previous")." ' name='move2' id='moveprevbtn' />\n";
2614,2615c2583,2584
<        $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' class='submit' accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>".$clang->gT("Next")."</b></button>";
<       
---
>         $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' />\n";
2620c2589,2590
<       $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' class='submit'  accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>".$clang->gT("Next")."</b></button>";
---
>         $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' />\n";
2624c2594,2595
<        $surveymover .= "<button class='fg-button fg-button-icon-right ui-state-default ui-corner-all' class='submit' accesskey='n' type='submit' name='move2' id='movenextbtn' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-next'></span><b>".$clang->gT("Next")."</b></button>";
---
>         $surveymover .=  "\t<input class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext';\" value=' "
>         . $clang->gT("Next")." &gt;&gt; ' name='move2' />\n";
2628,2631c2599,2600
<       $surveymover .= "<button class='fg-button ui-state-default ui-corner-all' class='submit' accesskey='l' type='submit' name='move2' 
<  onclick=\"javascript:document.limesurvey.move.value = 'movesubmit'; \"><b>".$clang->gT("Submit")."</b></button>";       
< 
< 
---
>         $surveymover .= "\t<input class='submit' type='submit' accesskey='l' onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" value=' "
>         . $clang->gT("Submit")." ' name='move2' />\n";
3013c2982
<                 echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><button class='fg-button fg-button-icon-left ui-state-default ui-corner-all' class='submit'  type='submit' id='moveprevbtn' accesskey='p' name='move2' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit();\"><span class='ui-icon ui-icon-seek-prev'></span><b>".$clang->gT("Previous")."</b></button>;
---
>                 echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" value=' &lt;&lt; ". $clang->gT("Previous")." ' name='move2' />
index.php_build9642.diff (5,337 bytes)   
common.php_build 9642.diff (4,052 bytes)   
2894c2894
<         $clearall = "<button class='fg-button ui-state-default ui-corner-all' name='clearallbtn' class='clearall' "
---
>         $clearall = "<input type='button' name='clearallbtn' value='".$clang->gT("Exit and Clear Survey")."' class='clearall' "
2900c2900
<         $clearall .= "', '_top')}\" >".$clang->gT("Exit and Clear Survey")."</button>";
---
>         $clearall .= "', '_top')}\" />";
2924,2925c2924,2925
<                 $saveall = "<button class='fg-button ui-state-default ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>"
<                 ."<button class='fg-button ui-state-default ui-corner-all' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
---
>                 $saveall = "<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>"
>                 ."<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
2930c2930
<                 $saveall = "<button class='fg-button ui-state-default ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>";
---
>                 $saveall = "<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";
2938c2938
<                 $saveall= "<button class='fg-button ui-state-default ui-corner-all' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
---
>                 $saveall= "<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
3057c3057
<         . "<tr><td></td><td><button class='fg-button ui-state-default ui-corner-all'  type='submit'  id='savebutton' name='savesubmit' >".$clang->gT("Save Now")."</button></td></tr>\n"
---
>         . "<tr><td></td><td><input type='submit'  id='savebutton' name='savesubmit' value='".$clang->gT("Save Now")."' /></td></tr>\n"
3079c3079
<         . "<tr><td></td><td><button class='fg-button ui-state-default ui-corner-all' type='submit' id='loadbutton' >".$clang->gT("Load Now")."</button></td></tr></table>\n";
---
>         . "<tr><td></td><td><input type='submit' id='loadbutton' value='".$clang->gT("Load Now")."' /></td></tr></table>\n";
3150c3150
<         $registerform .= "<tr><td></td><td><button class='fg-button ui-state-default ui-corner-all' id='registercontinue' class='submit' type='submit'>".$clang->gT("Continue")."</button>"
---
>         $registerform .= "<tr><td></td><td><input id='registercontinue' class='submit' type='submit' value='".$clang->gT("Continue")."' />"
common.php_build 9642.diff (4,052 bytes)   
Buttons_final.patch (24,446 bytes)   
Index: common_functions.php
===================================================================
--- common_functions.php	(revision 9992)
+++ common_functions.php	(working copy)
@@ -3024,13 +3024,13 @@
     }
     if (strpos($line, "{CLEARALL}") !== false)  {
 
-        $clearall = "<input type='button' name='clearallbtn' value='".$clang->gT("Exit and Clear Survey")."' class='clearall' "
+        $clearall = "<button class='fg-button ui-corner-all'  type='button' name='clearallbtn'  class='clearall' "
         ."onclick=\"if (confirm('".$clang->gT("Are you sure you want to clear all your responses?",'js')."')) {window.open('{$publicurl}/index.php?sid=$surveyid&amp;move=clearall&amp;lang=".$_SESSION['s_lang'];
         if (returnglobal('token'))
         {
             $clearall .= "&amp;token=".urlencode(trim(sanitize_xss_string(strip_tags(returnglobal('token')))));
         }
-        $clearall .= "', '_self')}\" />";
+        $clearall .= "', '_self')}\" >".$clang->gT("Exit and Clear Survey")."</button>";
 
         $line=str_replace("{CLEARALL}", $clearall, $line);
 
@@ -3055,19 +3055,19 @@
             {
                 if($thissurvey['tokenanswerspersistence'] != 'Y')
                 {
-                    $saveall = "\t\t\t<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>"
-                    ."\n\t\t\t<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                    $saveall = "\t\t\t<button class='fg-button ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>"
+                    ."\n\t\t\t<button class='fg-button ui-corner-all' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
                 }
                 else
                 {
-                    $saveall= "\t\t\t<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                    $saveall= "\t\t\t<button class='fg-button ui-corner-all' name='saveallbtn'  class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
         	};
             }
             elseif (!isset($_SESSION['step']) || !$_SESSION['step'])  //First page, show LOAD
             {
                 if($thissurvey['tokenanswerspersistence'] != 'Y')
                 {
-                    $saveall = "\t\t\t<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";
+                    $saveall = "\t\t\t<button class='fg-button ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>";
                 }
 		else
 		{
@@ -3080,7 +3080,7 @@
             }
             else
             {
-                $saveall= "<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                $saveall= "<button class='fg-button ui-corner-all' type='button' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
             }
         }
         else
@@ -3219,7 +3219,7 @@
             $saveform .="<tr><td align='right'>".$clang->gT("Security Question").":</td><td><table><tr><td valign='middle'><img src='{$captchapath}verification.php?sid=$surveyid' alt='' /></td><td valign='middle' style='text-align:left'><input type='text' size='5' maxlength='3' name='loadsecurity' value='' /></td></tr></table></td></tr>\n";
         }
         $saveform .= "<tr><td align='right'></td><td></td></tr>\n"
-        . "<tr><td></td><td><input type='submit'  id='savebutton' name='savesubmit' value='".$clang->gT("Save Now")."' /></td></tr>\n"
+        . "<tr><td></td><td><button class='fg-button ui-corner-all'  type='submit'  id='savebutton' name='savesubmit'>".$clang->gT("Save Now")."</button></td></tr>\n"
         . "</table>";
         $line=str_replace("{SAVEFORM}", $saveform, $line);
     }
@@ -3241,7 +3241,7 @@
 
 
         $loadform .="<tr><td align='right'></td><td></td></tr>\n"
-        . "<tr><td></td><td><input type='submit' id='loadbutton' value='".$clang->gT("Load Now")."' /></td></tr></table>\n";
+        . "<tr><td></td><td><button class='fg-button ui-corner-all'  type='submit' id='loadbutton'>".$clang->gT("Load Now")."</button></td></tr></table>\n";
         $line=str_replace("{LOADFORM}", $loadform, $line);
     }
     //REGISTER SURVEY DETAILS
@@ -3312,7 +3312,7 @@
          }
          $registerform .= " /></td></tr>\n";
          }        */
-        $registerform .= "<tr><td></td><td><input id='registercontinue' class='submit' type='submit' value='".$clang->gT("Continue")."' />"
+        $registerform .= "<tr><td></td><td><button class='fg-button ui-corner-all' id='registercontinue' class='submit' type='submit' >".$clang->gT("Continue")."</button>"
         ."</td></tr>\n"
         ."</table>\n"
         ."</form>\n";
Index: index.php
===================================================================
--- index.php	(revision 9992)
+++ index.php	(working copy)
@@ -16,7 +16,6 @@
 
 require_once(dirname(__FILE__).'/classes/core/startup.php');
 
-
 require_once(dirname(__FILE__).'/config-defaults.php');
 require_once(dirname(__FILE__).'/common.php');
 require_once(dirname(__FILE__).'/classes/core/language.php');
@@ -1002,7 +1001,7 @@
     $js_header_includes[] = '/scripts/jquery/jquery-ui.js';
     $css_header_includes[]= '/scripts/jquery/css/start/jquery-ui.css';
     $css_header_includes[]= '/scripts/jquery/css/start/lime-progress.css';
-
+	
     $size = intval(($currentstep-1)/$total*100);
 
     $graph = '<script type="text/javascript">
@@ -2910,30 +2909,25 @@
            //first step and we do not want to go back to the welcome screen since we don't show that...
            //so skip the prev button
         } else {
-        $surveymover .= "<input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit(); disable_navigator();\" value=' &lt;&lt; "
-        . $clang->gT("Previous")." ' name='move2' id='moveprevbtn' $disabled />\n";
+        $surveymover .= "<button  class='fg-button fg-button-icon-left  ui-corner-all' class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit(); disable_navigator();\" name='move2' id='moveprevbtn' $disabled ><span class='ui-icon ui-icon-seek-prev'></span>".$clang->gT("Previous")."</button>\n";
     }
     }
     if (isset($_SESSION['step']) && $_SESSION['step'] && (!$_SESSION['totalsteps'] || ($_SESSION['step'] < $_SESSION['totalsteps'])))
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='fg-button fg-button-icon-right ui-corner-all'  class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id='movenextbtn' $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     // here, in some lace, is where I must modify to turn the next button conditionable
     if (!isset($_SESSION['step']) || !$_SESSION['step'])
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='fg-button fg-button-icon-right ui-corner-all'  class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id='movenextbtn' $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     if (isset($_SESSION['step']) && $_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && $presentinggroupdescription == "yes")
     {
-        $surveymover .=  "\t<input class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id=\"movenextbtn\" $disabled />\n";
+        $surveymover .=  "\t<button class='fg-button fg-button-icon-right ui-corner-all' class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id=\"movenextbtn\" $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     if (($_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && !$presentinggroupdescription) || $thissurvey['format'] == 'A')
     {
-        $surveymover .= "\t<input class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" value=\""
-        . $clang->gT("Submit")."\" name=\"move2\" id=\"movesubmitbtn\" $disabled />\n";
+        $surveymover .= "\t<button class='fg-button ui-corner-all'	 class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" name=\"move2\" id=\"movesubmitbtn\" $disabled >".$clang->gT("Submit")."</button>\n";
     }
 
     //	$surveymover .= "<input type='hidden' name='PHPSESSID' value='".session_id()."' id='PHPSESSID' />\n";
@@ -3332,7 +3326,7 @@
                 echo "\t<div class='quotamessage'>\n";
                 echo "\t".$quota['Message']."<br /><br />\n";
                 echo "\t<a href='".$quota['Url']."'>".$quota['UrlDescrip']."</a><br />\n";
-                echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" value=' &lt;&lt; ". $clang->gT("Previous")." ' name='move2' />
+                echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><button class='fg-button fg-button-icon-left ui-corner-all' class='submit' accesskey='p' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" name='move2'><span class='ui-icon ui-icon-seek-prev'></span>".$clang->gT("Previous")."</button>
 					<input type='hidden' name='thisstep' value='".($_SESSION['step'])."' id='thisstep' />
 					<input type='hidden' name='sid' value='".returnglobal('sid')."' id='sid' />
 					<input type='hidden' name='token' value='".$clienttoken."' id='token' />
Index: templates/basic/template.css
===================================================================
--- templates/basic/template.css	(revision 9992)
+++ templates/basic/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#999;  padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png); }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
Index: templates/bluengrey/template.css
===================================================================
--- templates/bluengrey/template.css	(revision 9992)
+++ templates/bluengrey/template.css	(working copy)
@@ -1,4 +1,19 @@
 /* Start reset CSS */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color: #999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
   margin: 0;
Index: templates/citronade/template.css
===================================================================
--- templates/citronade/template.css	(revision 9992)
+++ templates/citronade/template.css	(working copy)
@@ -12,7 +12,22 @@
     You should have received a copy of the GNU General Public License
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FEFEFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
 
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 /* --------------------------------------------- */
 /* Basic adaptation of the template :            */
 /* color and image                               */
Index: templates/clear_logo/template.css
===================================================================
--- templates/clear_logo/template.css	(revision 9992)
+++ templates/clear_logo/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#efe5ca;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
Index: templates/default/template.css
===================================================================
--- templates/default/template.css	(revision 9992)
+++ templates/default/template.css	(working copy)
@@ -1,4 +1,20 @@
 /* Start reset CSS */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
   margin: 0;
Index: templates/eirenicon/template.css
===================================================================
--- templates/eirenicon/template.css	(revision 9992)
+++ templates/eirenicon/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-size: 8pt;
   font-family: verdana;
Index: templates/limespired/template.css
===================================================================
--- templates/limespired/template.css	(revision 9992)
+++ templates/limespired/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 .rank,.rank td {
   background-color: #f5f9f9;
 }
Index: templates/mint_idea/template.css
===================================================================
--- templates/mint_idea/template.css	(revision 9992)
+++ templates/mint_idea/template.css	(working copy)
@@ -2,7 +2,22 @@
   margin: 0;
   padding: 0;
 }
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
 
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body,div,span,p,a,img,ul,ol,li,table,th,tr,td,form,fieldset,legend,dl,dt,dd,blockquote,applet,object
   {
   border: 0;
Index: templates/sherpa/template.css
===================================================================
--- templates/sherpa/template.css	(revision 9992)
+++ templates/sherpa/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png);}
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 .answertextright {
   text-align: left;
 }
Index: templates/vallendar/template.css
===================================================================
--- templates/vallendar/template.css	(revision 9992)
+++ templates/vallendar/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.fg-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.fg-button { float:left; }
+
+/* remove extra button width in IE */
+button.fg-button { width:auto; overflow:visible; }
+
+.fg-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.fg-button-icon-right { padding-right: 2.1em; }
+.fg-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.fg-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-size: 8pt;
   font-family: verdana;
Buttons_final.patch (24,446 bytes)   
nav_buttons_final.diff (24,546 bytes)   
Index: common_functions.php
===================================================================
--- common_functions.php	(revision 9992)
+++ common_functions.php	(working copy)
@@ -3024,13 +3024,13 @@
     }
     if (strpos($line, "{CLEARALL}") !== false)  {
 
-        $clearall = "<input type='button' name='clearallbtn' value='".$clang->gT("Exit and Clear Survey")."' class='clearall' "
+        $clearall = "<button class='nav-button ui-corner-all'  type='button' name='clearallbtn'  class='clearall' "
         ."onclick=\"if (confirm('".$clang->gT("Are you sure you want to clear all your responses?",'js')."')) {window.open('{$publicurl}/index.php?sid=$surveyid&amp;move=clearall&amp;lang=".$_SESSION['s_lang'];
         if (returnglobal('token'))
         {
             $clearall .= "&amp;token=".urlencode(trim(sanitize_xss_string(strip_tags(returnglobal('token')))));
         }
-        $clearall .= "', '_self')}\" />";
+        $clearall .= "', '_self')}\" >".$clang->gT("Exit and Clear Survey")."</button>";
 
         $line=str_replace("{CLEARALL}", $clearall, $line);
 
@@ -3055,19 +3055,19 @@
             {
                 if($thissurvey['tokenanswerspersistence'] != 'Y')
                 {
-                    $saveall = "\t\t\t<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>"
-                    ."\n\t\t\t<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                    $saveall = "\t\t\t<button class='nav-button ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>"
+                    ."\n\t\t\t<button class='nav-button ui-corner-all' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
                 }
                 else
                 {
-                    $saveall= "\t\t\t<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                    $saveall= "\t\t\t<button class='nav-button ui-corner-all' name='saveallbtn'  class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
         	};
             }
             elseif (!isset($_SESSION['step']) || !$_SESSION['step'])  //First page, show LOAD
             {
                 if($thissurvey['tokenanswerspersistence'] != 'Y')
                 {
-                    $saveall = "\t\t\t<input type='submit' name='loadall' value='".$clang->gT("Load Unfinished Survey")."' class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";
+                    $saveall = "\t\t\t<button class='nav-button ui-corner-all' type='submit' name='loadall'  class='saveall' ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Load Unfinished Survey")."</button>";
                 }
 		else
 		{
@@ -3080,7 +3080,7 @@
             }
             else
             {
-                $saveall= "<input type='button' name='saveallbtn' value='".$clang->gT("Resume Later")."' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") ."/>";  // Show Save So Far button
+                $saveall= "<button class='nav-button ui-corner-all' type='button' name='saveallbtn' class='saveall' onclick=\"javascript:document.limesurvey.move.value = this.value;addHiddenField(document.getElementById('limesurvey'),'saveall',this.value);document.getElementById('limesurvey').submit();\" ". (($thissurvey['active'] != "Y")? "disabled='disabled'":"") .">".$clang->gT("Resume Later")."</button>";  // Show Save So Far button
             }
         }
         else
@@ -3219,7 +3219,7 @@
             $saveform .="<tr><td align='right'>".$clang->gT("Security Question").":</td><td><table><tr><td valign='middle'><img src='{$captchapath}verification.php?sid=$surveyid' alt='' /></td><td valign='middle' style='text-align:left'><input type='text' size='5' maxlength='3' name='loadsecurity' value='' /></td></tr></table></td></tr>\n";
         }
         $saveform .= "<tr><td align='right'></td><td></td></tr>\n"
-        . "<tr><td></td><td><input type='submit'  id='savebutton' name='savesubmit' value='".$clang->gT("Save Now")."' /></td></tr>\n"
+        . "<tr><td></td><td><button class='nav-button ui-corner-all'  type='submit'  id='savebutton' name='savesubmit'>".$clang->gT("Save Now")."</button></td></tr>\n"
         . "</table>";
         $line=str_replace("{SAVEFORM}", $saveform, $line);
     }
@@ -3241,7 +3241,7 @@
 
 
         $loadform .="<tr><td align='right'></td><td></td></tr>\n"
-        . "<tr><td></td><td><input type='submit' id='loadbutton' value='".$clang->gT("Load Now")."' /></td></tr></table>\n";
+        . "<tr><td></td><td><button class='nav-button ui-corner-all'  type='submit' id='loadbutton'>".$clang->gT("Load Now")."</button></td></tr></table>\n";
         $line=str_replace("{LOADFORM}", $loadform, $line);
     }
     //REGISTER SURVEY DETAILS
@@ -3312,7 +3312,7 @@
          }
          $registerform .= " /></td></tr>\n";
          }        */
-        $registerform .= "<tr><td></td><td><input id='registercontinue' class='submit' type='submit' value='".$clang->gT("Continue")."' />"
+        $registerform .= "<tr><td></td><td><button class='nav-button ui-corner-all' id='registercontinue' class='submit' type='submit' >".$clang->gT("Continue")."</button>"
         ."</td></tr>\n"
         ."</table>\n"
         ."</form>\n";
Index: index.php
===================================================================
--- index.php	(revision 9992)
+++ index.php	(working copy)
@@ -16,7 +16,6 @@
 
 require_once(dirname(__FILE__).'/classes/core/startup.php');
 
-
 require_once(dirname(__FILE__).'/config-defaults.php');
 require_once(dirname(__FILE__).'/common.php');
 require_once(dirname(__FILE__).'/classes/core/language.php');
@@ -1002,7 +1001,7 @@
     $js_header_includes[] = '/scripts/jquery/jquery-ui.js';
     $css_header_includes[]= '/scripts/jquery/css/start/jquery-ui.css';
     $css_header_includes[]= '/scripts/jquery/css/start/lime-progress.css';
-
+	
     $size = intval(($currentstep-1)/$total*100);
 
     $graph = '<script type="text/javascript">
@@ -2910,30 +2909,25 @@
            //first step and we do not want to go back to the welcome screen since we don't show that...
            //so skip the prev button
         } else {
-        $surveymover .= "<input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit(); disable_navigator();\" value=' &lt;&lt; "
-        . $clang->gT("Previous")." ' name='move2' id='moveprevbtn' $disabled />\n";
+        $surveymover .= "<button  class='nav-button nav-button-icon-left  ui-corner-all' class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; $('#limesurvey').submit(); disable_navigator();\" name='move2' id='moveprevbtn' $disabled ><span class='ui-icon ui-icon-seek-prev'></span>".$clang->gT("Previous")."</button>\n";
     }
     }
     if (isset($_SESSION['step']) && $_SESSION['step'] && (!$_SESSION['totalsteps'] || ($_SESSION['step'] < $_SESSION['totalsteps'])))
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='nav-button nav-button-icon-right ui-corner-all'  class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id='movenextbtn' $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     // here, in some lace, is where I must modify to turn the next button conditionable
     if (!isset($_SESSION['step']) || !$_SESSION['step'])
     {
-        $surveymover .=  "\t<input class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id='movenextbtn' $disabled />\n";
+        $surveymover .=  "\t<button class='nav-button nav-button-icon-right ui-corner-all'  class='submit' type='submit' accesskey='n' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id='movenextbtn' $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     if (isset($_SESSION['step']) && $_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && $presentinggroupdescription == "yes")
     {
-        $surveymover .=  "\t<input class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" value=' "
-        . $clang->gT("Next")." &gt;&gt; ' name='move2' id=\"movenextbtn\" $disabled />\n";
+        $surveymover .=  "\t<button class='nav-button nav-button-icon-right ui-corner-all' class='submit' type='submit' onclick=\"javascript:document.limesurvey.move.value = 'movenext'; disable_navigator();\" name='move2' id=\"movenextbtn\" $disabled ><span class='ui-icon ui-icon-seek-next'></span>".$clang->gT("Next")."</button>\n";
     }
     if (($_SESSION['step'] && ($_SESSION['step'] == $_SESSION['totalsteps']) && !$presentinggroupdescription) || $thissurvey['format'] == 'A')
     {
-        $surveymover .= "\t<input class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" value=\""
-        . $clang->gT("Submit")."\" name=\"move2\" id=\"movesubmitbtn\" $disabled />\n";
+        $surveymover .= "\t<button class='nav-button ui-corner-all'	 class=\"submit\" type=\"submit\" accesskey=\"l\" onclick=\"javascript:document.limesurvey.move.value = 'movesubmit';\" name=\"move2\" id=\"movesubmitbtn\" $disabled >".$clang->gT("Submit")."</button>\n";
     }
 
     //	$surveymover .= "<input type='hidden' name='PHPSESSID' value='".session_id()."' id='PHPSESSID' />\n";
@@ -3332,7 +3326,7 @@
                 echo "\t<div class='quotamessage'>\n";
                 echo "\t".$quota['Message']."<br /><br />\n";
                 echo "\t<a href='".$quota['Url']."'>".$quota['UrlDescrip']."</a><br />\n";
-                echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><input class='submit' accesskey='p' type='button' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" value=' &lt;&lt; ". $clang->gT("Previous")." ' name='move2' />
+                echo "<form method='post' action='{$publicurl}/index.php' id='limesurvey' name='limesurvey'><input type=\"hidden\" name=\"move\" value=\"movenext\" id=\"movenext\" /><button class='nav-button nav-button-icon-left ui-corner-all' class='submit' accesskey='p' onclick=\"javascript:document.limesurvey.move.value = 'moveprev'; document.limesurvey.submit();\" name='move2'><span class='ui-icon ui-icon-seek-prev'></span>".$clang->gT("Previous")."</button>
 					<input type='hidden' name='thisstep' value='".($_SESSION['step'])."' id='thisstep' />
 					<input type='hidden' name='sid' value='".returnglobal('sid')."' id='sid' />
 					<input type='hidden' name='token' value='".$clienttoken."' id='token' />
Index: templates/basic/template.css
===================================================================
--- templates/basic/template.css	(revision 9992)
+++ templates/basic/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#999;  padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png); }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
Index: templates/bluengrey/template.css
===================================================================
--- templates/bluengrey/template.css	(revision 9992)
+++ templates/bluengrey/template.css	(working copy)
@@ -1,4 +1,19 @@
 /* Start reset CSS */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color: #999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
   margin: 0;
Index: templates/citronade/template.css
===================================================================
--- templates/citronade/template.css	(revision 9992)
+++ templates/citronade/template.css	(working copy)
@@ -12,7 +12,22 @@
     You should have received a copy of the GNU General Public License
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FEFEFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
 
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 /* --------------------------------------------- */
 /* Basic adaptation of the template :            */
 /* color and image                               */
Index: templates/clear_logo/template.css
===================================================================
--- templates/clear_logo/template.css	(revision 9992)
+++ templates/clear_logo/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#efe5ca;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
Index: templates/default/template.css
===================================================================
--- templates/default/template.css	(revision 9992)
+++ templates/default/template.css	(working copy)
@@ -1,4 +1,20 @@
 /* Start reset CSS */
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
   margin: 0;
Index: templates/eirenicon/template.css
===================================================================
--- templates/eirenicon/template.css	(revision 9992)
+++ templates/eirenicon/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-size: 8pt;
   font-family: verdana;
Index: templates/limespired/template.css
===================================================================
--- templates/limespired/template.css	(revision 9992)
+++ templates/limespired/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 .rank,.rank td {
   background-color: #f5f9f9;
 }
Index: templates/mint_idea/template.css
===================================================================
--- templates/mint_idea/template.css	(revision 9992)
+++ templates/mint_idea/template.css	(working copy)
@@ -2,7 +2,22 @@
   margin: 0;
   padding: 0;
 }
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
 
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body,div,span,p,a,img,ul,ol,li,table,th,tr,td,form,fieldset,legend,dl,dt,dd,blockquote,applet,object
   {
   border: 0;
Index: templates/sherpa/template.css
===================================================================
--- templates/sherpa/template.css	(revision 9992)
+++ templates/sherpa/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png);}
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 .answertextright {
   text-align: left;
 }
Index: templates/vallendar/template.css
===================================================================
--- templates/vallendar/template.css	(revision 9992)
+++ templates/vallendar/template.css	(working copy)
@@ -1,3 +1,19 @@
+/*****
+Default styles for the jQuery UI Buttons (Next, Previous etc)
+*****/
+.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+
+a.nav-button { float:left; }
+
+/* remove extra button width in IE */
+button.nav-button { width:auto; overflow:visible; }
+
+.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 2.1em; }
+.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
+.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+
 body {
   font-size: 8pt;
   font-family: verdana;
nav_buttons_final.diff (24,546 bytes)   
buttons_2.gif (25,108 bytes)   
buttons_2.gif (25,108 bytes)   
IE_hover_fix.patch (16,093 bytes)   
Index: templates/basic/template.css
===================================================================
--- templates/basic/template.css	(revision 10019)
+++ templates/basic/template.css	(working copy)
@@ -1,18 +1,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#999;  padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png); }
+.nav-button .ui-icon { position: absolute; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png); }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 body {
   font-family: arial, verdana, sans-serif;
Index: templates/bluengrey/template.css
===================================================================
--- templates/bluengrey/template.css	(revision 10019)
+++ templates/bluengrey/template.css	(working copy)
@@ -2,18 +2,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color: #999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute; }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
   margin: 0;
Index: templates/citronade/template.css
===================================================================
--- templates/citronade/template.css	(revision 10019)
+++ templates/citronade/template.css	(working copy)
@@ -15,19 +15,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FEFEFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute;}
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
-
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 /* --------------------------------------------- */
 /* Basic adaptation of the template :            */
 /* color and image                               */
Index: templates/clear_logo/template.css
===================================================================
--- templates/clear_logo/template.css	(revision 10019)
+++ templates/clear_logo/template.css	(working copy)
@@ -1,18 +1,27 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#efe5ca;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute;  }
 
+
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
-button.nav-button { width:auto; overflow:visible; }
+button.nav-button { width:auto; overflow:visible;  }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 body {
   font-family: arial, verdana, sans-serif;
Index: templates/default/template.css
===================================================================
--- templates/default/template.css	(revision 10019)
+++ templates/default/template.css	(working copy)
@@ -2,18 +2,27 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
-.nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFE;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 
+.nav-button { outline: 0;  background-color:#FFE;padding: 0.4em 1em; text-decoration:none !important; cursor:pointer; position: relative;   }
+.nav-button .ui-icon { position: absolute;}
+
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
-button.nav-button { width:auto; overflow:visible; }
+button.nav-button { width:auto; overflow:visible;  }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
   {
Index: templates/eirenicon/template.css
===================================================================
--- templates/eirenicon/template.css	(revision 10019)
+++ templates/eirenicon/template.css	(working copy)
@@ -1,19 +1,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute; }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
-
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 body {
   font-size: 8pt;
   font-family: verdana;
Index: templates/limespired/template.css
===================================================================
--- templates/limespired/template.css	(revision 10019)
+++ templates/limespired/template.css	(working copy)
@@ -1,18 +1,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute; }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 .rank,.rank td {
   background-color: #f5f9f9;
Index: templates/mint_idea/template.css
===================================================================
--- templates/mint_idea/template.css	(revision 10019)
+++ templates/mint_idea/template.css	(working copy)
@@ -5,18 +5,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute;  }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 body,div,span,p,a,img,ul,ol,li,table,th,tr,td,form,fieldset,legend,dl,dt,dd,blockquote,applet,object
   {
Index: templates/sherpa/template.css
===================================================================
--- templates/sherpa/template.css	(revision 10019)
+++ templates/sherpa/template.css	(working copy)
@@ -1,18 +1,26 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#999;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png);}
+.nav-button .ui-icon { position: absolute; background-image: url(../../scripts/jquery/css/start/images/ui-icons_EEF6FF_256x240.png);}
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
 
 .answertextright {
   text-align: left;
Index: templates/vallendar/template.css
===================================================================
--- templates/vallendar/template.css	(revision 10019)
+++ templates/vallendar/template.css	(working copy)
@@ -1,19 +1,28 @@
 /*****
 Default styles for the jQuery UI Buttons (Next, Previous etc)
 *****/
+.hover(
+	function(){ 
+		$(this).addClass("ui-state-hover"); 
+	},
+	function(){ 
+		$(this).removeClass("ui-state-hover"); 
+	}
+)
 .nav-button { outline: 0; margin:0 4px 0 0;  background-color:#FFF;   padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
-.nav-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
+.nav-button .ui-icon { position: absolute;  }
 
 a.nav-button { float:left; }
 
 /* remove extra button width in IE */
 button.nav-button { width:auto; overflow:visible; }
 
-.nav-button-icon-left { padding-left: 2.1em; margin-left: 3em}
-.nav-button-icon-right { padding-right: 2.1em; }
-.nav-button-icon-right .ui-icon { right: auto;left: 0.2em;margin-left: 2.5em; }
-.nav-button-icon-left .ui-icon { left: auto; right: 0.2em; margin-right: 8em; }
 
+.nav-button-icon-left { padding-left: 3.5em; margin-left: 3em}
+.nav-button-icon-right { padding-right: 5em; margin-right: 2em; }
+.nav-button-icon-right .ui-icon {margin-left: 3.5em; }
+.nav-button-icon-left .ui-icon {margin-left: -2.5em; }
+
 body {
   font-size: 8pt;
   font-family: verdana;
IE_hover_fix.patch (16,093 bytes)   
Bug heat10
Complete LimeSurvey version number (& build)9642
I will donate to the project if issue is resolvedNo
Browserfirefox 4
Database type & versionmysql
Server OS (if known)Linux
Webserver software & version (if known)Apache
PHP Version5.2.17

Users monitoring this issue

There are no users monitoring this issue.

Activities

pnarula

pnarula

2011-03-26 17:28

reporter   ~14551

One solution can be as follows:
We can insert an image for ">>" and "<<" with alt text as an empty string. That ways the screen-reader will read the alt text (if at all, which is nothing), which will solve our problem.

Mazi

Mazi

2011-03-26 17:44

updater   ~14552

Carsten, can you please check if this can be improved easily?!

If so please add a GSOC prefix to the ticket if necessary.

pnarula

pnarula

2011-03-26 18:49

reporter   ~14553

Since nobody gave any comments on the solution which I suggested above, I implemented and submitted a solution based on that.
My apologies that the diff is not based on svn (I currently don't have access to it).

c_schmitz

c_schmitz

2011-03-29 19:31

administrator   ~14602

The best would be if we use jQuery UI buttons which look better, degrade gracefully and sport according icons. Pnarula, can you have a look at it?

pnarula

pnarula

2011-03-30 18:57

reporter   ~14621

I've made changes for next, previous, submit buttons using jQuery UI buttons, have a look.Also should I change the rest of the buttons which are on the same page (like resume, exit, load fresh..)?

c_schmitz

c_schmitz

2011-04-01 12:04

administrator   ~14632

Yes, please.

pnarula

pnarula

2011-04-01 19:11

reporter   ~14633

Uploaded the diff.

c_schmitz

c_schmitz

2011-04-11 13:42

administrator   ~14774

pnarula,

the patch should be build against
https://limesurvey.svn.sourceforge.net/svnroot/limesurvey/source/limesurvey_dev
with subversion diff tool.

Can you please do that? Thank you!

pnarula

pnarula

2011-04-11 19:01

reporter   ~14784

Submitted a patch for the latest version, using svn diff.

c_schmitz

c_schmitz

2011-04-16 16:41

administrator   ~14824

Pnarula, this looks much better - good work.
I have however a change request:

  • Don't create a separate CSS class/file for the buttons, rather use the already loaded jquery-ui default CSS style and overwrite if neccessary with CSS in each template (template.css). That means you will have to check each standard template if the button looks well (mostly this will be about color), and if not place according CSS there.

Thank you for your help!

pnarula

pnarula

2011-04-19 21:24

reporter   ~14850

Changed it, and the color scheme can be changed accordingly, if needed.

c_schmitz

c_schmitz

2011-04-24 21:31

administrator   ~14859

Great patch- thank you!

tpartner

tpartner

2011-05-10 13:58

partner   ~14967

pnarula/c_schmitz, would it be possible to have another look at the styles applied to the new buttons? Please see my screenshot for differences between IE and Firefox and the difference between old and new buttons.

These are personal opinions but I find that:

  • The buttons lack consistency accross browsers
  • There is no hover effect
  • I find there is too much padding inside the buttons and not enough around them
  • The background image is mis-placed in IE

Thanks.

c_schmitz

c_schmitz

2011-05-10 16:13

administrator   ~14973

pnarula, can you modify/add add the according styles, please?

pnarula

pnarula

2011-06-13 22:51

reporter   ~15425

Hey Carsten, I've made the required changes. Please have a look!

c_schmitz

c_schmitz

2011-06-14 17:25

administrator   ~15440

Tony, can you check it please?

tpartner

tpartner

2011-06-14 18:15

partner   ~15441

pnarula, this patch does not apply any classes to the navigation buttons and adds JavaScript to the template.css files.

Can you please upload a comprehensive patch to be applied against the dev version?

tpartner

tpartner

2011-07-13 17:53

partner   ~15760

Carsten, I'm going to pick this up.

If we use jQuery UI Buttons (http://jqueryui.com/demos/button/#default), icons are only supported for <button> elements - see http://bugs.jqueryui.com/ticket/5683.

This means that if we want UI icons, we will have to change the navigator <input type='button'> and <input type='submit'> elements to <button>.

Thoughts?

DenisChenu

DenisChenu

2011-07-21 15:06

developer   ~15812

Last edited: 2011-07-21 15:07

I think button is great, but not necessary.

We can add some css background to an input with >> and << picture in input type submit. We add to modify all template according this. ( and css is best for accessibility i think)

But, yes we can't use jquery to do the job. Just use css for this "bug", and add the button functionnality.

c_schmitz

c_schmitz

2011-09-11 10:02

administrator   ~16257

tpartner, IMHO that is not a problem. We should go for that. BTW, if you need my feedback always assign issues directly to me, please.

tpartner

tpartner

2011-10-17 23:55

partner   ~16437

Fixed in CI branch - version 11189.

Issue History

Date Modified Username Field Change
2011-03-26 15:14 onderzoekspraktijk New Issue
2011-03-26 17:28 pnarula Note Added: 14551
2011-03-26 17:44 Mazi Assigned To => c_schmitz
2011-03-26 17:44 Mazi Status new => assigned
2011-03-26 17:44 Mazi Note Added: 14552
2011-03-26 18:31 pnarula File Added: simple_solution_build_9642.diff
2011-03-26 18:46 pnarula File Added: image_solution_build_9642.diff
2011-03-26 18:47 pnarula File Added: gt.png
2011-03-26 18:47 pnarula File Added: lt.png
2011-03-26 18:49 pnarula Note Added: 14553
2011-03-29 19:31 c_schmitz Note Added: 14602
2011-03-29 19:31 c_schmitz Status assigned => feedback
2011-03-30 18:52 pnarula File Added: updated_solution_build_9642
2011-03-30 18:53 pnarula File Added: Changed_Next.png
2011-03-30 18:53 pnarula File Added: Changed_Prev_Submit.png
2011-03-30 18:57 pnarula Note Added: 14621
2011-04-01 12:04 c_schmitz Note Added: 14632
2011-04-01 19:10 pnarula File Added: index.php_build9642.diff
2011-04-01 19:10 pnarula File Added: common.php_build 9642.diff
2011-04-01 19:11 pnarula Note Added: 14633
2011-04-11 13:34 c_schmitz File Deleted: simple_solution_build_9642.diff
2011-04-11 13:34 c_schmitz File Deleted: image_solution_build_9642.diff
2011-04-11 13:42 c_schmitz Note Added: 14774
2011-04-11 19:00 pnarula File Added: buttons.patch
2011-04-11 19:01 pnarula Note Added: 14784
2011-04-16 16:41 c_schmitz Note Added: 14824
2011-04-19 21:24 pnarula File Added: Buttons_final.patch
2011-04-19 21:24 pnarula Note Added: 14850
2011-04-24 15:16 pnarula File Added: nav_buttons_final.diff
2011-04-24 15:21 c_schmitz File Deleted: buttons.patch
2011-04-24 21:31 c_schmitz Note Added: 14859
2011-04-24 21:31 c_schmitz Status feedback => resolved
2011-04-24 21:31 c_schmitz Fixed in Version => 2.00a1
2011-04-24 21:31 c_schmitz Resolution open => fixed
2011-05-10 13:45 tpartner File Added: buttons -1.gif
2011-05-10 13:46 tpartner File Deleted: buttons -1.gif
2011-05-10 13:47 tpartner File Added: buttons_2.gif
2011-05-10 13:58 tpartner Note Added: 14967
2011-05-10 16:13 c_schmitz Note Added: 14973
2011-05-10 16:13 c_schmitz Assigned To c_schmitz => pnarula
2011-05-10 16:13 c_schmitz Status resolved => assigned
2011-06-13 22:45 pnarula File Added: IE_hover_fix.patch
2011-06-13 22:46 pnarula Assigned To pnarula => c_schmitz
2011-06-13 22:51 pnarula Note Added: 15425
2011-06-13 22:51 pnarula Additional Information Updated
2011-06-14 17:24 c_schmitz Assigned To c_schmitz => tpartner
2011-06-14 17:25 c_schmitz Note Added: 15440
2011-06-14 18:15 tpartner Note Added: 15441
2011-07-13 17:53 tpartner Note Added: 15760
2011-07-21 15:06 DenisChenu Note Added: 15812
2011-07-21 15:07 DenisChenu Note Edited: 15812
2011-09-11 10:02 c_schmitz Note Added: 16257
2011-10-17 23:55 tpartner Note Added: 16437
2011-10-17 23:55 tpartner Status assigned => closed