Whops, I wrote another Opera showcase..

Web developers like to complain about browser x or browser y being "difficult" to work with. Bah. Sure, there are really annoying bugs in any browser, but most of the time the one you test initially in and are used to will be easy. The others will present small or big surprises. A couple of times I have written pages that only worked in Opera, because I happened to use both standardised features that are missing from Internet Explorer and IE-specific features supported by Opera but not others. A natural risk when one knows a specific browser's capabilities very well.

Here's a page I created recently that I thought was pretty standards-compliant (apart from event.offsetX and offsetY – perhaps I should ask WHAT WG to standardise those?):

Japanese new year's breakfast

..but whops, I did it again: it only appears to work in Opera. All the content is visible in any browser and I simply like creating Opera DOM capability showcases, so I won't add workarounds – but it makes me rather curious that even old Opera 7.23 does a perfect job but new FireFox 1.5 fails. I know IE doesn't get the setAttribute('style', 'some css code') part, but I have no idea where FireFox stumbles.


14 thoughts on “Whops, I wrote another Opera showcase..

  1. Aha!Here is their first comment – "This page is rendered ok by Fx. But it is clear – it's got opera banner, so it is designed for Opera, that's why it glitches".Can you see any logic in it?

  2. BTW, if you validate the hrstiler.css file and ammend it accordingly – it will work in Fx too. Though, imagemaps (or whatever you call it) are not shown.

  3. Dennis, thanks for reminding me of validating. Fortunately there were no structural errors, only one accessibility error (missing ALT) and some nitpicking. I have fixed all but two IMG attributes that I need to replace with CSS at some point. I have also fixed some of the CSS errors and the rest aren't really errors IMO (why does the CSS validator say "transparent" isn't a colour value?? Some of the "errors" I fixed didn't quite make sense either..)Unfortunately, none of this made the image mouseover "tooltips" on that page work in my FireFox (UA string: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8) Gecko/20051111 Firefox/1.5). I would file a Bugzilla bug if I had time to investigate, but I have more than enough browser debugging to do as it is..I'm curious what the thread says, too bad I don't read Russian 😮

  4. Hallvors, thanks for correcting the css file. Though it seems to work the same way afterwards in Fx. The top background as I understood should be fixed at the top and not be covered by white (! hehe) background of the page itself when scrolling. The tooltips are not shown either.So, some parts Fx fails to render/parse correctly.Actually those comments, posted as a reply to my posting the link to your page, are 1st poster – "it's rendered correctly, isn't it clear that the page has got Opera banner and it means it is designed for Opera – that's why it glitches".I wrote to him that the page is not rendered in Fx correctly, that he should compare the rendering in both Opera and Fx. So there's something wrong with Fx if it fails to render some pages and lacks a support of some CSS, though the page is rendered correctly even in 7.23.The 3rd poster gave a link to css validator (actually it is "CSS Validator version 2.0"- hehe).I replied to him that I reported about css validation errors to the author.After that the discussion was really killed and turned to another way by another poster who posted the stats about Fx usage in Europe from http://www.xitimonitor.com/. Everybody really forgot about the page in question.The thread is called "Firefox vs Opera. Part II. Searching for truth".

  5. Yes, the tooltip part I'm really curious about. The styling with flowers and semi-transparent overlay whe you scroll is so experimental I'm impressed FireFox renders as much as they do. But I can't see any reason why it would choke on the javascript…

  6. Just to let you know it also works in Panther era Safari, and I guess in Tiger too. Would be interesting to see how KHTML handles it.

  7. IE can't have 2 onload events, relevancy.js and tooltips.js. They must be combined in one function.IE doesn't do setAttribute('style', 'some css code'), but el.style.cssText, as does FFThe e.offsetX is replaced by e.layerX for FF.Switch off, temporally, the onload in relevancy.js then change these:function ommv(e){ // mousemove handler for image e=e||window.event; posX=(document.all)? e.offsetX : e.layerX; posY=(document.all)? e.offsetY : e.layerY;if(! ( e && posX && posY) )return; // required event object properties not supportedvar el;for(var i=0; i<coords.length;i++){if( posX > coords.l &&posX < coords.r &&posY > coords.t &&posY < coords.b &&document.getElementsByTagName('dt')[coords.n]){ el=document.getElementsByTagName('dt')[coords.n]; if(el.style.cssText) { // IE and FF el.style.cssText='position: absolute; top: '+(posY+30)+'px; left: '+posX+'px;width: 150px;background:#fff; border: 1px solid #f00';el.nextSibling.style.cssText='position: absolute; top: '+(posY+30+el.offsetHeight)+'px; left: '+posX+'px;width: 150px;background:#fff; border: 1px solid #f00'; } else { // Operael.setAttribute('style', ' position: absolute; top: '+(posY+30)+'px; left: '+posX+'px;width: 150px;background:#fff; border: 1px solid #f00');el.nextSibling.setAttribute('style', 'position: absolute; top: '+(posY+30+el.offsetHeight)+'px; left: '+posX+'px;width: 150px;background:#fff; border: 1px solid #f00'); } if(!el.style.top)el.style.color='#a00'; // this one is for IEi=coords.length; // stop searching}}if(activeEl && activeEl != el){ if(activeEl.style.cssText) { // concanate; just changes the position property activeEl.style.cssText+='position:static;'; activeEl.nextSibling.style.cssText+='position:static;'; } else { activeEl.setAttribute('style', 'position:static'); activeEl.nextSibling.setAttribute('style', 'position:static'); }activeEl.style.color='';}activeEl=el;}// onload:if(window.addEventListener){window.addEventListener('load', init, false);}else if(document.addEventListener){document.addEventListener('load', init, false);}else if(document.attachEvent){window.onload=function(){ document.getElementById('foodimg').onmousemove=function(){ommv()}; // addRelevantPagesToNavigation; };}else{setTimeout(init, 400);}

  8. The CSS Validator has been broken since August 2004.if(activeEl && activeEl != el){if(activeEl.style.cssText) { // concanate; just changes the position propertyactiveEl.style.cssText+='position:static;';activeEl.nextSibling.style.cssText+='position:static;';

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s