Anigozanthos

TPG Web Menus

Monday, 19. May 2008, 08:20:08

There's been some discussion on the Opera forums about Opera and web compatibility, which has prompted me to blog this for future reference...

The navigation menus on the TPG web site are nearly unreadable in Opera, but fine in IE, Firefox, etc. More code Opera just can't handle?

Nope.

http://www.tpg.com.au/res/js/stm31a.js

These are old SoThink menus, long since updated by SoThink, but TPG persists in using them.

Line 1010:

nVER=parseFloat(a.substring(a.indexOf("Opera ")+6,a.length));

The menus are sniffing for "Opera " - note the space. That only appears in the User Agent string when Opera is identifying as Firefox or IE (which works around the problem). For Opera identifying as itself, the space isn't there, which results in the sniffing failing and the script determining that Opera is version 0! Which is too old for the script to handle.

The fix is trivial - delete the space:

nVER=parseFloat(a.substring(a.indexOf("Opera")+6,a.length));

I emailed the TPG web master many, many months ago (probably a year or two, now), giving them the exact file name, line number and change to make. Could they find the time to delete a single character? I guess not.

3 Comments

Opera 10 is too old! Again!

Friday, 16. May 2008, 16:46:44

website, compatibility, opera

Last post I talked about a website with broken version sniffing. It's now been a little over a week since then. I emailed them at the time, but have yet to receive a reply of any sort. The problem still exists, so I don't feel guilty at all about naming that web site now...

Congratulations to ... The Australian Bureau of Meterology!

... and their browser sniffer: http://mirror.bom.gov.au/products/IDR.browser_check.v07.js

The "good" news is that Opera is far from the only application to suffer from this sort of short-sightedness. I mentioned that IE has the same problem on the same site, and a comment to my previous post mentions Flash version sniffing with the same affliction.

Although the cynic in me suspects that sites will have different Flash version sniffing code for different browsers, and only the path followed by Opera will have the bug. I will be very happy to be wrong, though!

4 Comments

Opera 10 is too old!

Sunday, 11. May 2008, 05:36:50

web, javascript, compatibility, opera

Not that Opera have released version 10 (yet!), but it looks like at least one site is going to reject Opera when they do. And where there's one site, no doubt there's hundreds of others

Thankfully, a quick search doesn't quickly turn up anything similar, although there are plenty of other bad examples.

Anyway, here's the problem code:

if (navigator.userAgent.toLowerCase().indexOf("opera") != -1)
{
   isOpera = true;
   i = navigator.userAgent.indexOf("Opera") + 6;
   v = parseInt(navigator.userAgent.substring(i, i+1));
   if(v < 7)
      isOperaOld = true;
}

Need a clue? The substring will return exactly one character.

If you're one of those people irritated at how poorly Opera appears to handle web site scripting - this is one of the bigger reasons. It's straight-out careless programming without thought.

I'll mention that the site in question isn't delivering bugs to just Opera. Their corresponding IE code had the exact same problem, except that IE is quite a bit further away from version 10 than Opera.

The problem remains for Opera:

Opera release version 10.
Web sites stop working in Opera, all other browsers work fine.
"Opera is a crappy browser, never works!"

Yet, where is the bug? What should Opera do about it? Never release a browser with a version where the first digit is between zero and six inclusive? Will the Opera after 9.5 be 70.0?

6 Comments

My New Avatar

Tuesday, 1. April 2008, 11:17:20

avatar, april

Not really! I just wanted a place to keep the one my.opera assigned to me for the day!

Nice kitty! (I think?)

0 Comments

Congrats to Safari on Acid 3

Thursday, 27. March 2008, 12:45:48

acid3, web, browsers, standards ...

Many congratulations to the WebKit team on the first public release of Safari that passes Acid3 - the first browser to do so!

This is on the same day that Opera announce reaching 100/100 on the Javascript part of Acid3. Congratulations all round!

The Acid tests are great for bragging rights, but it's important to remember that they test only a tiny fraction of the web technology browsers and developers use. Jeff Schiller points out that while Acid3 has some SMIL tests, the Acid3-passing Safari only passes 5 out 116 SVG animation tests. In other words, SVG animation is still probably unusable in Safari.

Opera doesn't pass Acid1, but that hasn't stopped it from passing Acid2, almost passing Acid3, and being a great all-round browser. The current release of Firefox doesn't even pass Acid2, but that doesn't seem to be causing them any problems.

Ian Hickson has expressed surprise that Acid3 was conquered so soon. It make me feel that perhaps Acid3 spent too much time testing little-used corner cases, that while important, aren't the sort of things web developers are really looking for.

The Acid tests provide a nice, high-profile publicity point for browser developers. They're a quick "media bite" for journalists and those not too familiar with web technology. However, I'm not so sure they progress web standards support that much.

I think I'd much rather see more effort put into developing comprehensive test suites for the various standards. Microsoft recently submitted a CSS2 test suite to the W3C. That type of thing seems to me to be a more productive use of developer's time.

