Tuesday, 26 July 2005

 

Software: IE6 crops child elements

While trying to implement a list of buttons, I found that IE6 crops the tops and bottoms of child elements when the parent element is a block level element. For example, if the parent is a ul element, the li elements would be cropped.

If you are using IE6, you should see that the top and bottom borders of the following TEST boxes are missing. Firefox users would see two boxes with borders around each one, as expected.

  • TEST
TEST

Below is the code to generate the TEST boxes.

<ul style="position:absolute">
 <li style="border:1px solid darkgreen;display:inline;">TEST</li>
</ul>
<div style="position:absolute">
 <span style="border:1px solid darkgreen">TEST</span>
</div>

The work-around is to add padding at the top and bottom of the parent element, e.g. padding:1px 0px 1px 0px, resulting in …

  • TEST
TEST

Labels: ,


link posted by Kam-Hung Soh @ 2:30 PM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

Monday, 25 July 2005

 

Software: Chubby IE6 buttons

I found that the padding IE6's form buttons is proportional to the length of the button's text. If you're using IE6 and viewing this page, you should see that the padding in the second button is larger than the padding in the first button.  

Labels: ,


link posted by Kam-Hung Soh @ 4:42 PM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

Monday, 18 July 2005

 

JScript in IE6 to read database

Inspired by this Kuro5hin article, I hacked up a slightly nicer JScript implementation to read database tables and generate HTML tables in a browser using DOM functions such as insertRow() and insertCell().

Try it out

If you want to try it out, first create an Excel workbook called Test.xls with a page named DataTest. In DataTest, create one column with a heading StringValue and another column with a heading NumericValue. Enter some test data in those columns, then save the file.

Next, copy the HTML code at the end of this article, change the DSN path appropriately and save it in a file.

Finally, load the HTML file in IE6. When you select the Test button, the data in your workbook should be displayed in the browser.

Notes

If you start Excel and the user interface doesn't initialize properly, the cause is usually the Excel automation server not exiting. Just start Windows Task Manager, and kill the errant Excel.exe process in the Processes tab.

I chose Excel instead of Access as the database because it is easier to test simple programs without having to create a table design.

Sample JScript and HTML to read database

<html>
  <head>
    <title>DBTest for IE6</title>
    <script type="text/javascript">
      function readDb(tableId) {
        var conn = new ActiveXObject("ADODB.Connection")
        var dsn = "Provider=Microsoft.Jet.OLEDB.4.0;"
        dsn += "Data Source=C:\\CVS_STUFF\\HTML\\Database\\Test.xls;"
        dsn += 'Extended Properties="Excel 8.0;HDR=Yes;IMEX=1"'
        conn.Open(dsn)

        var rs = new ActiveXObject("ADODB.Recordset")
        rs.Open("[DataTest$]", conn)

        var outputTable = document.getElementById(tableId)
        if (!outputTable) {
          alert("Cannot find " + tableId)
          return
        }

        if (!rs.bof) {
          var rowIndex = 1
          rs.MoveFirst()
          while (!rs.eof) {
            var row = outputTable.insertRow(rowIndex)

            var c1 = row.insertCell(0)
            var data1 = rs.Fields('StringValue').value
            var text1 = document.createTextNode(data1)
            c1.appendChild(text1)

            var c2 = row.insertCell(1)
            var data2 = rs.Fields('NumericValue').value
            var text2 = document.createTextNode(data2)
            c2.appendChild(text2)

            ++rowIndex
            rs.MoveNext()
          }
        }

        rs.Close()
        conn.Close()
      }

    </script>
  </head>
  <body>
    <h1>DBTest for IE6</h1>
    <form action="javascript:readDb('testOut')">
      <input type="submit" value="Test"/>
    </form>

    <table id="testOut">
      <tr><th>StringValue</th><th>NumericValue</th></tr>
    </table>

  </body>
</html>

Labels: , ,


link posted by Kam-Hung Soh @ 1:52 PM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

Thursday, 7 July 2005

 

Software: Mark of the Web partie deux

Faced with the prospect of having to add MotW on every page I develop on my local disk, I had to find a better solution. Luckily, some nice people at PHD Computer Consultants Ltd explained how to disable this — cough — feature in IE6. In Tools / Internet Options / Advanced dialog, check Security / Allow active content to run in files on My Computer. Restart IE6 and load the offending file. No more Information Bar. Yay!

Labels: ,


link posted by Kam-Hung Soh @ 1:30 PM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

Wednesday, 6 July 2005

 

Software: HTML behaviours

Tags in DHTML pages quickly get cluttered with numerous on-some-event="fn(id)" attributes, making it nightmarish to maintain hand-coded pages. Instead bind elements and behaviours (events and functions) separately from tags. Microsoft introduced behaviours for Internet Explorer 5.5 for special effects in a page but their implementation uses non-standard additions (unsurprisingly) to CSS. Ben Nolan wrote a browser independent behaviour library and Lambda-the-ultimate forum has a discussion. Using CSS selectors to specify elements allows multiple HTML elements to have the same behaviour and multiple behaviours to be mapped to one HTML element (as long as the events don't overlap). Très cool indeed!

Labels: ,


link posted by Kam-Hung Soh @ 11:45 AM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

Monday, 4 July 2005

 

Software: Mark of the Web

Since "upgrading" to Windows XP Service Pack 2, IE6 annoys me with an information bar warning me about active content whenever I load a local HTML file with Javascript code. The information bar does not appear when I load the same file from a network drive or from a Web server. It turns out that this is a new feature to protect me from myself. The workaround is to insert a Mark of the Web, which is just a comment string that IE6 adds to every web page saved locally. For every day work, <!-- saved from url=(0014)about:internet --> inserted at the start of the file is enough. The number in the parentheses is just the number of characters after the closing parenthesis.

Labels: ,


link posted by Kam-Hung Soh @ 3:14 PM   0 comments
Digg it!   Del.icio.usDel.icio.us   Earthlink   Furl it!   Reddit!   StumbleUpon ToolbarStumble It!   SlashdotSlashdot It!   Yahoo MyWeb

This page is powered by Blogger. Isn't yours?