There is nothing worse than knowning that you have seen a problem before, but don’t recall how you fixed it. When developing web apps, I often come across strange issues that I feel I need to document to save myself from lost time down the road.

Quirk List

  • Auto-padding on buttons (IE) - IE seems to accumulate padding for each word in a button and append it to the left and the right of the button

  • Page width and scrollbars - If you use document.body.clientWidth in Mozilla, it will account for the width of the page accounting for the scrollbar. If you use window.innerWidth, it will not. Since IE always shows the scrollbar, whether or not it needs it, both are correct for IE. Mozilla only shows the scrollbar when it is needed and then shifts the page to make room for it.

  • Image float calculation - When floating an image in a paragraph, Mozilla determines the minimum width of the containing box by adding the width of the image and the width of the longest word in the paragraph, even if the word is well below the second of the paragraph that is wrapping around the image. IE does not have this quirk.

  • IDs and global variables - IE sets a global javascript variable for each DOM element with an xhtml id attribute on the page and will conflict with any javascript variable that attempts to use this name. Mozilla does not have this issue.

  • Event variable - In IE, any function that is called from an event handler automagically has the variable 'event' set. Any attempts to overwrite this variable will produce an error. Mozilla allows event to be used as the first argument to a function called from the handler attribute.

  • Vertical aligning - Mozilla cannot do vertical-align for a <div> element (the way one would expect). The only way to get mozilla to put something in the middle of a containing box vertically is to use a table cell or set the padding top and bottom to be equal or two make the line-height equal to the height of the containing box and then use vertical-align: middle (this last way required the content to be only a single line). The reason for this is that the vertical-align attribute only considers the alignment within the current line, not within the containing box.

  • Styling <hr> elements - <hr> elements have particularly poor styling abilities and in most cases, IE and mozilla alike, it is far better to use a styled div: <div style="height: 1px; line-height: 1px; font-size: 1px; background-color: black;"></div> One thing to watch out for, if you assign a background-color in IE, you must set the font-size to be the same pixel size as the height because IE automatically fills in the <div> with a non-breaking space…​hence text and requires that you resize that empty space to a small font size.

  • In konqueror, in order to make the styles change when setting the class on an element, it is necessary to either toggle the visibility of the element or the display. Toggling the display prevents possible artifacts on the screen.

  • Inline images/embeds in a cell by themselves should be made block-level as described in this article

  • Konqueror cannot call setTimeout() using the anonymous function and cannot clearTimeout() on a setTimeout() which is no longer running (will stop script execution)

  • IE 5.0 will crash if clearTimeout() is called on a running timeout that used setTimeout() with the anonymous function.

  • IE 5.5+ in compliance mode places many of the properties that used to be in document.body in document.documentElement

  • IE 5.0 does not have the ungreedy regular expression matcher (i.e. .*?)

  • Mozilla aligns images differently then browsers of old, in order to be in compliance with the W3C specifications. When placing an image inside of a box, padding appears below the image. The gap you’re seeing is space that’s reserved for the descenders in text. You know, the parts of the g and the j and the p that drop below the baseline. IE places images on the absolute bottom, so that descender space is hidden behind the image. Mozilla places images on the baseline, so the descender space is visible as a few-pixel gap underneath the image. You can fix it by setting a CSS rule: img { vertical-align: text-bottom; }

  • IE can only apply a filter to an image that it has loaded in its cache. Therefore, placing a filter declaration in a CSS include will not work after flushing the browser’s cache.

  • If you encode a Java servlet session id (;jsessionid=<SESSIONID>) in a URL that is used in a meta refresh: <meta http-equiv="refresh" content="0;url=/contextPath/download;jsessionid=0123456789"/> IE will truncate the jsessionid because it thinks it is an argument to the content

Techniques

  • When deleting elements from a form select element (<select>), you should do so in reverse order so that you do not mess up the indexing after you delete the first one. For instance, if you delete the first element, then the second, you will really be deleting the 3rd because deleting the first shifts all elements by one. Working it reverse order will avoid this conflict.

  • WMODE in Flash | Flash + DHTML Menu Article - Allow xhtml elements to stack above flash elements using windowless mode <param name="wmode" value="transparent" />

  • Setting the "defer" attribute on the script tag will instruct IE to load it just after the DOM has been loaded. This attribute is not standard across browsers, but can be useful in a pinch.

Resources