Favicon

You know those websites that are able to have a little icon in the address bar? That's pretty cool huh? I thought so too, so I decided to add one.

Apparently, IE seems to have managed to screw it up... surprise surprise.

According to W3C, it's very simple to add one:

http://www.w3.org/2005/10/howto-favicon

Works like a charm in better browsers. However, in IE, they seem to mess everything up. Funny how IE is the one that first introduced this too! Anyways, to get around the IE problem, just create a favicon.ico in your root directory. This will definitely not look as nice as the PNG... but for compatibility, too bad! :P

IE is really screwing their users over... sigh...


W

CSS: z-index

I ran into this problem with stacking order. It seems pretty simple to me, but Internet Explorer has managed to screw it up... again! I don't blame them if IE6 has problems, but for goodness sakes, fix it in IE7!! But alas, that's not to be and I'm stuck here with some crappy options. Actually, I don't mind... my users will though.

Basically, I have a few divs, and they're going to overlap. With proper z-index, everything is fine. However, without it, I can't implement what I want to do. So in the end, it's the users who suffer... that is if they use IE. I ended up using conditional comments (awesome stuff!) to do what I want to do if the user is not on IE.

Apparently, they say that IE8 fixes this and that it will be completely standards compliant, but my question is when will that be released and when will all the users no longer be using anything earlier than IE8... it's definitely going to be a long wait...

Damn IE sucks!


W

IE Address Bar

This is really starting to annoy me. In FF, if you type in a URL in the address bar without the http:// and no www, it is smart enough to put them in for you.

However, in IE, without the www, it doesn't know how to prepend the http:// to your address. This gets really annoying when you're constantly trying to go to localhost or a specific IP address for testing.

Sorry for the rant...


W

Relatively Absolute Positioning

So I came across a bug in our layout that was driving me nuts. I was trying to lay a div ontop of another div, so I was using relative positioning. Seems reasonable. However, when using relative positioning, it leaves a white gap where the div used to be.

I finally came across this nice little CSS tutorial about positioning and I learned something new. Apparently, you can have an outer div with relative positioning, and have the inner div absolutely positioned inside: a relatively absolute positioned div! Amazing! Since absolute positioning removes the div from the flow completely, no white gap is left behind!

One problem in IE though (as usual), is that anything with relative positioning inside the absolute div is covered up (doesn't show). FF is perfectly fine though (go figure...). I got around this problem by using margins instead.

You may probably know this, but for those that didn't... enjoy!


W

IE 6 Hidden Inputs

There are often times when you need to use hidden inputs, whatever the reason is. As the name suggests, these are hidden inputs, and should NOT be displayed.

However, as usual, IE 6 decides to go against common sense and do something strange. In this case, IE 6 seems to reserve some space for hidden inputs. You end up with odd blank spaces here and there, depending where you put your hidden inputs.

It took me a while to figure out it was the hidden inputs (after pulling out my hair several times). I used a very simple hack to get rid of them afterwards:

position: absolute;
left: 9999px;

That zips the hidden inputs off the page and out of sight, even in IE 6!


W

IE 6 Minimum Height

IE is such a wonderful browser... *cough* Anyways, I found a slight display problem with divs in IE 6. Apparently, the div will only shrink to a certain height before it stops shrinking. From experimenting, I found the height to be around 20px.

Anything larger than 20px, IE 6 will display properly. However, anything below 20px, such as 15px, IE 6 will continue to display as 20px. Frustrating huh?

I found a hack to get around this, which is to set the div to:

overflow: hidden;

This will allow the div to shrink to any height, and hide the content inside the div that goes over the specified height.

Annoying.


W