Tools for web developer, exploring DOM, CSS, JavaScript, etc

It is always a pain in my neck when I want to debug javascript or try some CSS in IE, in contrast with FireBug in Firefox.
I remember reading something about development tool in IE a while back but never really use it.
I finally remember this tool and get it install, give it a few tries.
It has some features which is the same as Firebug, I think it will make life easier with buggy IE.
Here is the link, IE developer toolbar.

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.

Transparent PNG, IE and FX compatible

The best practice of transparent image is always use .png instead of .gif .

.gif should used for animation, because .png have more color and do more elegant transparency. Static image should always use .png .

But when you view your transparent .png in IE, It will have a background color.

This is another problem caused by mighty IE…

Here is how you fix it by CSS, there are many other fix though.

I like this CSS fix because it follows the separation of content and style rule.

IE

#ID {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="resources/images/UL_corner.png", sizingMethod="scale");
}

Others Browser

html>body #ID {
background-image: url(../images/UL_corner.png);
}

Possible value for sizingMethod:

crop	Clips the image to fit the dimensions of the object.
image	Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale	Stretches or shrinks the image to fill the borders of the object.

Keep two things in mind:

1. The ordering needs to be follow, IE then other browsers.

2. The reference link syntax is different for filter and normal CSS. It follows the Javascript Style

when mouse is over – hover

Hover is active when your mouse is placed over the element.

According to W3C standard, hover is for every element.

CSS

style{ no mouse over }

style:hover{ when mouse over }

The style will change accordingly to make an really useful effect

which can distinguish what you are clicking.

This is almost used on every website nowadays.

but again, IE sucks, IE only support hover for <a> element.

We need to use Javascript to do that effect instead

which I consider as a hack.

Not a good thing to do but life is like that, what you gonna do.

Complete example:

Standard style

CSS:

div.trans {width: 100%; background-color: silver;border:1px solid black; }

div.trans:hover{width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black;}

HTML:

<div class="trans"><p style="padding:5px;width:75%;">Hover here. The works in Mozilla and  Opera.</p></div>

IE compatible style

CSS:

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }

div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTML:

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>

REMARK: use this carefully, mixing with different size and z-index will make hover act nasty.