Code not working in Firefox and Opera

[Atli]

Hi.

I've created this little window that is shown when I roll the mouse over elements I specify in my html code.

Like a nubbin I test this in IE while I'me writing it, thinking it can hardly be that hard to modify for the other browsers when I'm done.

Now it works perfectly in IE but no matter what I do I can not make it work for Firefox or Opera.

Please, can anybody tell me what those !#"#$%%) browsers arn't understanding? :P

This is what I think is causing the problem.
Full code is here

ToolTip.prototype.Update = function()
{
	// Get mouse position
	if (browser == "MSIE") {
		// Internet Explorer (Also works for Opera)
        MouseX = window.event.x+document.body.scrollLeft;
        MouseY = window.event.y+document.body.scrollTop;
        Width = document.body.clientWidth+document.body.scrollLeft;
        Height = document.body.clientHeight+document.body.scrollTop;
		
    } else {
        // Netscape, (Firefox, Opera, ...)
        MouseX = e.pageX;
        MouseY = e.pageY;
        Width = window.innerWidth+window.pageXOffset;
        Height = window.innerHeight+window.pageYOffset;
    }
	
	// Get element
	var element = $(ToolTip.elem);
	
	element.style.visibility = "visible";
	element.style.width = ToolTip.Width;
	element.style.backgroundColor = ToolTip.backgroundColor;
	element.style.border = "solid 2px "+ ToolTip.borderColor;
	element.style.padding = "3px";
	element.innerHTML = ToolTip.Text;
	element.style.left = MouseX + 10;//(MouseX - parseInt(elemt.style.width.replace("px")));
	element.style.top = MouseY;
}

[HTML]<!--
Panel that opens the ToolTip
-->
<div
id="mydiv"
onmouseover="ja vascript:ToolTi p.Show('What?') ;"
onmouseout="jav ascript:ToolTip .Hide();"
style="
position: absolute;
left: 150px;
top: 50px;
width:200px;
height:200px;
background-color:#000000;"
></div>
<!--
ToolTip panel
-->
<div
id="fdiv"
style="
visibility: visible;
position: absolute;
left: 300px;
top: 300px;
width:100px;
background-color:#555555;
border: solid 2px red;"
></div>[/HTML]

[mrhoo]

ToolTip.prototy pe.Update = function()
should have the reference to the event parameter you use later.

MouseX = e.pageX;
MouseY = e.pageY;

IE doesn't use it, it uses a global event-
but include it for the clients that pass an event parameter:
ToolTip.prototy pe.Update = function(e)

[Atli]

Ahh ofc thank you.

All this trouble cuz of a single e :P

[acoder]

Like a nubbin I test this in IE while I'me writing it, thinking it can hardly be that hard to modify for the other browsers when I'm done.

Now it works perfectly in IE but no matter what I do I can not make it work for Firefox or Opera.

Please, can anybody tell me what those !#"#$%%) browsers arn't understanding? :P

That's the wrong way round. Test on a standards-supporting browser (pretty much any modern browser, but IE), then test on IE. IE is buggy and still fails to support standards properly.

[Atli]

I'm not sure why ppl keep complaining about IE.

In my experience, IE is the one browser I've never had to re-write code for. But almost everytime I write a page I'm spending most of my time re-writing code for Firefox or Opera, depending on which one I use to test the original code.
99% of the time, if it works in either of them, it works in IE.

Also, IE has some nice features that no other browser is bothering to make.
The scrollbar-color styles for example.
And the smooth new look of all text in IE7.

In any case, if you want your code to work in any browser, do you want it to be IE, used by ~86% of the market, or any of the other 14%?

Btw. sry about the rant. All the MS haters out there are just really starting to annoy me, not that I'm saying your a MS hater, acoder :P

[acoder]

Ok, have a good read on this topic. Plus some (many) IE7 bugs.

[Atli]

Nice articles.

The first one had some usefull info.
Tho it looked like most of the problems it describes have been fixed in IE7.
O and omg! It's like the author went out of his way to created this page not to work with IE, and he did a good job!

The second one I liked a bit more.
Tho some of the bugs he demonstrated did really "work" when I tested them.
Im assuming that is because the author uses the Standalon version on Windows XP to spot them, I tried them using both IE7 on XP and IE7 on Vista.

Articles like these wont ever surprise me. I'm well aware that IE is buggy, but like the bullseye on Windows' back in security matters, the ammount of bugs and annoyance at IE is perhaps not because it is any more buggy than other browsers, but rather because there are alot more users to spot them.

Btw. Is it true that IE on Vista uses a new rendering engine, not the "dinosour" that has stayed with us since the browser wars?

[acoder]