I'm hoping the next Acid test (they'll just keep on coming!) will include features that web developers are wanting to use now. That's not saying the existing Acid tests don't already do that, but I'm thinking of things like rounded corners and multi-column support. I know that the specs for those aren't even done yet - that's why they need to be accelerated and tested. A high-profile test that encourages implementation of useful things, but is still capable of being changed in response to developer experience is what's needed IMHO. I don't think we should be waiting for specs to finalize in their own time. Judicious implementation and testing should be able to force things along faster.

Acid3 is still so new it squeaks, but I'm already looking forward to Acid4!

1 Comment

Layout tables are nice

Sunday, 9. March 2008, 15:45:58

idiocy, design, web, tables

More anti-table zealotry!

Sure, I've seen stacks of sites that over-use tables for layout, but seriously, the existing CSS methods for emulating table layouts without tables are all ridiculously complex, fragile, and error-prone. The amount of hoops you have to jump through to produce a common three-column equal-height layout with header and footer without tables is just stupid. And all you need to do to make it fall apart is look at it the wrong way!

Let's face it - until there is broad support for the proper way to do table layouts (i.e. CSS display:table-* properties - I'm look at you, MSIE!), by far the simplest and most robust way to do a table layout is to use a table. CSS may technically be up to it, but browser CSS support is not.

Here's a case in point. I recently evaluated CMSimple for whipping up a quick and easy to use website. This is a slightly abridged version of the default page template:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head><?php echo head();?></head>
  <body bgcolor="#808080" <?php echo onload();?>>
    <a id="TOP" name="TOP"></a>
    <table align="center" width="750" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top" colspan="2">
          <table align="center" width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="black" style="background-image: url(<?php echo $pth['folder']['templateimages']?>top.jpg);">
            <tr>
              <td valign="bottom" class="sitename" height="80">
                <font color="white"><?php echo sitename();?></font>
              </td>
              <td valign="top" align="right">
                <table align="center" width="100%" border="0" cellpadding="10" cellspacing="0">
                  <tr>
                    <td valign="top" align="right" class="searchbox"><?php echo searchbox();?></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td valign="top" width="200" bgcolor="#c0c0c0">
          <table align="center" width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td valign="top"><?php echo toc();?></td>
            </tr>
            <tr>
              <td valign="top" class="menu"><?php echo sitemaplink();?></td>
            </tr>
            <tr>
              <td valign="top" class="menu"><?php echo lastupdate();?></td>
            </tr>
          </table>
        </td>
        <td valign="top" width="550" bgcolor="white">
          <table align="center" width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td valign="top" class="locator" bgcolor="#808080"><?php echo locator();?></td>
            </tr>
            <tr>
              <td valign="top">
              <?php echo editmenu();?><?php echo content();?><?php echo submenu();?>
                <p>
                   
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#808080" align="center" class="navigator">
          <!-- YOU ARE NOT ALLOWED TO REMOVE OR HIDE THIS LINK WITHOUT A COMMERCIAL LICENCE-->
          <a href="http://www.cmsimple.dk/" class="navigator">Powered by CMSimple</a>
          <!-- IF REMOVE OR HIDE: Then you must pay for a licence - see http://www.cmsimple.dk/?Licence -->
        </td>
        <td bgcolor="black" valign="top">
          <table width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td width="33%" class="navigator" valign="top"><?php echo previouspage();?></td>
              <td align="center" width="33%" class="navigator" valign="top"><?php echo top();?></td>
              <td align="right" width="33%" class="navigator" valign="top"><?php echo nextpage();?></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Yep - far too many nested tables. It's also a fixed width and proved very stubborn trying to make it into a flexible-width layout. In fact, with all the tables in there, I gave up. I pulled it apart and re-built it from scratch:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>
<div id="TOP"></div>
<div id="header">
<span class="sitename"><?php echo sitename(); ?></span>
<?php echo searchbox(); ?>
</div>
<table id="body" class="layout">
<tr><td id="nav">
<?php echo toc(); ?>
<div id="sitemaplink"><?php echo sitemaplink(); ?></div>
<div id="lastupdate"><?php echo lastupdate(); ?></div>
</td><td id="content">
<div id="locator"><?php echo locator(); ?></div>
<?php echo editmenu(); ?>
<?php echo content(); ?>
</td></tr>
</table>
<div id="copyright">
<!-- YOU ARE NOT ALLOWED TO REMOVE OR HIDE THIS LINK WITHOUT A COMMERCIAL LICENCE -->
<a href="http://www.cmsimple.dk/" class="copyright">Powered by CMSimple</a>
<!-- IF REMOVE OR HIDE: Then you must pay for a licence - see http://www.cmsimple.dk/?Licence -->
</div>
</body>
</html>

Much, much more simple! The effort put into the single layout table probably amounted to a minute or two. I know I would have spent hours trying to achieve the same thing without tables. I could have done it, I have no doubt, but it's just not worth the time.

It's all about the right tool for the job. If the right tool (CSS display:table-*) is not available, then the second best (table markup) will have to do. A bunch of nested divs, with carefully matching widths and negative margins, etc is not an improvement!

