Simple Ajax-PHP File Browser using PHP and YUI.

This example is to show how you will create a simple file browser in PHP, and get it working with YUI.  Once you deploy it inside your web server it should look like this.

Simple-File-Browser SnapShot

Download Simple Ajax-PHP File Browser here.

Position and Z-index

Possible values for "position" attribute are static, relative, absolute, fixed and inherit. The default value of position attribute is "static". Elements are positioned in browser depending of the position attribute; all elements are placed relative to the next parent element which has absolute or relative position declared.

Static is default value and respects normal document flow, absolutely positioned elements removed from document flow, it does not flow around content of other elements, and content from other elements doesn’t flow around absolutely positioned element. Absolutely positioned elements can overlap other elements or get overlapped.

Z-index in CSS works only when you have set position to relative, absolute or fixed. IE-6 treat position as z-index reset, you should specifically declare position of parent element of Z-indexed element to "static" to have them respond to Z-index correctly.

Display of display attribute in CSS

block, inline and none are the only 3 values supported by all browsers, inline-block is not supported in IE5.5 and FF2, and IE6/IE7 respect inline-block only when it’s assigned to natural inline elements. list-item is supported in all browsers except IE5.5, run-in is buggy in almost all browsers except IE8+ and Opera 9.62+

I suggest you block, inline and none freely where-ever you can, and inline-block if you are targeting IE8+ and FF3+, it’s better not to use rest of the values. Also note <img> is an inline element.

display:block

The element displayed as a block, like <p>, <div>, <h[1-5]>. Block level elements have default display set to block. Block-level elements and elements that have display set to block, always starts from new line/block, unless you float it.

display:inline

inline used to make an block level element behave like an inline element.  width attribute of inline elements are often ignored, whichever element need to support width attribute that should not have display set to inline.

display:none

used to remove an element from document flow, browser skips rendering all elements set to display none, often used to hide/unhide elements in page.

display:inline-block

used when you have to specify width to an inline elements. Refer to the limitations of this property said above.

Others, run-in, list-item, compact, table, table-row, table-cell, table-caption. but if you not just trying to experiment its good avoiding these values.