Posted by Erik Phipps on March 01st, 2009 at 04:57 pm.
With the release of IE8 RC1, I’ve realized that my supported browser testing environment is sadly lacking. The best way to create a testing environment with all the supported versions of Internet Explorer is to use the free virtual machines supplied by Microsoft themselves. In order get full use out of the virtual machines, I’ve decided to install the browsers that I don’t use on a regular basis (Safari, Opera, etc.) on one of them. No need to clog up my physical machine with extra applications if it can be avoided. One drawback is that the Virtual PC’s are time-bombed, but it doesn’t take much time to re-install the four or so browsers needed.
Here is my setup:
Physical PC
Physical Mac
- IE7 (comes installed on Virtual Machine)
Notes:
Why IE7 virtual machine? IE8 RC1 has both IE7 and IE8 rendering engines but some differences do exist between the way IE7 renders and the way the IE7 engine embedded in IE8 renders. Therefore, the IE7 Virtual Machine is necessitated.
Virtual machine hosts file. For the virtual machines, you’ll need to add any local development sites to the virtual machine’s hosts file.
192.168.1.103 dev.myblog.com
192.168.1.103 dev.favoriteclient.com
192.168.1.103 dev.someothersite.org
The physical machine’s IP can be found by running ipconfig /all at the command prompt.
IE7 server error. I also had to disable the IE7 add-on named Diagnose Connection Problems in order to hit certain sites in my development environment.
Tags: supported browsers, user interface design
Posted in Development tools, Web Design | No Comments »
Posted by Erik Phipps on February 20th, 2009 at 12:44 am.
In a case that brings back a feeling of dread in my gut similarly to the judge fancy-pants fiasco, a large law firm has successfully shut down a small start-up who simply posted some run of the mill hypertext links. The lawsuit stated that the start-up was committing trademark infringement. Subsequently, I have infringed five times in this short post alone! Read on at the link below…
Linked Out - A case that threatens the right of Web sites to link freely.
Slate, Via The Consumerist
Tags: links
Posted in Observations | No Comments »
Posted by Erik Phipps on February 04th, 2009 at 10:28 pm.
I ran into the dreaded IE7/IE6 z-index rendering bug today. I knew it was going to show its ugly head once I began troubleshooting the UI component I was working on, but little did I expect it to slide itself behind nearly every element it was supposed to cover! I contemplated a jQuery solution but the thought of targeting so many different elements made my head spin.
I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.
Tags: Web Design, z-index
Posted in CSS, HTML, Web Design | No Comments »
Posted by Erik Phipps on February 04th, 2009 at 09:10 am.
When building HTML/CSS pages or components, I usually follow specific steps in order to keep my code clean and concise. The trick is to start with the base foundation and then slowly drill your way down to the very smallest inline element. These steps aren’t set in stone of course, and I often mix things up due to extenuating circumstances.
- Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
- Start applying structural styles first to get the basic layout worked out.
- Apply any background images on the high level structural elements and/or body.
- Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
- Apply final colors and finish any fine-tuning
Also, don’t forget to test in all supported browsers after each step.
Tags: Code, CSS, HTML
Posted in CSS, Code, HTML | No Comments »
Posted by Erik Phipps on February 02nd, 2009 at 09:54 pm.
The title of this post says it all, but I’ll explain further. I was doing dishes while Naomi was struggle to find some plastic food containers to put our lunches in. She continued searching, all-the-while complaining that we had too many miss-matched pieces, and that was when it struck me. She makes the same exact complaint when sorting her socks!
Tags: observations, Socks
Posted in Observations | No Comments »
Posted by Erik Phipps on January 29th, 2009 at 10:30 pm.
I needed a fail-proof Internet Explorer 6 JavaScript sniffer and it seemed like everything I Googled warned of possible scenarios where it could possibly not work. Then It struck me that since I only needed to detect one version of Internet Explorer I could make a very simple script using Internet Explorer’s conditional comments.
I know what you are thinking, that JavaScript sniffers are outdated and go against all that is web standards. I agree. However, as IE6 fades into the past, isn’t it time we started ignoring instead of bending over backwards for its lack of standards support? This is where a JavaScript browser sniffer comes in!
Others have probably used this technique and expanded it to other versions of Internet Explorer as well. For this post, I am just going to discuss the IE6 version since it is very simple to expand it to all other versions of IE.
Drop this javascript snippet in a script tag in the head of your document:
var browserSniffer = {isIE6 : false}Then, inside an IE conditional comment targeted at IE6, change the value of isIE6 to “true”. Like this:
browserSniffer = {isIE6 : true}What you end up with is a non-global variable that is always equal to false unless the browser is IE6, then it is true. You can then easily dis-invite IE6 to the web standards party!
if (browserSniffer.isIE6 == true) {
// fix some bug in IE6
}
else {
// Do something sweet in other browsers
}Standalone example - IE6 conditional comment javascript browser sniffer
Tags: example, JavaScript
Posted in JavaScript, Uncategorized | No Comments »
Posted by Erik Phipps on January 28th, 2009 at 11:57 pm.
Good old Quirks Mode. It’s like an undead being slumbering in a forgotten sarcophagus waiting for some unsuspecting designer to stumble upon it. A few weeks or so ago, I began a UI project that, over the years, was designed for Internet Explorer’s Quirks Mode rendering engine. I hadn’t worked on markup for Quirks Mode for over a year and it didn’t take long for it to drain me of all my web standard’s complacent life-blood! Sadly, this project is still not finished with and will surely turn me into some blood-thirsty zombie-oid.
Tags: Quirks Mode, user interface design
Posted in Observations | No Comments »
Posted by Erik Phipps on January 26th, 2009 at 11:51 pm.
I love FireBug but one day it became a memory behemoth! It was consuming over 800k every hour or so of work. I did a little poking around and found that I had inadvertently set network monitoring, console logging and JavaScript debugging to be on by default. After a little digging, I found the tip below in the FireBug Google Group buried deep inside a lengthy thread.
Click on the Console tab to activate it, then click on the drop-down arrow and select Disabled from the drop-down menu. Repeat this for the Script tab and the Net tab. Now these three features will be disabled by default. When you want to use any one of them, simply activate them on a per-site basis by ticking the tab next to the appropriate feature and clicking the Apply settings for www.site.com button.
Tags: Development tools, FireBug, tips
Posted in Code, Development tools | No Comments »
Posted by Erik Phipps on January 26th, 2009 at 11:02 pm.
Recently it was brought to my attention that a Jack in the Box advertising campaign included something suspiciously reminicent from my past. The campaign in question shows Jack with a giant, awesome, bowl hair cut. Well, I used to have a giant bowl haircut just like Jack’s! Also, my brother just recently posted a picture of myself with said giant bowl haircut on Facebook. I’m willing to chaulk this up to coincidence, but I really do hope they were inspired by my “do”. That would make my day!
Jack in the Box with bowl cut
Here is my bowl cut! I can still feel the bowl on my head and the cold steel of the scissors as they inch their way across my forehead.
Tags: hair, Jack in the Box, Personal
Posted in Personal | 1 Comment »
Posted by Erik Phipps on September 13th, 2008 at 04:43 pm.
I just had a fleeting moment of stress! It began when I decided to Google the title of my most recent blog posting, Test driving Internet Explorer beta 2 developer tools. When the results came back, there were many postings with similar titles (to be expected) but one that stood out sent a shock wave through my body. It was for a posting on Robert Nyman’s blog and, for a moment, I thought the title was the exact same as my own! I admire Robert’s blog and read most of his postings, especially the ones focusing on CSS and JavaScript. Luckily I soon realized his entry was about IE7 beta 2 and not IE8 beta 2 developer tools. The remainder of his title wasn’t the same either, but because I instantly recognized his domain in the Google search results and saw that they were associated with a title that at first glance triggered familiarity with my own, thoughts of public condemnation due to plagiarism rippled through my brain!
Once I realized my mistake, I took survey of all the blog postings that were similar to my own, and there were many. Some were from small-time bloggers such as myself, and others from larger web design communities. I think from now on I’ll Google potential title’s just to see what’s out there. Maybe I’ll use them and maybe I won’t, but it will be a good exercise in understanding search results. After all, the writer in me could not go on living if I was blacklisted due to plagiarism!
I’m sure every first-time blogger goes through a similar experience that goes a little something like this:
- Start your blog
- Google the title of one of your postings
- See many blogs with the similar titles and:
A. Get stressed about the sheer volume of competition
B. Get stressed about the prospect of being called out for plagiarism
C. Give up blogging.
- Blog about it (or not if you fall under 3 - C)!
Tags: blogging, observations, Personal
Posted in Uncategorized | No Comments »
