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 layouts, using CSS to layout elements on pages

Types of layouts:

  • fixed width: The page size is fixed, no matter what monitor size it is displayed in.
    • The larger the monitor, the more space wasted.
    • In small monitors, users will have to scroll to see all the content
    • Easy to layout and deal with
    • The majority of websites are fixed width
    • 960 px is a common fixed width setting (accomodates screens of 1024 x 768)
    • In order to accomplish this, usually a wrapper is used <body><div id=”wrapper”>… but you could also style the body tag to accomplish this
  • liquid width: the page automatically modify size according to monitor size
    • on really long monitors, the text will be ridiculosly long
  • elastic width: the size of the page elements is based on em’s, so this depends on browser’s text size settings, losing favor due to modern browser’s zoom capabilities
  • max-width: is a compromise between fixed width and liquid width design
  • min-width: expland elements up to a certain point, and then it stops expanding. It doesn’t work with IE 6.

Layout strategies:

  • Start with a mockup:
    • Write down all your main divs, boxes, sections with a pencil or a graphics program
    • Give approximate pixel size and id to your divs (banner, footer, etc)
  • Use background images for your divs to cover design images
    • Keep in mind though: background images are not SEO friendly, and not printable,
    • To position images that are not background, you can use padding and margins

Float-based layouts

  • Usually when you want to align elements in one row, you float them
  • Two columns design: float one div either to the left or the right, and assign a width to it
    • The other div will sit along the other side, creating the other column.
    • You don’t have to set the widht of the div that is not floated
    • Don’t forget that the element you are floating is before the element that is not (in the HTML), otherwise the other element won’t wrap
  • Three plul columns design
    • Float each column to the right, left, or a combination of both
    • Careful with the total width of the wrapper of the columns, if it is less than the three or more columns combined, the last column will drop off the wrapper.
    • You can use negative margins to move columns around if you need to
    • #footer {clear:both} This is a way to keep your footer, or any other elements you don’t want to be floated from going up along with the floated ones.

Problems with CSS layouts:

  1. Float element is taller than its container.
    • The effect: the floated element gets out of the container, in weird positions.
    • Solution:
      • Put an element at the bottom (before the </div>), and make it clear:both. For example: <br class=”clear”> and then the styling will be br.clear {clear:both}
      • Float the containing div itself: it will force it to accomodate all floats inside of it automatically. If you use this solution, make sure the next element to this newly floated element has style clear:both, so you can avoid problems with the other elements of the page
      • Or you can use overflow:hidden; zoom:1; it works amazingly, don’t ask me why
  2. You have a multi-column design, and the left or the right column is shorted than the center column. You want all backgrounds to be the same size.
    • Solution:
      • Create a wrapper around all the columns.
      • Put the background color as an image repeating y
  3. Several columns are floated, but one or more go below where they are suppose to be
    • The causes:
      • The combination of the width of all columns is bigger than the width of the container
      • In IE 6, floating divs add 3 pixels per width, that exacerbates the problem described above
      • Also in IE 6, double margins are applied to divs, and italics will make divs bigger as well.
      • Other possibility: you are setting your columns in percentages
    • Solutions:
      • Never design containers to be too tight or close to their floating divs, give them enough breathing space

Absolute position

  • Absolute positioned elements are completely off the normal page flow: other elements are not even aware these exist, and could get lost underneath them
  • Absolute position is with respect to the main window (browser), or if the item is nested in a positioned element, with respect to the last ancestor.

Relative position

  • You relocate an element relative to where it was supposed to appear given the normal flow of the page
  • Once the element move from that place, a “hole” is left in its place in the normal flow of the page (as oppose to absolute positioned elements).

Fixed position

  • As you scroll down the page, the element stays put in the same place
  • Sort of the same concept of fixed backgrounds

Static position

  • It is the default of all elements, the element appear in the page where it is suppose to appear

Tips for positioning CSS boxes:

  • Don’t try to position everything in the page, use CSS positioning properties sparingly and only when needed
  • Instead of absolute positioning elements based on the main window, always try to relative position containers, and then use those to absolute position the elements inside of it.

HTML Form elements and its CSS formatting

  • <fieldset> Encapsules a set of form fields, that can be styled as a group. Not all browsers behave the same with it.
  • <legend> Provides a label for the fieldset tag, it must follow right after the fieldset tag
  • <input type=”text” /> It is the safest cross browser element in forms that style the same across the board. Things you can change: fonts, background image and color (no images on safari), borders
  • button. Text and colors are customizable, except safari. text-align also works for this.
  • <label for=”name” class=”mylabel”> It allows a label to be attached to a given input field, it goes something like this: <p><label for=”name”>What is your name?</label><input type=”text” name=”name” id=”name” /></p>
  • :focus pseudo-class could be used to add a great effect to the input fields as the user focus on them. But only works on the latest browsers.

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;