There would be no guarantee that the navigation or the main content would be taller than the screen so I needed to fix the layout to the height of the browser. I also wanted it to be cross browser compatible and sizeable by the user if it was used as a popup.

Lots of Google searches uncovered various different ways of getting a similar result to what I wanted, but most made use of the %100 heigh method. As I needed it to work in IE6/7/8 none of these solutions seemed to work.

Anyway, a lot of playing and a complete re-write later I think I have a pretty good solution that works in:

• IE
• Safari
• FireFox

Take a look at an example here.

This should give you the idea of what I was after. So because I could not find what I needed here is a template for anyone else who needs something like it.

My main motivations for this were that I wanted a little tool to strip out comments and whitespace as well as crunch down some of the style values into more optimized versions. As well as this I wanted to write a program in Ruby that someone else might actually find usefull as well as help me learn a little more about the language.

Currently it can do a pretty good job of removing the comments and the white space and I am working on the rest. You can find out more about it at csspress.net.

A long road

What follows is a little account of how I got this far with it. If you don’t care about implementation stuff you probably don’t want to read on.

In order to distribute the tool I found that by packaging my application as a RubyGem and hosting it on RubyForge anyone can download it simply by typing sudo gem install csspress (anyone on a mac that is) and they can use it right away. No difficult messing with source code.

In terms of writing it in Ruby, that was not crucial to the programs operation. From the users point of view they don’t care what its implemented in, only that it works. The advantage of using Ruby from my point of view is that I like programming with it and with the gem system it makes it child’s play to deploy it.

Gems

In order to package your code as a gem you have to use a specific directory structure. I already had a rudimentary working version of my application so I had to fit it in around this structure. It was a little trial and error at first and then I found New Gem Generator, this provides a command that generates the directory structure and as well as a load of useful files and rake tasks. You might find it a bit over the top (is so try Hoe), but after spending a bit of time and a little more trial and error I have come to really like it.

Tips

If you use a version control system like Subversion or Git you should ignore the doc/ and pkg/ directories as well as the index.html file, as these contain files that will change a lot and cause you a lot of problems.

I also found it useful to have a dig about in some of the gems I already had installed on my system. Its really good to see how other people have done it before you.

What’s coming

If I am honest it took me longer to set up the gem, SVN repository and rubyforge account than it did to write the program. Now its all in place though I can now get cracking on improving the tool and adding functionality.

Download it and give it a go; you might find it useful.

So first up, here is what I was after; a 640px wide wrap div centered on the page with a content div centered inside it. The wrap div has a vertically tiled background image that adds a left and right drop shadow border. The width of the border on each side is 5px. I also wanted a margin between the content div and the wrap border. Because of this I made the content div 600px wide giving 20px on each side for a margin. Giving the content div a left margin of 20px centers it nicely inside the wrap div.

#wrap {
    width: 640px;
}

#content {
    width: 600px;
    margin-left: 20px;
}

So I though I was finished, Safari/FireFox/Opera all playing nicely and so was IE7. Then a quick check in IE6 and IE5 (I am a charitable sole) and doh it’s all on the right side.

The science bit (concentrate…)

A lot of tweaking later trying different margin and padding settings and I was getting frustrated. Such a little problem causing me a lot of anguish. Anyway a quick Google on “IE margin problem” and “IE messing up margin” turned up this forum thread (thanks suzyUK).

So according to that all I need to do is add display: inline; to the content div.

#content {
    width: 600px;
    margin-left: 20px;
    display: inline;
}

Magic, IE5/6 working like a charm and all the others are unchanged. Sorted!

A little searching turned up a few different implementations an I picked Pj Hyett’s as he was the person to make the wayfaring.com one.

The reason I am blogging about it is that a few people commented on the PJ Hyett blog that they could not get it working so I am posting a zip file of a working example here.