Web Development and stuff…

A few weeks a go i was working on a new blog to replace the current Wordpress software. The last two weeks however i had no time to work on it. So last night when i couldn’t sleep i loaded the site from my SVn repo. And when i opened it in firefox i was suprised to see some weird black borders around some page elements. After checking my CSS i confirmed it was not created by any CSS on the page.

After an hour i got frustrated and went to bed. So this morning i was looking at it. An noticed a horizontal scrollbar. That shouldn’t be there i thought. And when i looked closy at the images on the page they looked correlated. It was like the page was zoomed in. Then it hit me. Firefox has a new zoom function. So after hitting

View > Zoom > Reset

The page was back to normal. It’s minor issue. But maybe it will help somebody from going crazy

When designing pages for multiple browsers. It’s pretty much a pain in the ass to get things looking similar cross all browsers. There are many Javascript libraries to help and ease the pain. But it doesn’t solve all. And hoping people will stop using IE 6 also doesn’t really help. So we are stuck in getting things work in all those quirky browsers. So a developer / designer probably has multiple browsers installed. On my dev box i only use Firefox.

But when i have to build a design. I need to check al those browsers. So i have Firefox, Opera and Internet Explorer installed. The problem with internet explorer is that you can’t run multiple versions on the same machine. Well at least not without a long hacking session. To solve this problem most of the time i used something like Virtual Machine or Virtual Desktop. The problem is that applications like that eat memory. And there is always the minor annoyances with losing focus on my IDE because the VM window is still active.

Some time ago. My coworker Bart send a link to a tool called IETester. This nice little (24mb) tool let’s you run multiple versions of Internet explorer on one machine. It’s possible to test pages in version 5.5 and up. even the upcomming (still in beta) version 8 is supported. At the time of writing it is still in alpha stage. But it works great. I did have some unexplainable crashes. And there are some known issue’s like:

• When resizing, the content may disappear. I am working to correct it on the next version.
• The Previous/Next buttons are not working properly
• Focus is not working properly
• Java applets are not working
• Flash is not working on IE6 instance.

Besides that it does what it’s build for. A nice tool to add to your arsenal.

Lately i’ve been working on a project. And one of the requirements is that the user interface works from IE 6 and up. Now i have to admit that it’s been a while since i did CSS. And forgot what a pain it is to get things working cross browser. There is always those little irritating IE 6 bugs that double your working time because you either need to fix a bug. Or because you need to create a different stylesheet for a certain browser.

So when i hit the 3 pixel gap bug in IE 6 again. I wanted to start and create a javascript based fix. But first did a google search. To see of nobody had the same genius idea. And low and behold. Somebody did. I found this great little Gem ie7-js It’s a Javascript library created by Dean Edwards. For a lot of things their already were fixes floating around the web. But this has it all. It fixes the PNG alpha transparency bug in IE 5.5 and 6.0. Makes sure the :hover element is not only usable on <a> elements. And a whole lot more. The new IE8-js version is even more complete. And adds advanced CSS selectors and properties.

Using it is as simple as including this in the header section of your (X)HTML:

<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->

*demo http://ie7-js.googlecode.com/svn/test/index.html

*site http://code.google.com/p/ie7-js/