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…

Browser display wrongly when handling empty element

October 25, 2007 Firefox, IE, Safari, xhtml No Comments

I have funny result when try to displaying below html file. The browser like Firefox, Safari and IE (so far that I have tested) give me wrong result. Be careful when use <htmlElement /> when you need to define empty element, it is safer when you do it with <htmlElement></htmlElement>. Your browser may interpret differently :D
This is my simple html file.

[html]

<table>
    <tr><td>
        <div id="table1">
            <table border="1" summary="This table should be empty"/>here some text
        </div>
    </td></tr>
    <tr><td>Some text</td></tr>
    <tr><td>
        <div id="table2">
            <table border="1" summary="This is correct"></table>
            <p>here some text</p>
        </div>
    </td></tr>
    <tr><td>Some text2</td></tr>
    <tr><td>
        <div id="table1">
            <table border="1" summary="This is correct because this table is empty"/>here some text
        </div>
    </td></tr>
</table>

Output captured from firebug-Firefox extension

[html]
<div id="table1">here some text
     <table border="1" summary="This table should be empty">
       <tbody>
          <tr><td>Some text</td></tr>
          <tr><td>
                 <div id="table2">
              <table border="1" summary="This is correct"/>here some text
                 </div>
          </td></tr>
          <tr><td><Some text2</td></tr>
          <tr><td>
                 <div id="table1">here some text
                      <table border="1" summary="This is correct because this table is empty"></table>
                 </div>
          </td></tr>
       </tbody>
     </table>
</div>

Playing with CSS and xhtml document

October 19, 2007 Firefox, IE, Safari, css, xhtml 2 Comments

Displaying unicode character in different OS, add below code to your css since different OS have their own default font:

Displaying unicode generated from Open Office

.spCh {
    font-family: "Lucida Grande","Arial Unicode MS", sans-serif; font-size: 1.2em;
}

Supporting website:

Problem still existed:

I am not sure why Firefox in MacOs still display the unicode character differently although Lucida Grande is applied to font-family, this problem not existed when Safari, is used for the same Mac.

Border is displayed differently in IE and Firefox.

Style for each td:

style=”vertical-align: top; border-bottom:0.05pt solid #000000; border-left:0.05pt solid #000000; border-right:none; border-top:none; border-style: none none solid solid; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 0, 0) rgb(0, 0, 0); border-width: medium medium 0.05pt 0.05pt; padding: 2.75pt; vertical-align: top;”

Result shown in IE: Result shown in Firefox:
IE result Firefox result

In order to get the same result as Firefox (this is the excepted result), wrap below code in head of html document (not, if you have style coded in html already, put below code separately):

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

Why do checking? Because Firefox and Safari will display the table without border ;)

Happy trying :D