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.

Back when I was working on BorlandC#Builder I made the decision to incorporate the W3C's HTML Tidy formatting tool directly into the IDE.  It has lots of options and does a nice job of formatting and correcting errors.  There are several ways to leverage HTML Tidy in the IDE, for example when editing an HTML file from the code editor you can select Edit | HTML Tidy | Format Document or Edit | HTML Tidy | Check Document for Errors.  Additionally, you can also select to use HTML Tidy as the default HTML formatter for both HTML and ASP.NET pages.  What isn't obvious is that we had to do a tremendous amount of work to get HTML Tidy to play well with ASP.NET controls but even with all the work we did it still won't format certain ASP.NET controls correctly. 

Since ASP.NET tags are not part of the HTML specification it is necessary to provide Tidy with a list of new tags and how they should be formatted.  Tidy has several options allowing you to control how new tags are formatted using either block, inline, empty or pre.  In C#Builder and Delphi 8.0 we automatically discover any ASP.NET tags within an .aspx page and prepopulate these settings prior to formatting allowing Tidy to format the ASP.NET tags as it would any standard tag.  There are lots of ASP.NET tags and subtags and without this feature it would be incredibly tedious to try and use HTML Tidy to format ASP.NET pages.

One problem however is that some ASP.NET tags support templates, meaning that they can contain fragments of HTML which should not be modified during the formatting process.  Unfortunately, HTML Tidy has no way to deal with ASP.NET templates and will in fact reformat the tag and completely change it's meaning.  As you can imagine this is not a good situation and unfortunately there is no workaround.

HTML Tidy does provide support for various web scripting languages like PHP and ASP and I think as the popularity of ASP.NET grows that it would be great if HTML Tidy could provide support for it too.  If the support can't be built into HTML Tidy then there needs to be some alternative whether it's a callback or some other mechanism that would allow the developer to improve Tidy's ability to deal with tags that it's not familiar with.

Over the past year and a half I've have seen a handful of requests for Tidy to support ASP.NET but unless more people speak up and voice their opinion I'm afraid it will be a long time before that will happen.

Here's where you come in, if you'd like to see this situation improve please visit the HTML Tidy website, get involved either by asking the great set of developers who keep this code base alive to support ASP.NET or by grabbing the code, diving in and adding it yourself (of course read all of the guidelines before doing that).

While you're there also make a case for separating how HTML Tidy options are passed so that things like the Borland IDE's aren't tied to the Tidy config file format.  I'd really like to see the command like option handling separated so that IDE's can load options from whereever they store them whether it's the Windows registry or an INI file or whatever.

A few other notes, I'd like to thank the people who work on HTML Tidy for all of their effort.  They do a great job and have been very helpful and responsive whenever I've had questions.  Additionally, I'd also like to point out that we used Jeffrey Pohlmeyer's TidyPas Pascal interface.  Btw, both of these are mentioned in our IDE's Help | About box.

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.