Random Tech Tips From a Jobbing Developer: August 2006

Friday, August 25, 2006

3 Column CSS Layout with a Fixed Centre Column Width

A little while ago, I had to write an intranet-based interface to allow some of our accoutning users to kick off some of our cube building processes. That in itself was an interesting exercise, but more interesting was the problem of layout. We have a strict corporate style (like most large companies nowadays) which covers the width of the page at the top, but the actual content, well, where do you put that?

There were a number of considerations here. Firstly, the header has a very symmetrical look about it so it made sense to have the content in the middle of the screen. The problem then is "How wide do I make it?" Well, I have a 17" LCD monitor at a resolution of 1280x1024 (anything less looks awful on these cheapo monitors), but there are a lot of people in our organisation who, for some reason, run 800x600 even on 17" CRTs. So, taking into account that the interface itself is deliberately spartan, I plumped for an 800 pixel wide content area in the middle of the screen.

Naturally, I wanted to do this using divs rather than tables but the problem I found was that every 3 column layout I found used two fixed width outer containers and a fluid center column which was exactly the opposite of what I wanted. I also wanted a technique that was cross browser compatible. Eventually, after a lot of searching, I came accross a blog post by a chap called Alessandro who had done just what I wanted. As a result, I tried it out and sure enough it worked a treat in both IE and FireFox. I'm sure I'll be lambasted for it but I couldn't be bothered to check Opera et al, mainly because no one in the company uses it nor will they as access is through thin client and Citrix for most users, precluding the possibility of choosing their own browser. So, I thought I'd provide a practical example to go along side Alessandro's original concept code.

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Style-Type" content="text/css">
        <link href="common800.css" type="text/css" rel="stylesheet">

    </head>
    <body>
        <div id="container">

        

        <div id="leftContainer">
            <div id="padLeft"> </div>
        </div>

        <div id="leftText800">
            

        </div>

        <div id="rightContainer">
            <div id="padRight"> </div>
        </div>

        </div>
    </body>
</html>

And here's the css:

div#leftContainer
{
    float:left;
    margin-left:-400px;
    width:50%;
}

div#padLeft
{
    margin-left:400px;
}

div#leftText800
{
    float:left;
    width:800px;
}

div#rightContainer
{
    float:right;
    margin-left:-415px;
    width:49.9%;
}

div#padRight
{
    margin-left:415px;
}

Tuesday, August 01, 2006

Unique ID's in ASP

Having recently re-vamped the style of our pitiful corporate intranet without altering the content beyond trying to make the code conform to W3C standards a little better, I got an email from one of our (less than useful, it must be said) project managers. She complained that when a user opened an 'e-form' (built using an utterly crap product called EIM), it launched in a new window, which was all well and good, but if they tried to open the guide on how to use this overly-complicated form at the same time, it opened in the same window as the form thus preventing you from seeing and using the form (or vice versa depending upon which order you clicked the links). I must admit that being from this particular PM, I was about to ignore the complaint completely when I suddenly realised it was a perfectly valid point, so I looked into it.

It seemed that the original author had written all the links (or written scripts to generate the links from document names in some cases) using the target property in the anchor tag and had set the value to _new, thus:

However, when you opened a new window by clicking on a link, _new is the assigned ID of the window, so the next link with a target of _new would end up being opened in that same window thus nobbling whatever you were viewing. The solution is to have a unique target reference for each link. But how do you guarantee a totally unique ID for each link with minimum effort, especially when many of the links are created dynamically? Step forward the GUID (Globally Unique IDentifier). I found a snippet which allows you to generate a system GUID very simply in ASP as follows:

<%
    Function CreateGUID
        Dim objGuid
        Dim sGUID
        Set objGuid = Server.CreateObject("scriptlet.typelib")
        sGUID = objGuid.guid
        Set objGuid = Nothing
    End Function
>%

Great. Except there was a problem. Every time I used my returned value, when the page rendered, chunks of HTML which should have been written out by the VBS code after the link were missing. Eventually, I happened into a solution, but I had no idea why it worked. After much searching, I discovered that everyone else was using the same solution as me but with no explanation.

Eventually I found an answer on webmaster-talk.com from a chap called Tommy Hanks who had had the same problem and asked the same question. He discovered that the .guid method adds an ASCII 0 to the end of the string which is interpreted as a string terminator. This completely nerfs anything after it. Quite why the hell it's there, I don't know but the solution is as follows:

<%
    Function CreateGUID
        Dim objGuid
        Dim sGUID
        Set objGuid = Server.CreateObject("scriptlet.typelib")
        sGUID = Left(objGuid.guid, 38)
        Set objGuid = Nothing
    End Function
>%

Notice the addition of the Left function to the objGuid.guid call which gives you the GUID itself and leaves off the annoying string terminator. Now, the links look like this in the source code:

Which, when rendered, gives you:

Thereby guaranteeing that each link will open in it's own window. Et voila - unique ID's in ASP.