One of the improvements I've been wanting to make to my blog theme is support for icons next to URL links which indicate if the link is offsite, meaning that it'll cause you to browse to another domain. As you can see from this search there are lots of different approaches largely because not all browsers support the latest standards. For the time being I've opted for a CSS only solution which means it's only supported in Firefox (2.0 is what I've tested) and IE7. IE6 and less will continue to render the links normally without any offsite icon indicator. I've opted for this route because it was really easy to add the following CSS.

 1 #centercolumn a[href^="http://"] {
 2   background: url(/blog/themes/stevewhite/images/external.png) 
 3     no-repeat center right;
 4   padding-right: 13px;
 5 }
 6 #centercolumn a[href^="http://www.stevetrefethen.com"], 
 7     a[href^="http://stevetrefethen.com"] {
 8   background: transparent;
 9   padding-right: 0;
10 }

This means that offsite links appearing only in the center column will be denoted with an icon like this . Supporting IE versions < 7 is a bit more involved than I have time to spelunk. I came across the above solution by digging into the theme used for MediaWiki which is the wiki engine the Delphi R&D team uses. It has a solution for IE6 but it's more involved than I care to dig into. On my blog, IE7 usage has eclipsed IE6 (50% to 44%) so it's a matter of time before this becomes a non-issue anyway. Regardless, if someone has a simple solution that works for IE6 which they'd like to share I'd be more than happy to add it.

Joel on Software blogs about a CSS based slide show system called S5 which is really a cool idea. I can see lots of potential in using something like this particularly now that Delphi has an HTML based Welcome page.

In Delphi 8 we didn't really provide any support for developing CSS/stylesheets which any web developer knows are an important part of web development.  Well, fortunately Diamondback (the next release of Delphi) supports CSS syntax highlighting as well as CSS code completion making it easier to build stylesheets where you don't have to constantly refer to reference material in order to create a new style.  I highly recommend familiarizing yourself with CSS so that you can leverage the many advantages it provides.  Here is a great site that has lots of information to help you learn CSS.

Another issue in D8 was that the designer wouldn't always resolve relative file locations for things like images and stylesheets correctly which has been fixed in Diamondback.

Here are a few pointers regarding how relative paths are resolved in the Diamondback IDE:

• If the file is part of an ASP.NET project then it's references will be resolved relative to http://localhost allowing for use of virtual roots to refer to global image and stylesheet locations.
• If the file is not part of a project (like a standalone .htm file) then any relative URLs are resolved relative to the directory path of the .htm file.

Basically if the file is part of an ASP.NET project then any relative URL references in the file are resolved through http://localhost rather than the file system.

Since this post seems to have been pretty popular I thought I'd build on it a bit and provide a few more examples. In my previous post I created an HTML page that had the stylesheet information embedded in a STYLE tag within the page header which is actually a bad idea but it helped keep the example really simple.  In these examples I've broken out the stylesheet information into individual .css files and will illustrate a few different layouts using the exact same HTML used in my previous example (sans the STYLE tag of course).

I've created both left and right column layouts using the exact same HTML that I used from my original example.  The difference with these pages is that I've hidden the column that I don't want on the page while the DIV for the column remains in the HTML and the CSS dictates that it's not displayed nor does it consume space.  Additionally, I've made the left/right column fixed width which is probably more consistent with a typical website layout.

[Update: Feb 14, 2007] If you're reading this on www.stevetrefethen.com/blog this site is based on the CSS three column layout discussed above.

After a recent post by Nick Hodges asking “Got a good stylesheet that works on all browsers, and allows for a three column/page-wide header/page-wide footer layout, and that doesn't behave strangely when the browser is sized?” I finally broke down and decided to try and meet that challenge.  What I came up with seems to work well in IE6 and Firefox 0.9.3 on WinXP and Safari, Firefox and IE (all latest versions) on Mac OSX.  I think it's a pretty good example of how to use stylesheets to get a layout that works without requiring the use of tables and provides all of the elements of many modern websites.

It's entirely possible that this idea is not new or unique so I don't claim either but it's a small, very workable solution.

Give it a shot and let me know how well/poorly it works for you.

UPDATE: I've added a second page where the footer appears at the bottom of the browser by setting the height of the maincontent DIV to 95% of the height of the browser which seems to work pretty well and still doesn't require Javascript.

UPDATE #2: Since Carlos has issued (yet) another challenge I spent about 3-4 minutes tweaking my original page and came up with a few minor modifications that allows for a header, footer (at the bottom of the page) and three full height columns all without Javascript and only using some pretty simply CSS.  I've tested in IE6 and Firefox 0.9.3 (my browser of choice) and both work about equally well.  Now, I haven't tried using this page in a real world application so I'm not entirely sure how well it would work but I it sure seems to me like it would work just fine.