Finally understand CSS Clear Fix

Clear Fix is for FF, not IE. I will explain this.

IE wrongly interpret CSS box model and will enlarge outer block div by it’s inside elements. Event you set those inside elements float style.

On the contrary, FF outer block will not be enlarge if insdie blocks are set to float.

Why do I/we want to know this? for me, it is because my footer element. Content blocks set to float left, left, right is a common practice for three columns web page. This will cause your footer element float to the top of your web page. To fix this, add clear:both to the last block elemnet inside.

Abort Operation in IE under ASP.NET+JavaScript

My colleague develop a page using ASP.NET and some javascript. Specifically say, that is a google map API page.

It runs okay under his local development environment but throw a Abort Operation error from IE when I test his page in a real situation remote environment.

The cause is he add some controls dynamically in code-behind and then use GetElementByID() in his javascript. and he invokes his javascript too early.

If you encounter this problem, you can try to postpone your GetElementByID().

IE z-index problem

I always test my website in both IE and FF for a fair compatibility. Then I ran into IE problem again.

Every z-index works fine in FF and I can’t click my buttons in IE.

I then figure out that the z-index is not working correctly in IE.

The cause is because IE needs the parent div of the nested div to have z-index too, then the nested div z-index will ‘active’.

Thanks again, IE.

Importance of reset CSS

When I work on my first CSS layout, I ran into some problem, there are some strange space in-consistence between IE and FF. Then I found out that tags have default style from different browsers! Like margin of body tag, html tag.

I then do some CSS reset by myself like body {margin: 0;}. I recently found out that Yahoo UI can do this for me. Check this out.

Put this CSS link inside your web page and you are done.

<link rel=“stylesheet” type=“text/css” href=“http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css”>

This is really important if you want to have consistence look-n-feel of your web page from different browsers.