Hiding Hidden Objects

I thought I'd start this new blog with something simple -- a CSS layout problem that has bugged me for a long time and that I finally solved for the design of this blog.

When I've released applications through my main blog I've always tried to make them easy for people to use, and my approach has usually been to use Java Web Start to download, install and run the programs. This works really well as the deployment script checks for the correct version of Java and builds the appropriate links into the web page for me. I have, however, noticed that there are a couple of problems with the deployment script.

Firstly the JavaScript file cannot be included in the head section of the blog template with the other scripts I use. The problem is that the script embeds an object into the page at the point it is included. Objects can't be included in the head section of a HTML page so many browsers assume that if they find an object then you have forgotten the closing head tag and close the head section for you. This is annoying but easy to work around -- just include the script at the beginning of the page body.

The second problem is that although the object that is embedded is marked as hidden it still takes up a single line of vertical space, and of course depending on where you embed the script that could be a lot of space (imagine a 60pt title for instance).

It turns out that setting the hidden attribute to true is the same as setting the visibility CSS style to hidden -- the element isn't displayed but space is reserved for it. The trick, therefore, is to use CSS to turn off display of the element altogether. Adding the following CSS rule to your style sheet will do the trick and hide the Java deployment plugin so that it doesn't take up any space.

#deployJavaPlugin {
   visibility: hidden;
   display: none;
}

It isn't really necessary to set the visibility property but I like keeping it in for completeness.

Why this isn't done by the deployment script I don't know but at least now I have control over the white space in my layout.