One of the main problems with IE is the amount of time taken to release patches when vulnerabilities are discovered. That is the reason why IE6 was simply not secure. Other browsers released patches almost immediately. That's for security, and if you're talking about bugs in rendering, DOM support, etc., you can forget it.

IE7 is a major improvement, but Microsoft really need to speed up bug fixes, patches, etc. otherwise we have the same problem. Btw, it is still based on Trident, but with improvements. See here unless you're talking about Spyglass (IE7 is the first IE not be based on Spyglass technologies).

[Atli]

Yea, I won't argue with that.
My theory is that Bill Gates demands to read every line of code before it is released :P

[steven]

Yea, I won't argue with that.
My theory is that Bill Gates demands to read every line of code before it is released :P

It's quite clear that you have absolutely no clue in regards to the Internet or the world wide web.

The "MS haters" out there, hate for a good reason. There's a group called the W3C that set the standards for the HTML specification and most of the browsers tend to try and follow this standard as closely as possible. Of course, there are some annoying quirks and differences, but worst of all, is InternetExplore r. Not only does it fail to follow standards, they even create their own. They agree to follow standards, yet don't implement them for more than 5 years. A great example is something as simple as PNG image support, which wasn't introduced until IE 7!!

http://www.w3.org/Graphics/PNG/

The PNG specification was first issued as a W3C Recommendation on 1st October, 1996

There's a good reason that InternetExplore r is starting to lose it's monopoly of a markey share and that's because there are better alternatives out there, which display code more like it's supposed to be displayed and are also updated on a more frequent basis, making them safer from a security aspect and also more up to date.


Like you were already told - if you wish to create half decent web applications, code for standards compliant and modern browsers first, then tweak to get your code working with IE afterwards.

[Atli]

It's quite clear that you have absolutely no clue in regards to the Internet or the world wide web.
.

No need to start throwing **** around because sombody has an opinion you don't like. Argue your point if you must, but please lay of the personal insults.
For the record I have spent years studiyng this sort of thing both at school and by myself and I do have a lot of experience.

And just to clarify, PNG images were supported in earlier versions of IE, what they added in IE7 was the PNG alpha (transparency) support.

And as I said before. I do test my applications in Firefox/Opera, mostly because I rarely have to change them to make them work in IE. Wich is almost always the case when I try it the other way arround.
Wheter that is a good or a bad thing, is a matter of opinion.

[acoder]

No need to start throwing **** around because sombody has an opinion you don't like. Argue your point if you must, but please lay of the personal insults.
For the record I have spent years studiyng this sort of thing both at school and by myself and I do have a lot of experience.

Now, now, we don't want a slanging match and that means everyone. Perhaps it was insulting and a bit strong and must be avoided in future. This is a community and we want to promote harmony. Developers working with each other to solve problems, not throwing our toys out of the pram! I hope both of you make up (Steven apologising for offence caused [whether inadvertently], Atli accepting apology). In future, a measured response is more appropriate and language must be controlled.

And just to clarify, PNG images were supported in earlier versions of IE, what they added in IE7 was the PNG alpha (transparency) support.

To be fair, I think that's what he meant.

And as I said before. I do test my applications in Firefox/Opera, mostly because I rarely have to change them to make them work in IE. Wich is almost always the case when I try it the other way arround.
Wheter that is a good or a bad thing, is a matter of opinion.

