I like this article by Rebecca Buckman, Men Write Code from Mars, Women Write More Helpful Code from Venus, and I totally agree. Not that I have worked with a lot of bad code per say, but comments sure do help. I like this:

They’ll intersperse their code–those strings of instructions that result in nifty applications and programs–with helpful comments and directions, explaining why they wrote the lines the way they did and exactly how they did it. The code becomes a type of “roadmap” for others who might want to alter it or add to it later.

I have definately worked with code like this:

Men, on the other hand, often try to show how clever they are by writing very cryptic code.

To be fair, I have seen great code written by both genders, and not so great code written by both. But I have worked with far more men than women programmers so it is hard to compare.

Do websites need to look exactly the same in every browser? Well, now you know.

Internet Explorer 6 – web developers love to hate it. But, unfortunately, IE7 adoption rate is not going as fast as expected, so we still need to make websites look decent in IE6.

I recently spent quite some time making Century21.ca look decent in IE6, the following is a quick cheat sheet of the most common fixes I used.

1. { position: relative }
   Adding this property can fix all sorts of bugs, from peekaboo bug to repeating character bug. In some cases removing this property can also fix things.
2. {width:auto | pixel value }
   Another common peekaboo fix. Also broken box model fix - add left and right padding and border to box width.
3. {display:inline}
   Element is floated and has any margin larger than zero .
4. {margin-left | right: -3px}
   Repeating character bug. More
5. {background-image:url();
   background-repeat :no-repeat;
   background-position: 0 0; }
   
   If background images are not showing up and you are using shorthand try breaking the properties apart.

More details and hacks

Methods to target Internet Explorer 6 and below

/* targets IE6 & below - CSS valid */
* html {}

/* applies property in IE6 & below - CSS invalid */
_property: value;
/* applies property in IE6 & below - CSS invalid */
-property: value;

After months of hard work, Century21.ca was launched yesterday at 5:21 pm. It is a pretty awesome website, we are very pleased with how it turned out. So if you are looking for a house in Canada this is the site for you! Next up: sleep.

When people ask me what I do for a living I often say, “I am a web programmer”, or “I develop websites” to which they then say, “Oh, you design websites”. At which point I sigh heavily and, depending on who is doing the asking and how much I care at the time, proceed to explain that I do not “design” websites, but I “program” websites, or “make them work” (my favorite illustration: its like if someone tells you he is an auto mechanic and you say to him, “oh, you paint cars”. ). Web developers in general are misunderstood, even by other developers, so I don’t let it bother me (too much).

Today I came across a great article by Christian Heilmann on his site about Web Developers and some of the unique situations we face. A favorite line:

You can be the most amazing developer in your field but if you cannot communicate and distribute this wisdom to others, you are not a lead developer or should get a manager role.

This perfectly describes the situation at one of my former jobs - the so-called “Lead Programmer”
was incapable of sharing or distributing programming knowledge, and it hurt the company. Just one of the reasons I am glad to have moved on. I wonder if it has gotten any better there…

For the past few days I have been working on a frustrating problem with Internet Explorer 7 - two websites that my company created and supports are totally unusable in IE7. The pages take a long time to load, and when they do load they continue to use more than 50% of the CPU. After some hunting, testing and searching I finally narrowed it down to how PNG’s are being used. I have not found any other documentation about my exact problem, so I will attempt to document it here.

Unlike older versions of Internet Explorer, IE 7 supports png file format. This is great – unless you did not rely on the star html hack for png background images in your CSS. For example, I am currently working on a site that uses an opaque png file as a background of the main content area. It used CSS something like this (which I did not write, but was tasked to fix):

.opaque_box {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/ trans.png', sizingMethod='scale');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.opaque_box[class] {
  background-image: url(../image/trans.png);
  }

This css worked fine with IE 6, but brings IE to its knees. It can literally lock-up your computer. When I get a chance I will try to put together a test page to demonstrate this behavior. Work-around is to use either the star html hack or conditional comments to target IE pre-version 7:

* html hack
The bad news is that it is no longer supported, so all css hacks that target IEWin will no longer apply in IE7. But, in the case of png support this is a good thing.

/* IE versions 6 and earlier will apply this rule */

* html .opaque_box {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/ trans.png', sizingMethod='scale');
}

Conditional comments
Conditional comments only work in IE on Windows, and they are perfect for giving special instructions meant only IE. The basic structure is the same as an HTML comment (). So other browsers will see them as normal comments and will ignore them. The following code will include a stylesheet for IE version 6 or less:

Special syntax (I accidentally used lte instead of lt, which had me stumped for half an hour):

• lt: less than
• gt: greater than
• lte: less than or equal to
• gte: greater than or equal to

More details on conditional comments
More on IE7 and CSS: MSDN and p.i.e..

I discovered an interesting Internet Explorer CSS bug today relating to relatively positioned elements inside and element with overflow set to auto.

Say you make a div that scrolls using some basic CSS

.overflow {
height:250px;
width:200px;
overflow:auto;
}

Works just fine, as the example below shows:

But, if you set any of the child elements to

#test2 p {position:relative;}

Scrolling will no longer behave as expected. It seems Internet Explorer incorrectly overlays the relatively positioned element, making it seem “fixed” when when placed in an overflow box.

I have not had the time to look for a word around, except to remove the position:relative (in my particular case I did not need that declaration). For more details the W3C Visual formatting model

A link I came across today while reviewing my notes from the conference: 10 geek business myths

Next week I will be attending The Future of Web Apps a 2-day conference in San Francisco. There are some pretty big names (in the web industry) who will be speaking there, so I am pretty excited. Kris is attending as well, so we will be spending a few extra days in and around the city.