Whops, I wrote another Opera showcase..

Monday, 16. January 2006, 02:57:13

Firefox, coding, javascript, compatibility, opera, browsers

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.

Site patching worksActiveX and object detection

Comments

Validator found some minor errors, Hallvord

Beware of being bashed for that, sorry

I posted a link to your page at http://forum.mozilla.ru/viewtopic.php?pid=75069#p75069 for showing how their browser renders a page.
Let's see what they come up with

By Dennis_Hawks, # 16. January 2006, 08:01:39

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?

By Dennis_Hawks, # 16. January 2006, 08:16:11

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.

By Dennis_Hawks, # 16. January 2006, 08:43:56

O9.1 crashes on this page… (may be userJS problem…)

By Kildor, # 16. January 2006, 10:26:19

@Kildor wfm.
Disable userjs then.

By Dennis_Hawks, # 16. January 2006, 11:28:58

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 :-o

By hallvors, # 18. January 2006, 03:01:10

Kildor: regarding the crasher what user scripts do you run?

By hallvors, # 18. January 2006, 03:02:27

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".

By Dennis_Hawks, # 18. January 2006, 13:08:02

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...

By hallvors, # 19. January 2006, 17:21:07

The CSS Validator has been broken since August 2004.

M.

By Moose, # 20. January 2006, 21:20:44

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.

By dstorey, # 23. January 2006, 20:51:25

that same CSS validator doesn't recognize inline-block

By xErath, # 31. January 2006, 21:27:09

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 FF
The 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 supported
var 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 { // Opera
el.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 IE
i=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);
}

By AlunJones, # 19. March 2006, 13:56:07

The CSS Validator has been broken since August 2004.
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;';

By qicaispace, # 29. May 2006, 03:44:11

Hallvord R. M. Steen

Never attribute to stupidity that which can be adequately explained by deadlines

miscoded