Changing li style

I was trying to make the li go from left to right, without bullets, here is my first try:

li { list-style:none; float: left }

then I realized they have no space between each other, which forces me to add margin...

Finally I saw a better solution elsewhere:

li { list-style:none; display: inline } which basically turns li into an inline element (like an anchor) instead of a block element.

Here is what W3C has to say about inline elements: http://www.w3.org/TR/CSS21/visuren.html#q7

CSS PNG Transparency Hack

Al showed me today that IE has this problem of not being able to display the alpha channel of a PNG properly. Basically he has div tag which is styled to having a PNG as its background.

Here is his workaround:
He also told me that anything that is prefixed with * will be recognized by IE but not other browsers. e.g. *background: none;

I found this article which has an extensive list of hacks & filters:
http://centricle.com/ref/css/filters/

style="position:relative;
height:250px;
width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='dimage.png', sizingMethod='scale');">

DOM API

Query

Methods:
document.getElementById
document.getElementsByTagName - returns array

element.getAttribute(attrName);


Properties:
element.parentNode
element.nextSibling
element.childNodes (can text node have child node? no)
element.childNodes.firstChild == element.childNodes[0]
element.childNodes.lastChild == element.childNodes[element.childNodes.length - 1]

Create
document.createElement
document.createTextNode

element.setAttribute(attrName, attrValue);
element.innerHTML
element.appendChild
element.insertBefore


Test

Use some of the above API to implement element.insertAfter(newElement, targetElement)

Placement of script code matters, but not always...

Need to dig into this deeper as to why...

View Source vs. View Selection Source

If you click View Source, you get your original document, if you click View Selection Source, you get the source reflecting the view that is currently being rendered (e.g. you have modified your DOM tree and you want to see what the source now looks like)