Compatibility issues JavaScript

unload event behavior differences between browsers

Safari and IE fire the unload event whenever you click a link to leave a page or even just close a window or tab with the page. Opera and Firefox let you click the window’s close button without firing the unload event.

Compatibility issues JavaScript

Browser resize event behavior in firefox

Firefox fires this event only once, once the user has let go of the resize bar. All other browsers fire this multiple times as the user resizes a window ( IE, Opera, Safari ).

Compatibility issues CSS

Browsers: Firefox problems and browser compatibility issues with Firefox

  1. You want Firefox scroll bars always (to avoid content shifting)
    • CSS html {
Compatibility issues HTML

CSS Browser conditionals for IE

Example of how IE support conditionals that narrow the code to only a specific browser and version:

<!–[if gte IE 5]> <style type=”text/css”>

 Your code here


Compatibility issues CSS HTML

Browsers: IE problems and browser compatibility issues with IE

  1. IE 6 floating elements that touch each other with a div border, the border of the container get double margin. If you specify 10 for each, you will get 20).
    • The solution: zoom:1 or display:inline – floated elements will behave as blocks, even if you specify display:inline, but nonetheless it will at least fix this problem
  2. IE 6 there is a 3 pixes gap between floated and non-floated elements
    • float all elements, or
    • * html #mainColumn { margin-left: 0; } �
      * html #sidebar { margin-right: -3px; }
  3. IE 6 sometimes missplaces elements that are positioned using the right and bottom properties
    • zoom:1 on the element that is the predecesor of the elements that have the problem
  4. IE in general: one of your element’s margin is knocked out as soon as users mouseover other elements of the page, so the element is knock out of place.
    • Make this element position:relative, even if you don’t add top or left properties to it, it will make it “behave”
  5. You need to specify code for IE 6 and under.
    • You can use the * key, only understood by those browsers: * html h1 { … your css here …}
    • All other more modern browsers will ignore this

CSS tables

  • table {width: 100%} Unless you specify this, the width of the table will depend on the size of the content. At 100%, it will stretch to cover 100% of the size of the containing div.
  • td, th {padding: 10px;} This will be the same as specifying cellpadding.
  • image tag quirk: if you have an <img> tag inside a table, and there is an unwanted space below, set the image display:block
  • text-align controls the position of the text within the tables
  • vertical-align: top; baseline (almost same as top, but all the cells have the same “baseline”, or position on top based on the first line of text. middle and bottom.
  • Space between cells. By default, browsers put 2 pixels, border-spacing: 0px; will eliminate that, but IE 7 won’t understand it. For now, better use the old fashioned <table cellspacing=”0″>
  • borders, when used on tables, cells double up borders as they touch up between cells. table {border-collapse: collapse; } will eliminate those double borders, and gets rid of the cellspacing between cells as well.
  • Making rows alternate colors. Unfortunately there is no pure CSS solution (yet). .odd{ background-color: yellow; } applied to <tr class=”odd”> every other row will do
  • Columns, the HTML tag applied to it are: colgroup (group of columns, styles applied to this applies to all columns on the group). For the col tag, only two sets of CSS will work with: width, and background-properties. You can apply id’s and apply styles with it to columns. Cells styling have preference over column styling, which shows underneath cell styling.
  • <table><caption>Your text here shows before the table as a table label, it can be styled</caption>
  • table-layout:fixed; The width of the columns will be calculated off the first row. Faster load, since the browser don’t have to wait for all the rows to load to calculate the width of the columns.

Browser Box model

To a browser, all elements contained in a document are considered boxes of content (text, images, etc). Each box has the following attributes:

  • padding (surrounding the content)
  • border (after the padding, background-color property stops here)
  • margin (after the border, before the other elements)

The most common box model problem: in IE 5, IE 6 and IE 7, and in quirks mode, the padding shrinks the content instead of expanding the size of the box, as in the other browsers.

You have the choice to pick what box model applies to elements. The attribute is: box-sizing, and the possible choices are: content-box (default, the padding / border pushes out of the content), or border-box (the padding / border pushes inwards, toward the content instead).

It is recommended you set that as part of your reset, so you have all browsers following the same convention. Then again, that would be like saying IE6 was right all along…

Note that this does not apply to margins! Those will still push stuff out, spawning right out of the boxes borders.


CSS code to reset the internal browser’s built in style sheets (that may be different between different browsers)

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address,
variable, form, fieldset, blockquote {  
  padding: 0;    
  margin: 0;    
  font-size: 100%;    
  font-weight: normal;    
ol {     
  margin-left: 1.4em;    
  list-style: decimal;    
ul {     
  margin-left: 1.4em;    
img {     
  border: 0;