Topic
3 replies Latest Post - ‏2013-05-24T20:18:19Z by Josh_Winwood
SystemAdmin
SystemAdmin
1192 Posts
ACCEPTED ANSWER

Pinned topic Rounded corner buttons implementation in IE 6,7,8, for Hats 7.5

‏2013-03-25T16:37:19Z |
Hi all,

Can anyody send me the code snippet for implementing Rounded corner buttons in Hats 7.5 version for browser IE(internet explorer) 6,7,8

Thanks
sabir
Updated on 2013-03-26T16:58:21Z at 2013-03-26T16:58:21Z by SystemAdmin
  • tmparker
    tmparker
    484 Posts
    ACCEPTED ANSWER

    Re: Rounded corner buttons implementation in IE 6,7,8, for Hats 7.5

    ‏2013-03-25T16:54:46Z  in response to SystemAdmin
    There is no simple code sample since this feature is not supported prior to IE9. You can find many hacks on the web to work around this if you do a simple search. Here is one example, http://stackoverflow.com/questions/7077331/css-rounded-corners-in-ie8.

    Thanks
    Tim
    • SystemAdmin
      SystemAdmin
      1192 Posts
      ACCEPTED ANSWER

      Re: Rounded corner buttons implementation in IE 6,7,8, for Hats 7.5

      ‏2013-03-26T16:58:21Z  in response to tmparker
      thanks Tim for your reply
      I downloaded css3pie and added in my project parent folder i changed my default CSS (i.e graytheme.css) but i can't able to set the rounded corner buttons in IE 8 can u please take a look at my (graytheme.css)and tell me some suggestions

      Graytheme.css:


      /* Information on stylesheets and templates is available in *
      * the User's and Administrator's Guide */
      @import url(commontheme.css);

      BODY {
      margin:0;
      padding:0;
      height:100%; /* needed for container min-height */
      font-family: "tahoma", tahoma, Helvetica, sans-serif;
      color:#000;
      margin:0 auto;
      font-size:12px;
      background-color: #f1fdff;
      }
      form {
      margin:0px;
      padding:0px;
      }
      TD, P, A, TH, INPUT, SELECT {
      font-family: tahoma, helvetica, sans-serif, ;
      /* For accessibility compliance: remove the following line */
      font-size: 10pt;
      }

      TT {
      /* For accessibility compliance: remove the following line */
      font-size: 2px;
      width:5px;
      }

      /* interactive control classes */
      INPUT.HATSBUTTON {
      font-size: 12px;
      font-family: tahoma, helvetica, sans-serif,;
      width:130px;
      font-weight:bold;
      background:url("../ISGNImages/ButtonBack3.gif");
      /*border:1px solid #65b9f9;*/
      border:none;
      padding:3px 0px;
      margin-left:10px;
      color:#FFFFFF;
      height:26px;
      }

      INPUT.HATSBUTTONSignOn {
      font-size: 12px;
      font-family: tahoma, helvetica, sans-serif,;
      width:80px;
      font-weight:bold;
      background:url("../ISGNImages/ButtonBack3.gif");
      /*border:1px solid #65b9f9;*/
      border:none;
      padding:3px 0px;
      margin-left:10px;
      color:#FFFFFF;
      height:26px;
      }
      SELECT.HATSDROPDOWN {
      font-family: monospace, tahoma, tahoma, helvetica, sans-serif,;
      }

      /* static text classes */
      TABLE.HATSBUTTONTABLECELL {
      padding: 4px;
      }

      /* table classes */
      TABLE.HATSTABLE {
      border-width: 1px;
      border-color: #888888;
      border-style: solid;
      background-color: #cccccc;
      border-collapse: collapse;
      }

      .HATSTABLEHEADER td {
      background:#f4f3df url("../ISGNImages/MenuLinksBack2.gif") repeat-x;
      color: #036799;
      font-weight: bold;
      text-align: center;
      border-width: 1px 0px;
      border-color: #888888;
      border-style: solid;
      }

      .HATSTABLEEVENROW {
      background-color: #f3f3f3;
      }

      .HATSTABLEODDROW {
      background-color: #FFFFFF;
      }

      TD.HATSTABLECELL {
      padding: 4px;

      border-width: 1px;
      border-color: #888888;
      border-style: solid;
      }
      TR.HATSTABLECELL {
      background:#f4f3df url("../ISGNImages/MenuLinksBack2.gif") repeat-x;
      }
      TD.HATSTABLECAPTIONCELL {
      padding: 4px;

      border-width: 1px;
      border-color: #888888;
      border-style: solid;
      }

      TABLE.HATSFIELDTABLE {
      font-family: monospace;
      white-space: normal;
      letter-spacing: normal;
      }

      .HATSFIELD {
      font-family: monospace;
      color: black;
      }

      /* Disabled field */
      .HDF {
      font-family: monospace;
      color: gray;
      }

      /* links */
      A.HATSLINK:link, A.HATSLINK:visited {

      color: blue;
      }
      #mainMenu a.HATSLINK {
      font-family: ,tahoma,helvetica, sans-serif,;
      width:280px; /* 330px */
      padding:4px 2px 6px 10px; /* 4px 2px 6px 30px; */
      /* border:1px solid #BBBBBB; */
      color:#000000; /* 036799 */
      font-weight:bold;
      font-size:12px;
      text-decoration:none;
      /* background:#000;
      background-image:url(../ISGNImages/MenuLinksBack3.gif); */
      margin: 0px 25px 5px 5px; /* 0px 25px 5px 25px; */
      text-align:left;
      float: left;
      }

      #mainMenu a.HATSLINK:hover {
      • color:#000;*
      • /* border:1px solid #999999; /
      • padding: 8px;*
      border-radius: 4px;
      background-clip:
      border-top-left-radius:8px;
      border-top-right-radius:13px;
      border-bottom-right-radius:10px;
      border-bottom-left-radius:5px;
      • position: relative;*
      • z-index=-1;*
      • zoom: 1;*
      • behavior: url("/PIE/PIE.htc");*
      }
      a.HATSLINKdisable {
      font-family: tahoma, helvetica, sans-serif,;
      width:330px;
      padding:2px 2px 2px 30px;
      border:1px solid #BBBBBB;
      color:#d9d9d9;
      font-weight:bold;
      font-size:14px;
      text-decoration:none;
      background:url("../ISGNImages/MenuLinksBack42.gif") left middle;
      margin: 0px 25px 5px 25px;
      text-align:left;
      }
      #mainMenu a.HATSLINKdisable {
      font-family: tahoma, helvetica, sans-serif,;
      width:330px;
      padding:2px 2px 2px 30px;
      border:1px solid #BBBBBB;
      color:#d9d9d9;
      font-weight:bold;
      font-size:14px;
      text-decoration:none;
      background:url("../ISGNImages/MenuLinksBack42.gif") left middle;
      margin: 0px 25px 5px 25px;
      text-align:left;
      }
      #MainMenu TD.HF {
      font-family: tahoma, helvetica, sans-serif;
      font-size:16px;
      color:#666666;
      font-weight:bold;
      margin: 0px 0px 0px 50px;
      }
      #mainMenuBottom a.HATSLINK {
      font-size: 12px;
      font-family: tahoma, helvetica, sans-serif,;
      width:144px;
      font-weight:bold;
      background:url("../ISGNImages/ButtonBack2.gif");
      border:1px solid #999999;
      padding:4px 7px 4px 7px;
      margin-left:6px;
      color:#000000;
      text-decoration:none;
      }
      #mainMenuBottom TD.HF {
      Font-size:2px;
      }
      .MenuContents {
      /*background: #FFFFFF url("../ISGNImages/MenuBodyBack.gif");
      background-repeat:repeat-x;*/
      background-color:#e3f5f9;
      /* border:1px solid #DDDDDD; */
      border-top:0px;
      }
      .MenuContents2 {
      /*background: #FFFFFF url("../ISGNImages/MenuBodyBack.gif");
      background-repeat:repeat-x;*/
      background-color:#e3f5f9;
      /* border:1px solid #DDDDDD; */
      border-top:0px;
      }

      A.HATSLINK:hover {
      color: #5555ff;
      border-radius:25px;
      -moz-border-radius:25px
      }

      /* popup classes */
      DIV.HATSPOPUP {
      position: absolute;

      left: 0;
      top: 0;
      visibility: hidden;
      width: 150px;
      height: 170px;
      overflow: auto;
      border: solid black 1px;
      background-color: #eeeeff;
      /*-moz-opacity: .46; only works in ns7, moz */
      filter: alpha(opacity=90, style=0);
      z-index: 5;
      /*-moz-border-radius: 6%;*/
      }

      TABLE.HATSPOPUPTABLE {
      background-color: #eeeeff;
      border: 0px;
      width: 100%;
      }

      TH.HATSPOPUPTH {
      background-color: #cccccc;
      text-align: right;
      }
      /* Style Definition for all widgets with color mapping enabled (Hcolor) */
      /* These color map the terminal fields foreground colors to these .html */
      /* color and attributes. */
      .HBLANK, input.HBLANK {
      font-family: monospace;
      color: black;
      white-space: normal;
      letter-spacing: normal;
      }

      .HBLUE, input.HBLUE {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HGREEN, input.HGREEN {
      font-family: monospace;
      color: black;
      white-space: normal;
      letter-spacing: normal;
      font-weight: bold;
      }

      .HCYAN, input.HCYAN {
      font-family: monospace;
      text-align:left;
      color: #444444;
      white-space: normal;
      letter-spacing: normal;
      }

      .HRED, input.HRED {
      font-family: monospace;
      color: red;
      white-space: normal;
      letter-spacing: normal;
      }

      .HMAGENTA, input.HMAGENTA {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HBROWN, input.HBROWN {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HWHITE, input.HWHITE {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }
      /* Text Input Fields Settings */
      input.HWHITE {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma Helvetica, sans-serif;
      color:#333333;
      }
      input.HBLUE {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HGREEN {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HCYAN {
      border:1px solid #999999;
      text-align:left;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HRED {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HMAGENTA {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HBROWN {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HHWHITE {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLYELLOW {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLMAGENTA {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLRED {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLCYAN {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLGREEN {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HLBLUE {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }
      input.HGRAY {
      border:1px solid #999999;
      font-family: monospace, "Tahoma", Tahoma, Helvetica, sans-serif;
      color:#333333;
      }

      .HGRAY, input.HGRAY {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLBLUE, input.HLBLUE {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLGREEN, input.HLGREEN {
      font-family: monospace;
      color: #888888;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLCYAN, input.HLCYAN {
      font-family: monospace;
      color: #999999;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLRED, input.HLRED {
      font-family: monospace;
      color: red;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLMAGENTA, input.HLMAGENTA {
      font-family: monospace;
      color: #333333;
      white-space: normal;
      letter-spacing: normal;
      }

      .HLYELLOW, input.HLYELLOW {
      font-family: monospace;
      color: #666666;
      white-space: normal;
      letter-spacing: normal;
      }

      .HHWHITE, input.HHWHITE {
      font-family: monospace;
      color: black;
      white-space: normal;
      letter-spacing: normal;
      }

      /* keypad links */
      A.HostKeyLink {
      color: blue;

      }

      A.ApplicationKeyLink {
      color: black;

      }

      /* keypad buttons */
      INPUT.ApplicationButton {
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      }

      INPUT.HostPFKey {
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      width: 4em;
      }

      INPUT.HostButton {
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      width: 8em;
      }

      INPUT.ApplicationButton:hover {
      border-color: #cccccc;
      }

      INPUT.HostPFKey:hover {
      border-color: #cccccc;
      }

      INPUT.HostButton:hover {
      border-color: #cccccc;
      }

      /* keypad dropdowns */
      select.ApplicationDropDown, select.HostDropDown {
      font-family: monospace, tahoma, helvetica, sans-serif;
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      }

      /* keypad tables */
      TABLE.HostKeypad {
      border-style: solid;
      border-width: 1px;
      border-color: black;
      background-color: #efefef;
      }

      .HostKeypad {
      text-align:left;
      }
      /* focus indicator classes used for portlets */
      .HATSFOCUSED {
      border: thin solid blue;
      }
      .HATSSTATUSHEADER {
      border-color: #888888;
      border-style: solid;
      border-width: 1px;
      color: white;
      background-color: #333333;
      /* For accessibility compliance: change following value to 180% */
      font-size: 18pt;
      font-weight: bold;
      }

      .HATSSTATUSFOOTER {
      border-color: #888888;
      border-style: solid;
      border-width: 1px;
      color: black;
      background-color: #cccccc;
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      }

      .HATSFOOTERSTATUSHEADER, .HATSFOOTERSTATUSINFO {
      /* For accessibility compliance: change following value to 90% */
      font-size: 9pt;
      }

      .statusArea {
      font-family: monospace, tahoma, helvetica, sans-serif,;
      margin: auto;
      color: black;
      display:none;
      }

      DIV.statusArea {
      border-color: #888888;
      border-top-style: solid;
      border-top-width: 1px;
      }

      TABLE.statusArea{
      table-layout: fixed;
      empty-cells: hide;
      }

      .inputInhibited{
      color:red;
      font: bold;
      }

      TABLE.HATSESCROLL {
      background-color: #FFFFFF;
      }

      TABLE.HATSESCROLL TD.HATSESCROLLBUTTON {
      background-color: #999999;
      border: 1px solid #666666;
      }

      .HCURSORINDICATOR {
      color: red;
      /* date:17092012 text-decoration: underline;*/
      text-decoration: blink;
      font: bold;
      /* date:17092012 background-color: #666666;*/
      background-color: #FFFFFF;
      }

      .HF {
      font-family: "Courier New" Courier !important;
      color:#333333;
      }

      /* =================================== */
      .PageHeading {
      background:url("../ISGNImages/titlebg.jpg");
      height:25px;
      text-align:center;
      font-size:12px;
      font-weight:bold;
      padding-left:12px;
      font-family:tahoma, Verdana;
      color:#FFFFFF;
      }
      .PageHeading2 {
      background:url("../ISGNImages/titlebg2.gif");
      height:25px;
      text-align:center;
      font-size:16px;
      font-weight:bold;
      padding-left:12px;
      font-family: "Tahoma", Verdana;
      border:1px solid #CCCCCC;
      color:#000000;
      }

      .appname {
      font-family: tahoma, helvetica, sans-serif,;
      font-size: 13px;
      font-weight: bold;
      color: #00b3be;
      text-align:center;
      }
      .appnameNew {
      font-family: tahoma, helvetica, sans-serif,;
      font-size: 13px;
      font-weight: bold;
      color: #00b3be;
      text-align:left;
      }
      .UserText {
      font-family: tahoma, helvetica, sans-serif,;
      font-size: 12px;
      font-weight: bold;
      color: #FFFFFF;
      text-align:center;
      }
      INPUT.HATSINPUT {
      font-family: "Courier New" Courier !important;
      color:#666666;
      border:1px solid #999999;
      }

      /*.copy {
      // font-size:10px;
      //}*/

      .copy {
      font-size:11px;
      font-family:tahoma;
      color:#ffffff;
      text-decoration:none;
      .Footer
      {
      Height:20px;
      background-color:#414142;
      }
      #screenLinks a.HATSLINK {
      font-family: tahoma, helvetica, sans-serif;
      width:330px;
      padding:2px 2px 2px 30px;
      border:1px solid #BBBBBB;
      color:#036799;
      font-weight:bold;
      font-size:14px;
      text-decoration:none;
      background:url("../ISGNImages/MenuLinksBack3.gif") left middle;
      margin: 0px 25px 5px 25px;
      text-align:left;
      }
      #screenLinks a.HATSLINK:hover {
      color:#e87e00;
      border:1px solid #999999;
      }
      .HATSLINKdisable a{
      font-family: tahoma, helvetica, sans-serif,;
      width:330px;
      padding:2px 2px 2px 30px;
      border:1px solid #BBBBBB;
      color:#d9d9d9;
      font-weight:bold;
      font-size:14px;
      text-decoration:none;
      background:url("../ISGNImages/MenuLinksBack42.gif") left middle;
      margin: 0px 25px 5px 25px;
      text-align:left;
      }
      #screenLinks a.HATSLINKdisable {
      font-family: tahoma, helvetica, sans-serif,;
      width:330px;
      padding:2px 2px 2px 30px;
      border:1px solid #BBBBBB;
      color:#d9d9d9;
      font-weight:bold;
      font-size:14px;
      text-decoration:none;
      background:url("../ISGNImages/MenuLinksBack42.gif") left middle;
      margin: 0px 25px 5px 25px;
      text-align:left;
      }
      #screenLinks TD.HF {
      font-family: tahoma, helvetica, sans-serif;
      color:black;/*#666666*/
      margin: 0px 0px 0px 50px;
      }
      #screenLinksBottom a.HATSLINK {
      font-size: 12px;
      font-family: tahoma, helvetica, sans-serif,;
      width:144px;
      font-weight:bold;
      background:url("../ISGNImages/ButtonBack2.gif");
      border:1px solid #999999;
      padding:4px 7px 4px 7px;
      margin-left:6px;
      color:#000000;
      text-decoration:none;
      }
      #screenLinksBottom TD.HF {
      Font-size:2px;
      }
      .TitleContent
      {
      background-color:#baf3fe;
      font-weight:bold;
      font-size:11px;
      font-family:tahoma, tahoma,Verdana;
      color:#000000;
      height:30px;
      }
      .BgButtons
      {
      background-color:#baf3fe;
      /* border-top:'solid 1px #000000'; */
      }
      .AjaxBackGroung
      {
      background-color:#e3f5f9;
      }
  • Josh_Winwood
    Josh_Winwood
    11 Posts
    ACCEPTED ANSWER

    Re: Rounded corner buttons implementation in IE 6,7,8, for Hats 7.5

    ‏2013-05-24T20:18:19Z  in response to SystemAdmin

    I used something called DD_roundies for my jQuery/datatables:
    http://dillerdesign.com/experiment/DD_roundies/

     

     

    and used this code before setting up my datatables:

    $.uicornerfix = function(r){
      DD_roundies.addRule('.ui-corner-tr', r+' '+r+' 0 0');
      DD_roundies.addRule('.ui-corner-bl', '0 0 '+r+' '+r);  
    };