Birnam Designs Blog -- sharing tips, resources, ideas, and more on web development and design

A few weeks ago I wrote about an exciting AddOn for Internet Explorer that gave IE a lot of the developer tools we have become used to in Firefox. It’s called DebugBar, and is published by Core Services. At the time, I was able to test it out with a Virtual PC using IE6 but had stability problems in IE7 on my native Windows XP box.

The problem turned out not to be with use in IE7, but a compatibility issue with the Google Desktop addon I also have installed (it records your browsing history to be searchable with a Google Desktop search). I’m very happy to report that Core Services was eager to get this fixed, and they have already released a 4.01 version that solves the issue!

After having worked with the AddOn some more, my opinion has only strengthed, and not just in regards to the new stability. DebugBar has become a very useful addition to my toolbox. It’s free for personal use, and professionals have a 30-day trial period before having to decide on the ~$75 pricetag. If you find yourself banging your head over IE development, this could be what you’re looking for and well worth the cost.

Plus, if you’re looking for a good IE tool for working with Javascript, the same developers have also released an early version of Companion.JS, a new tool for debugging Javascript. It might be an early version, but it’s already looking good.

Yes, their search results still use tables and font tags. BUT I noticed today that Google’s results have switched from being listed with <p> tags to using <div> tags! It’s definitely progress.

If you’re interested, I noticed this when one of my Greasemonkey scripts stopped working. My script will number the Google results, which I use to test SEO rankings. If you have Greasemonkey, and you’re interested, you can install Number Google Results here. It’s already updated to work with Google’s new format.

One good trick using CSS is making wrapping blocks of elements. Grouping elements together used to be something developers used table cells for, but when CSS started to be used more regularly, alternate methods were invented. A common use is converting <ul> lists (which are typically vertical structures) into horizontal menus. The really good thing about the CSS-based solution is its flexibility when wrapping is involved.

For table-based designs, the number of rows and columns had to be preset. With a CSS-based wrapping solution the size of the container can dictate the wrapping. For instance:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

Can be produced like this:

ul.wrapping_blocks li { list-style: none; float: left; padding: 10px; border: solid 1px #aaa; } ul.wrapping_blocks li .block { width: 120px; height: 20px; background-color: #1B2B3A; color: #fff; }

<ul class="wrapping_blocks"> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> </ul> <div style="clear: both; "> </div> <!-- necessary to cancel float ... -->

The “block” and “caption” groups are kept together, and sequentially listed in the HTML. They are all floated, and therefore ’stacked’ horizontally, wrapping at the edge of the container. An arbitrary number of these groups can be placed using the same code, and the wrapping is taken care of by the rendering. Here is the same code with ten blocks:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

To get an even better demonstration, this link will open a new window that you can resize and watch how the wrapping takes place.

At first one of the drawbacks of doing this with CSS as opposed to table is the lack of a border-collapse style! As you can see from the examples above, the bordering edges are doubled. Uh-oh! Border-Collapse only applies to tables!

No problem, just reduce the right and bottom margins by -1. If you want thicker borders, just change these margins to the negative border thickness.

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

.collapsedborders li { margin: 0 -1px -1px 0; }
<ul class="wrapping_blocks collapsedborders"> ... </ul>

My new favorite tool has finally been fully released for Windows XP SP2 and Windows 2003 SP1! The Powershell blog gives the details. If you’re at all a fan of command line scripting, you’ll love PowerShell.

If you’re new to PowerShell, my first recommendation is the ArsTechnica guide to Microsoft Command Shell (one of the codenames, along with Monad and MSH, that was used to describe PowerShell before it’s wider release). Other good resources are the Channel9 Wiki Windows PowerShell QuickStart, the PowerShell blog itself, and the PowerShell for Fun blog.

I really had a lot of hope for IE7. I was eager for the Big Day when IE7 would be pushed out to millions of computers around the world, changing the landscape of the internet overnight. Suddenly the support for PNG transparency would be in the majority of internet users! Suddenly CSS bugs would be vanquished, and multi-headed hydra designs would be a thing of the past as IE7 would bring better standards support to the majority of the population!

Oh well. It was a noble thought.

As developers all over the internet are discovering, IE7 simply replaces old bugs with new bugs. Most of what I’m seeing now seem to be pure rendering issues, such as the inability to redraw backgrounds in negatively-margined div elements after the users scrolls out and scrolls back in. I’m seeing some positioning bugs. And big problems with opacity support.

So now I’m stuck importing yet another stylesheet declaration into my html.