Get button hover behaviour work in IE

June 2, 2008 Firefox, IE, Opera, Safari No Comments

I have been trying to fix the consistency problem found in IE and Firefox. Same as Opera and Safari, Firefox is able to accept button hover behavior and work perfectly fine. However, this button:hover is not working in IE 6 and IE 7, in fact in both IE button:hover behavior not existed at all.
Yeah, another alternative is I can use image hover bla bla bla, but that’s not the case. It’s just feel not satisfied to know this button:hover not working in IE.

Being honest, I did not invent the code myself to fix this issue. Thanks to Pseudo-Classes Fix for Internet Explorer!!! By implementing some jScript code in htc file, and includes this htc file in the css, the hover behavior for any html elements including button work in IE.

Test Result:

Button hover:
Manage

 Publish

 Advanced

Span hover:
Hide comments

The code is:
IEFixes.htc

[html]
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

My test code is: (Note: put the .htc file in the same directory)

[html]
<html>
<head><title></title>
<style>
      button, span.tab-inactive, .tab-whitespace span.command {
        behavior: url('IEFixes.htc');
     }
 
     .tab {
       display: block;
       cursor: auto;
       padding: 2px;
       width: 6em;
       font-size: 2em;
     }
   
     .tab-spacer{
       display: block;
       cursor: auto;
       padding-bottom: 3px;
     }
   
     span.tab-inactive {
       padding-top: 4px;
       padding-bottom: 4px;
       background-color: #d9d9d9;
       color: #0d2474;
       background: none;
       background-color: none;
       text-align: center;
       font-size: 2em;
       cursor: pointer;
     }
   
     span.tab-inactive:hover, span.tab-inactive.hover {
       font-weight: normal;
       padding-top: 4px;
       padding-bottom: 4px;
       color: #0d2474;
       background: none;
       background-color: #c0d0ff;
       text-align: center;
       font-size: 2em;
       cursor: pointer;
     }
   
     .tab-whitespace span.command:hover, .tab-whitespace span.command.hover {
       text-decoration: underline;
       background-color: transparent;
       cursor: pointer;
     }
</style>
</head>
<body>
    <div class="tabs">
        <table border="0" cellpadding="2" cellspacing="2" id="new">
            <tr>
                <td>Button hover:</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Manage content files" class="tab-inactive" id="tab-manage">Manage</span>              
                </td>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Publish the content" class="tab-inactive" id="tab-publish">Publish</span>      
                </td>
                <td class="tab-spacer"></td>
                <td>
                    <span title="Advanced options" class="tab-inactive" id="tab-advanced">Advanced</span>
                </td>
            </tr>
            <tr>
                <td colspan="6" class="tab-spacer"></td>
            </tr>
        </table>
        <p/><p/>
        <table border="0" cellpadding="0" cellspacing="0" id="new1">
            <tr>
                <td>Span hover:</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td class="tab-whitespace">
                    <span style="color:#000080;" class="command">Hide comments</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Browser incompatible issue in table rendition

November 19, 2007 Firefox, IE, Opera, Safari, Window No Comments

Refer to: my blog on Playing with CSS and xhtml document and Browser and Known Issues

I solved the problem to render table in Firefox and IE, as our ICE user increased, some of the uses Opera and Safari (both running in Window). Bugs that I found in Safari is that if border is lesser than 1 px, the border will not be displayed at all. And if border-collapse: collapse style is not used for the table, the line of the border in between the cell will be inconsistent (some think and some thin). Different from Safari, Opera can support border that is lesser than 1 px, but the border-collapse: collapse; still need to be used.

In my “Playing with CSS and xthml document” post, I mention that when Firefox uses border-collapse: collapse; style the result is different again that’s why I have:

[html]
    <!--[if gt IE 5]>
        <style>
            .body table { border-collapse: collapse;}
        </style>
    <![endif]-->

So in order to let all the browser to display the same result, use border beyond 1px and use border-collapse:collapse; (Firefox will behave if beyond 1px)
Solved displaying table in different browsers but same Operating System, now I need to do testing on different Operating System ;) . At least I managed to close one ticket today. Cheers…