Multithreaded

I’ve updated the theme on my blog to introduce that quintessential web 2.0 feature, rounded corners and I thought I’d share some of my thoughts on this.

For guidance I referred to chapter 3 of Andy Budd’s excellent book, CSS Mastery. I first tried the “flexible rounded-corner box” approach. This wraps three layers of div around the content and uses four images to provide the corners by placing them appropriately as background images. The basic technique is to create images with the correct background colour and use a “sliding window” technique so that as the content size grows or shrinks (say by changing the font size), more or less of the left top and left bottom images are exposed. Since these are of a constant colour the user sees it as the corners moving.

The concept is straightforward so I fired up Photoshop and dived in. My first realisation was how annoying it is to generate the right images with photoshop/image ready (remember, I’m a programmer not a designer). After figuring out that I needed to use Image Ready instead of Photoshop to get the rounded rectangle marquee tool, and searching for several minutes before finding the option to change the radius of the corners, I finally created a nice rounded-corner rectangle. Then I had to chop it up into gifs for each of the four corners, a tedious process.

My assumption had been that I would just need the corners and I could rely on the background colour of the content to fill in the rectangle but after installing the images and CSS I realised this isn’t the case. The top left and bottom left images need to be large enough to fill out the content no matter how tall or wide it gets. I don’t like this as it puts a maximum size on the content box unless I use very large images. I don’t like that kind of constraint. Also, this approach requires that I make different corner image sets for each colour box I might have so I moved on to the next section of the book.

This is entitled “Mountaintop Corners” and takes the “opposite” approach. Instead of filling in the corner, this technique uses gifs to mask off the corner. Basically, I created four images where the outside of the corner is white and the inside is transparent so that the content colour can show through. This is much more flexible in that it can be used on any box on the site regardless of the content colour. The limitation is that I would need to create a different set of corners for each background colour I might be using. In my case, the background is always white so I can get away with one set of corners.

Here’s the result:

Okay, not the most amazing of boxes I’ve seen (hey, no gradients, drop shadows or even anti-aliasing) but somewhat nicer than the rectangular look I had before, I think. Plus, it only took the most minor of tweaking to get it all looking good in FF 1.5, IE 6, Opera 9 and Safari, which is a bonus. All in all it took about an hour to do.

But all this raises the question in my mind as to when CSS will start to include things like rounded corners as native features. It seems bizarre to always be having to jump through these kinds of hoops to get visual tricks like this up and running.

When I’m developing in JavaScript I primarily use Firefox to display the results as it has really good tool support for debugging code and inspecting the resulting page. Every now and then I cross-check in IE 6 to make sure things are still working.

I was very surprised the other day to find that when I took all the style settings I was applying to DOM elements created in JavaScript out of the JS code and put them in a separate style sheet, that all the style formatting disappeared when viewing things in IE. It took a good half-hour of hair-pulling, google searches and referencing the dozen or so books I have available on web development before I finally stumbled across a fragment of code which pointed me in the right direction. I had been setting the class name of the new elements using:

domNode.setAttribute("class", "classname");

which works perfectly well in Firefox. However, IE seems to completely ignore this (although the DOM inspector from the IE web development toolbar showed the class apparently being set). The code I came across showed this instead:

domNode.className = "classname";

After converting my JavaScript to use this form, lo and behold my styles were correctly applied in both browsers. This is the kind of thing which I have come across a lot since starting to work with JS - it is really hard to find answers to some really basic things like this. One thing that is clear is that most of the books and other literature is approaching JavaScript from the point of view of HTML and CSS designers, not people coming from a background of software development in languges like Java, C++ and C.

I’m displaying text inside boxes by creating div’s with a 1 pixel border. To ensure the text clipped to the size of the box I wanted I set “overflow: hidden” and “max-height: 1.2em” and it all worked just fine in Firefox. However, in IE6 the box would stretch to show all the text. A bit of playing around has led me to discover that setting “height: 1.2em” instead of max-height works in both browsers.

Now I just need to get to grips with the DOCTYPE declarations. Using HRML 4.01 transitional without a DTD URL means the fonts aren’t the right size in IE6 (for “font-size: smaller”) but if I add the DTD to put IE into standards compliant mode then FF loses it.

I think I need to read this http://www.alistapart.com/stories/doctype/ quite thoroughly.