We'll leave it at that, shall we? My own personal opinion (as you know) is that you should test in Firefox/Opera/<insert your own standards-supporting browser here> then test in IE, though IE7 is a big improvement. You may have been lucky, but if you've done any CSS, IE6 (don't even mention IE5) was a big headache!

[jbailey]

We'll leave it at that, shall we? My own personal opinion (as you know) is that you should test in Firefox/Opera/<insert your own standards-supporting browser here> then test in IE, though IE7 is a big improvement. You may have been lucky, but if you've done any CSS, IE6 (don't even mention IE5) was a big headache!

I keep hearing this, and in practice it is just bad advice. Why on earth would you test in a browser used by less than 10% of you user base first? Who cares if it looks great in FireFox if your user base is using IE? That is the equivalent of getting your desktop application to work in Linux first and then trying to port it to Windows for the 90% of your users. Get it working in IE, then worry about the 10% (being generous here) that are using another browser.

I used to try the approach of getting it working in FireFox (which also has its share of bugs, but prior to IE7 had much better standards support) and after listening to my clients complain that it didn't look right in IE6 over and over again abandoned the practice and started getting the site to work in IE first and then worrying about the other browsers. I've also found that with a few exceptions if it works in IE, it will work on other browsers.

Look at your target user base and cater to that platform first (whether it be IE or another browser). This way you will make your deadlines and may add the additional browsers if you have time or in another release.

[drhowarddrfine]

The reason you code and initially test in Firefox or Opera first is because they are the most standards compliant browsers out there. This is why the previous poster noted that writing code for them almost always works in IE,also but writing code for IE frequently doesn't work in Firefox or Opera. So you aren't coding to Firefox or Opera. You are coding to web standards.

IE7 is nine years behind web standards, old, buggy and doesn't support modern features such as xhtml, svg, proper DOM support and I could go on. Writing code to IE almost guarantees it won't work in other modern browsers while writing code to standards compliant browsers almost assures it working with IE with tweaks. That's why there are hundreds of web sites dedicated to hacks for IE while you will find none for opera or Firefox.

Current world wide web usage of Firefox alone is 16% and growing. In Europe, it's between 20% and 40%. So at least two of every 10 viewers of your page do not use IE.

[jbailey]

The reason you code and initially test in Firefox or Opera first is because they are the most standards compliant browsers out there. This is why the previous poster noted that writing code for them almost always works in IE,also but writing code for IE frequently doesn't work in Firefox or Opera. So you aren't coding to Firefox or Opera. You are coding to web standards..

You are misquoting your poster. He was the original poster, and actually said that what he writes for IE usually DOES work with other browsers where it does not work the other way around.

Also, regardless you are coding to the browser. Example: I just recently implemented a ASP .Net page that implemented drag/drop functionality using client side javascript. As it turns out, FireFox does not allow the style.left and style.top variables to be modified when the doctype is set to XHTML 1.0 Transitional (the default on most ASP .Net pages). I have not been able to find anything in the published standard that specifies that this is not allowed and it IE7, IE6 and Opera all allow the use of the style.left and style.top properties. FireFox handles it fine when the doctype is not specified. I had to work around the issue by setting the style.cssText property directly (which works in IE6, IE7 and FireFox). You can't assume that any browser will support a given implementation according to the standard (although FireFox is by far the one that best meets the standards).

IE7 is nine years behind web standards, old, buggy and doesn't support modern features such as xhtml, svg, proper DOM support and I could go on. Writing code to IE almost guarantees it won't work in other modern browsers while writing code to standards compliant browsers almost assures it working with IE with tweaks. That's why there are hundreds of web sites dedicated to hacks for IE while you will find none for opera or Firefox.

Okay, I assume that you are talking about IE6 since IE7 isn't that old. Reality is it takes more than tweaks to move your page from FireFox to IE6. It is IE's lack of support that makes it the lowest common demonitor. Writing the site to FireFox almost always results in using features that aren't available in IE. Sometimes you just can't do it the same way in IE (although I haven't had these issues in IE7 - yet). Example: One of my developers added dynamic tabs to a site. To actually implement the tabs he used an unordered list with the appropriate styling to make it horizontal with the appropriate tab images behind each list item. This looked great with FireFox (and even IE7), but in IE6 we just couldn't hide a border underneath the selected tab. We spent 16 hours trying to get this to work with CSS before finally giving up and switching all the code that used the unordered lists to use tables instead (which worked in all browsers). In the end 32 hours were wasted. The client didn't care that IE6 was the only browser that showed the defect and cared less that IE showed the defect because it didn't support CSS properly.

There are a number of other examples, including the example that started this thread, where code for the other browsers just won't work in IE. It takes time and money to figure out why the code that works perfectly in FireFox does not work at all in IE, and it takes no more time to port the page from IE to FireFox. Ultimately it comes down to the best use of resources, serving the most users in the same amount of time.

I started out the same way you are pitching, implementing the site for FireFox first and then converting to IE6. In the end, it just cost me too much time and the clients simply put more priority on IE6 as that would serve the most users.

Current world wide web usage of Firefox alone is 16% and growing. In Europe, it's between 20% and 40%. So at least two of every 10 viewers of your page do not use IE

You have just proven my point, although I would like to know what you source is for 16% worldwide usage. Last Neilsen and PC Magazine numbers ahd FireFox at around 6% worldwide with around 9% using other browsers in general, but I haven't found a source for Europe specifically.

However, if your are going to release your site, are you going to get the site out and serve the 8 users, then make the changes to bring on the other 2, or are you going to release the site for the 2 users and bring the other 8 on later. It doesn't take a genious to see which makes the most business sense.

Given enough time, its best to get the site to work with all browsers, but if you're pressed for time (and you will be), my personal experience has been that it is better to do it for IE6 first. Hopefully at some point IE will have enough standards compliance where it is a non-issue or the tide of browser users will switch to FireFox, but I'm not holding my breath.