First of all - sorry danes, but this page is in english because of whom it might have an interrest for.
And then a little "cool down" from the headline ':)
I don't HATE Firefox - I just think there is to much focus on trying to make Firefox a better browser then Internet Explorer. When I read articles from the real security-experts, there are really no winner on this matter. They both have their downsides and upsides. And NO i'm nore employed or paied by Microsoft for writing this article ':)
I've been making homepages for about 10 years now, and therefore have a great deal of experiense in writing HTML, javascript and DHTML for both (all) browsers. In the begining I really loved IE for it's interpretation of HTML and javascript. My saying was then - "When I've found 10 ways of doing it in IE, only 1 of them worked in Netscape and Opera". It has ofcaused changed a lot since then. Not only has the Mozilla gotten better, but I've also learned the "right way" of doing things ':)
But still I sometimes find myself spending to much time trying to figure out a certain problem, and this pages will be a collection of these situations.
1: Padding on span elements.
I found this issue when making a menu for a customer at work. It turns out that Firefox is interpretating the padding-left and padding-top differently. In other words, padding-left is what I expect, it adds space from the left of the element to the text. Padding-top does the same thing, but it also moves the item vertically outside of it's parents limits!
The code: (font-size is 10px and Doctype is HTML 4.01 traditional)
The result as I expect it:
As you can se the top white td is aligned bottom, and the spans (red) has padding on sides and top/bottom.
Top of the green line is the line between first and second td (tr).
The lightblue div is aligned bottom in second td, and is the container for the lower spans.
Note: Actually I'm a little in doubt if height is really supposed to be supported on the spans. W3C defines that block-level and replaced elements should support height, and span is inline element. But IE must interpretate the spans as replaced elements when height is indicated.
The result in Firefox 3.5.1:
As you can see the amount of padding-bottom (5 pixels), is also the amount the spans from the first td is moved down. Exceeding the limit of it's parent td.
The second row of spans (Text 3 and 4) is also Exceeding their parent's limits (the lightblue div).
This is done even though their position hasn't been changed to absolute and they have no margins. In my mind, if this was the correct way of doing it, they also ought to be moved horisontally - actually overlapping each other.
According to the bounding box the padding should be inside the container, and therefore also inside it's parents limits.
2: Name is not Id on formelements.
This is actually not Firefox doing anything wrong. I just find it annoying, and a waste of bytes, that I need to indicate both name and id attributes for formelements all the time. Often I need to extract values from form elements with the document.getElementById(id) function in javascript. In IE you can actually extract the value even if the element only has a name attribute. It is as if IE thinks "This is wrong, but I know what you mean - so I'll do it the correct way for you". And in IE that means document.getElementByName(id), but this function is not supported in Firefox.
I also know that Name attribute is not always unique, as id is supposed to be. Eg label for="" MUST be for a unique id for radio buttons. But again - In my mind the name attribute is required for collecting the field serverside, the id isn't required. Therefore many bytes could be saved leeving id out on most form elements, and the code overview be easier read.
3: W3C validation requires alt on images
But for some reason Firefox only shows tooltip when the image has a title attribute. This means that every image on my pages needs the same text in both alt and title attribute. This is really a big waste of bytes and overview. I would expect this if doctype was changed from HTML 4.01 to eg. XHTML as seen in Internet Explorer 8. But for some reason Firefox want's me to waste my space on this!
4: date.getYear() is 1900 years behind!
Doing date calculations in Firefox you need to remember that date.getYear is 1900 years behind for some reason...
var myDate = new Date();
alert(myDate.getYear());
I don't really know why, and to be honnest I really don't care why. I'm the "keep it simple"-type of guy, and trying to make me responsible of remembering this is ridiculous, because it's really rare I work with dates in javascript. A simple workaroung is ofcause just to check if result os less then 1900, and then add 1900 if it is. But why on earth do I need to remember this? ':(
5: Anchor.click() is not a function!
Sometimes I need to send a click-command to an existing anchor on the page. In cases where the anchor is actually generated serverside, or the anchor also has an onclick-function to eg. hit Google Analytics, it's not always easy to dublicate the functions of the anchor, hence reuse the anchor is preferred.
if (document.getElementById("myAnchor")) { document.getElementById("myAnchor").click() }
Doing this in Firefox results in an error message claiming that click() is not a function on the object!
Simple workaround is:
location.href = document.getElementById("myAnchor").href
But this is not an option if the link also has an onclick-methode.
Most correctly workaround: http://www.webdeveloper.com/forum/showthread.php?t=182588 - Good luck... ';)
6: Error console claims cursor is unknown!
I havn't yet found out why, but I still see this error message often. When I style an element with style="cursor:pointer;", for some reason the errorconsole claims it doesn't know this value - though it works fine!?.. I havn't found any other ways to get a hand when hovering the element with the mouse, and everywhere I read they also mention this way of doing it.
Summery:
This is what I just remembered when writing this page at first. More will follow when I cross it from time to time. So do feel free to check in once in a while, to see if I've remembered more issues. ':)
A little HTML-file for you to play with can be found here:
example1.html (1,40 kb)
Abonnér