We Keep Coding

Chart is rendered in Chrome, but not in FF and IE

H ey there,
I am developing small web-application based on a lot of PHP and JS code and by chance opened the current index.php in Firefox instead of Chrome (my main dev browser).
I was rather shocked to see that one of my main components, a chart (made with amCharts), was not rendered at all. Strangely enough, the watermark of amCharts is shown...
Now I thought it just a hickup and opened the IE to have another browser for comparison, however, same problem there.
I went back to Chrome and everything is still fine there. This really confused me and made me think that it's a code problem, e.g. an unclosed parenthesis somewhere. So I copy pasted my code into several PHP / JS / HTML validators and none had any hits.
In addition I downloaded the Firebug addon for Firefox hoping to find some kind of error, but there is none to be found.
What I also tried to inserting some "console.log" passages in my code to see whether the code execution stops at some point, no luck either. All log messages are shown with their correct values.
Right now I am kinda at my wits end...
Does anyone have an idea / had a similar problem and knows how to solve this or what causes this or how I could find out what causes this?
Any help you can provide would be greatly appreciated.
best regards,
daZza
EDIT:
I fine-tuned the console.log commands and basically backtraced every single step. I now have found the problem, but don't know the source of it. Basically my whole view of logic in programming is breaking apart now... One and the same command returns a different result in another browser, what the hell?!
Here's are some code snippets from the problem area:
xmlData = xmlHttp.responseXML;
var x=xmlData.getElementsByTagName("row");
xmlRowCount = x.length;
console.log("Rowcount: " + xmlRowCount);
for (i=0;i<xmlRowCount;i++)
{
do something with every row in the source xml file
}
Now the problem is that in Chrome the rowcount is correctly returned as 417. FF returns 0 (I guess IE as well).
How can that be possible? How can a predefined command return different values? I just don't get it...
Edit2: To make the browser test complete, I also downloaded and tested Opera. It works fine there, which makes this whole thing even stranger. What is the difference between IE/FF vs. Chrome/Opera?
PS: Here's two screenshots (Chrome and FF) to visualize the problem:

Can you try to use the below code
var x=xmlData.body.all.tags("row");
or
var x=xmlData.all.tags("row");
Hope it helps.

Firefox doesn't show the 'title' attribute

I have created a little tooltip framework, which works fine in all modern browsers. There's one thing that really bugs me: in Firefox this seems to disable displaying a regular title (from the title attribute).
I can't find a cause for this. It's not the mouseover handler that I assign for certain elements, because on regular (non handled) elements, titles are not displayed either. Furthermore, I experimented with this (see this JSFiddle, and it was not replicable).
Can this be some known Firefox bug (I searched the Internet for that, but I didn't find anything relevant) or am I doing something wrong in my scripting, HTML, or CSS?
I've put the whole thing in this JSFiddle.
[edit april 2022] This is a very old question. Do disregard it.

title is displayed in my Firefox, and Firefox doesn’t have any bug regarding the same. Try updating your Firefox, or maybe some plugin in your browser may be causing the tooltip to hide.

Why is this jQuery animation so SLOW on Firefox 4/5?

EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular complex CSS is applied. See the video at the bottom for an example of the problem.
I think is hard to copy and paste the whole code here. So I've create a fiddle for this.
To be honest, CSS is not so important on this (I putted it for have a decent grid). I also removed many functions from my original version, in fact they aren't so important.
The only one that works is by clicking on the buttons + Tracks (which call addTrack()) that adds a new track/line in the grid. Tested on Chrome, IE, and Firefox < 4 version. There isn't much problem. It's really rapid and fluid.
The problem is on Firefox 4 or 5. It's really slow to add the new track/line. It's fast like a turtle.
What the function done is to clone (copy with handler) an element trackOn, which is already written in a hidden field (tracklistOff) and add it (insertAfter) applying a fade effect. (thats means a new line in the grid).
Why this behaviour on Firefox? Too many elements to browse on the DOM I suppose. I need to get rid about this slow attitude... so what can I do?
EDIT
You can hear the difference about Chrome and Firefox (5, last version) on this video. Try to hear/see the difference between clicking on mouse and add new line (with the effect). It's too frozen (also when I try to add more tracks quicly).
Still a problem for me, any suggestion will be appreciate :)

This is not very slow for me. On my computer running Firefox 5 I can add many tracks in less than a second. What performance are you seeing? ("Fast like a turtle" is not a very quantitative measurement. :)
When you have trouble with JavaScript speed, profile it, using the Developer tools for Chrome/Safari/IE or Firebug for Firefox. Here's what I see when I run the profiler on your JSFiddle and click on the +Track button twice:
From this we can see that most of the time is spent in some set function from a mootools library. Since I don't see this library included in your code, I'm assuming the profile is tainted by JSFiddle.
So, we create a standalone test case without the unnecessary CSS and profile that. Now we see this (for several presses of the +Track button):
Almost all of your time is spent in the clone() function.
So what can you do about it? You could try pre-creating the HTML string (in JS) for a template row, and instead of using 'clone' try creating that with:
$(templateString).hide().insertAfter(...).fadeIn(600);

would it be ok if you get just the last element?
something like:
$('.tracklistOff div:last-of-type')
.clone()
.hide()
.insertAfter(($(param).parents('.trackOn')))
.fadeIn(600);
or you could addClass(last) to the last element to get only one

I just tested your fiddle on the following browsers and they all worked well: FireFox 5, Opera, Google Chrome, Safari & IE9.
There were no speed issues but each browser handled the fade slightly differently however everything else seemed to work fine. Not sure what the problem is here. It could be your computer speed but as you're on this site I presume it's decent.

Dropdown select in form not working in Internet Explorer

This is my first question on this site. I have an issue with Internet explorer. My contact form works fine in Chrome, Safari and FF but not in IE. Here is the link for my form.
Basically the problem(s) are that there is no text in the dropdown select and as a consequence, nobody can send an enquiry via IE. Can someone help me out here?
Other information...
I got the fancy contact form from:
http://tutorialzine.com/2009/09/fancy-contact-form/
There are other smaller issues such as width of the selects are different in various browsers but I only care about the above problem.
Many thanks

There are a couple errors in the code. I would suggest using a javascript debugger. Chrome developer tools has a good one, and
Firebug is good too for Firefox
for Chrome:
Control - Shift - I keys to open Developer Tools
Control - Shift - J to open Developer Tools and bring focus to the Console.
Control - Shift - C to toggle Inspect Element mode

In your code there are missing commas and parenthesis for if statements... though those are not needed by the compiler, it's good practice to always wrap if statements inside commas, and always put semicolon at the end of each row.
For example
$("#contact-form").validationEngine({
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true},
failure : function(){use_ajax=false;}
}) // missing semicolon here
and
{
$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error") // missing semicolon here
return false;
}
Since you are having bad arguments call in the debugger, it's better to write the code the right way, then we can try to understand what's wrong.

Annoying IE8 dropdown issue in XP but not windows 7

I have an annoying issue with a select html element that cuts off the text in the dropdown when it is longer then the set width of the select html element.
The select elements need to be a set width to stop the page misalinging, Every browser seems to work except for IE8 running on XP. why? so random and bad compatibility.
please let me know if you need more infomation.
Thanks!

It's a how IE interprets it should render the drop downs ... Unfortunately,there's no easy fix, what you can do is create a replacement for drop downs that handles this in a different way, that can work consistently across browsers ...
Here's a solution I came up with
http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx

i'm not sure of the differences between OS, but just use conditional comments to style the select in IE. style the as well.