I'm quite certain that the anti-table CSS mindset is second only to Internet Explorer itself for unproductive time lost forever.

2 Comments

Nostalgia

Friday, 1. February 2008, 16:30:20

history, computing, pic, apple ...

A week or so ago I ordered a set of DVDs that contained the full set of scanned copies of Nibble Magazine. It was one of the more popular magazines that dealt primarily with the Apple 2 computer.

Each month had stacks of programs you had to type in yourself! I only ever bought about 4.5 years worth, and it's really interesting to now be able to read the other 8 years. The computer world has certainly come a long way!

Although sometimes it feels like it hasn't... The Apple 2 was a 1MHz 8-bit computer with 64KB of RAM and about 16KB of ROM (it's been too long for me to remember how all the bits of memory-mapped and page-flipped ROM were organized, let alone add them up!).

I've just finished a project with a PIC chip - 6.25MHz (the chip can go up to 40MHz), 8-bit, 64KB Flash 'ROM', 4KB RAM. Of course, the PIC has everything in a 28pin IC, while the Apple was quite a bit bigger!

I still have my old Apple. I always thought I'd one day find some use for a low-computing-power machine that was programmable. However, I can't think of anything my Apple could do that a PIC can't. I can get basic LCD or complex VGA display modules, SD card readers for storage, RS232 or CAN Bus or Ethernet interfaces for communication.

No, the computer world really has come a long way. But my Apple was so much fun! I still can't ever see myself getting rid of it.

2 Comments

Cloaked document.all support

Saturday, 26. January 2008, 06:08:15

web, compatibility, browser, opera

For the latest Opera snapshot, hidden document.all functionality has been implemented.

Even if this results in some web sites breaking, this is good news on the "web site compatibility" front, as now all non-IE browsers (Opera, Firefox and Safari) now handle document.all in more-or-less the same way. Web developers love consistency!

1 Comment

Microsofts Compatibility Problem

Wednesday, 23. January 2008, 14:16:29

web, browsers, standards, ie

So, the Microsoft team are busy working away on version 8, and they're finding all sorts of web sites are breaking.

Welcome to the world of web development, Microsoft! It's what everybody else has to deal with!

Make no mistake, this is a real problem for Microsoft. They have to support legacy web sites. Often such sites are unmaintained intranet sites that would need to be totally rebuilt to support a new standards-compliant browser.

In their quest for a solution, Microsoft decided to get some outside advice, and the best they could find was a browser-specific meta tag.

I've already left my take on the problem, but I'll repeat it here:

The problem is fundamentally a Microsoft problem. It's a problem where sites have not developed a "web site", but have instead developed an "Internet Explorer site". This is not a problem to be solved by standardizing a new tag for all browsers. It's a problem to be solved by Microsoft and Internet Explorer.

The best solution to handling "Internet Explorer sites" is to have a dedicated "Internet Explorer browser". In practice, that would have to be a standalone copy of Internet Explorer 6. Maybe version 7, but there's already plenty of grumblings from places who have blocked updates to IE7 because it breaks their IE6 sites.

It's already possible to have a "nearly standalone" copy of IE6. Some details such as conditional comments don't work properly, and maybe some other things too, but it's hard to see it being a massive task for Microsoft to sort those out and end up with a truely standalone version of IE6 to be used for those legacy sites.

That would 100% solve Microsoft's compatibility problems and free up their IE development team to concentrate on bug fixes and new standards-based features.

Note that Microsoft's existing VM-based browsers don't solve the problem, as their customers will certainly want to set up icons to launch their legacy sites in the old browser, and I don't see how that could be done with a VM.

0 Comments

Procrastination Specialist

Tuesday, 8. January 2008, 14:31:32

bush, desert, tiddlywiki, holiday

If there were awards for procrastination, I'd be a winner!

Nearly five years ago in April 2003, my Dad and I took a two-and-a-bit week holiday out "bush". We visited all sorts of places, modern and historical. During the trip I kept a diary on my Psion netBook, even going to the trouble of beaming (via infrared) photo thumbnails from my digital camera to ensure I'd later match the correct photo to the narrative.

At the time I thought this work would mean a finished trip diary up within weeks of our return.

Over this Christmas break I made the time to finally finish that trip diary, and bring the diary I made of a previous trip up to the same standard as this latest one.

You see, my Dad and I did a similar trip in April 2002 and I made a simple set of web pages for that, but I wasn't happy with how it had turned out and I wanted to rework the whole thing. That sort of explains the delay doing the second diary.

The latest trip, and now the first as well, have been done using TiddlyWiki, plus a couple of selected plugins: Saq Imtiaz's TiddlyLightBoxPlugin (with some significant alterations by yours truly), Eric Shulman's SinglePageModePlugin, StoryViewerPlugin and NestedSlidersPlugin. I also ported the Javascript from my original trip diary pages into a TiddlyWiki plugin of my own - code that performs latitude/longitude distance calculations.

Anyway, enough of all that. These trip diaries, for those who are interested, are at:

http://www.scss.dyndns.info/family/holidays/

Phew! That's one job off my long todo list!