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.
Category: Compatibility issues
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 ).
Categories
Something about images
- gif images
- Stands for “Graphics Interchange Format”
- Good compression with images with solid colors (Logos, graphs, text, simple banners)
- Offer single color transparency (One of the colors can be transparent, showing the background where it sits instead)
- It only contain 256 shades, meaning images with lots of colors, like photos, may look a bit “posterized”
- It support animations composed of several gif images
- jpeg images (jpg)
- Stands for “Join Photographic Expert Group”
- Can contain millions of different colors (ideal for photos)
- Compression algorithm specialized in color accuracy, but text may lose sharpness and become blurry
- png images
- Stands for “Portable Network Graphics”
- PNG8: Same as GIF, 256 shades, 1 color transparency, but compress better than gif
- PNG24 and PNG32:
- more colors than jpg images
- Alpha transparency (256 levels of transparency)
- IE6 doesn’t handle transparency too well
- Files are bigger than JPEG
- You want Firefox scroll bars always (to avoid content shifting)
- CSS html {
height:101%;
}
- CSS html {
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
<![endif]–>
- 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
- 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; }
- 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
- 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”
- 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
In quirks mode, it acts like IE 5.
Implements most of CSS 2.1 goodness.
To turn off compatibility mode and revert it back to IE 7 behavior, put the following tag in the head:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
Now, if you want a really good HTML5 ready engine to run on your old IE browsers, put the following tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
That will render pages as in chrome, even as you hit them with IE.