Archive for February 28th, 2008

new millennium with web 2.0

After much anticipation, it’s finally here!!

I present you the completely rewritten New Millennium - New Millennium with web 2.0 :)

It’s done in ajax with the help of jQuery. The idea is to create a site with no page refresh. Although it was fun, toward the end it was getting a bit tedious. I felt like doing a cross-stitch. Overall, I found ajax coding with no IDE support hard to debug. Some of the bugs eluded me quite a bit. I’ve done extensive testing on the final product. I hope it’s a good one.

It has been a very nice learning experience. I think jQuery is awesome but it’s a client side only library. So if I go try GWT and I should have a very good comparison.

IE input background image issue

IE strikes AGAIN!

Just when I thought I was 100% done with the revamp of New Millennium, I noticed an UI issue in IE. I’m surprised I didn’t notice this before. It shouldn’t be anything new. I did some google research but didn’t find anyone mentioning it either.

Applying background image to input tags should be nothing new. You see the little search icons for search inputs all over the web now but did anyone notice in IE if you have a background image set to no-repeat and someone puts some very LONG text in the input field, the background image SCROLLS with the text? This causes very odd behavior.

Here’s my input background-image. I pick this one so I can do background image affect on hover by manipulating background-position.
background image
CSS:
input.formInput { width: 255px; background: #a99787 url(formInput.gif) left top no-repeat; border: 0; padding: 3px; height: 22px; color: #302721; } input.formInput:hover, input.formInput:focus { background-position: -261px top; }

In Firefox, it looks great but in IE if you start putting very looooooooooooooooong text in the input, it will look like crap.
background image looks like crap in IE

Try it out yourself

So does anyone have a good solution for this issue?

If I were to do it, I’d wrap the input in a container and put the background image on the container and hopefully by applying the hover affect on the container, it would get the desirable effect. Of course I will need to test out my theory. But it’s past midnight so I should get some sleep for now.

AND it does work. check it out.

Man, I just love IE.