We spent years agonizing over the lack of 8-bit alpha channel in PNG in IE, and when we filly get it natively/nicely supported in IE they go and botch is so horribly.

Most of us have heard about gamma. But unless you do something in the graphics/print field, it mostly remains a button on our screen, where we tweak the luminocity of the screen. But of course, when an artist makes a snazzy PNG picture, making sure that it appears at the same display intensity as it did on his screen is understandably an laudarble goal. So PNG embeds gamma information, saying that this and that color, should be show at this and that intensity. The problem occurs when the BOG STANDARD (for 15 years and counting) HTML and CSS colors are NOT processed through the same system and thus don’t get the same gamma correction applied. The problem is easy to spot (need to be viewed in IE). The PNG files, once stripped, appears correctly.

I won’t really bother explaining this problem more, since it goes beyond stupid, I’ll just link further reading materials if you don’t know why you may wish to strip your PNG files for gamma information. Henri Sivonen has the best treatment on the topic.

Important to note that this isn’t a true example by any measure. It merely shows what to put in your App.config (especially since the official documentation mostly covers the Java version, which naturally has no idea what App.config is. And what little there is for NHibernate, is for the last release.

The example is very simple, it mainly shows:

• The contents of App.config

• An example *.hbm.xml file for the sample User class.

• If you should wish, the whole Visual Studio 2008 Solution file

I used Visual C# 2008 Express Edition and for the database I used SQL Server Express 2005 (make sure to get both “Microsoft SQL Server 2005 Express Edition ” and “SQL Server Management Studio Express”, the latter part is the GUI to manage the database, unless talking pure SQL into one end of a pipe satisfies you).

Download the entire VS 2008 Solution.

Configs, etc

The App.config looks like

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <configSections>
    <section name="hibernate-configuration"
             type="NHibernate.Cfg.ConfigurationSectionHandler, NHibernate" />
  </configSections>
  <hibernate-configuration xmlns="urn:nhibernate-configuration-2.2" >
    <session-factory>
      <property name="dialect">
        NHibernate.Dialect.MsSql2005Dialect
      </property>
      <property name="connection.provider">
        NHibernate.Connection.DriverConnectionProvider
      </property>
      <property name="connection.driver_class">
        NHibernate.Driver.SqlClientDriver
      </property>
      <property name="connection.connection_string">
        Server=SVENDSDESKTOP\SQLEXPRESS;
        Database=NHibernate;
        Integrated Security=True;
      </property>
    </session-factory>
  </hibernate-configuration>
</configuration>

The NHibernateTest.User.hbm.xml:

<?xml version="1.0" encoding="utf-8" ?>
<hibernate-mapping xmlns="urn:nhibernate-mapping-2.2" namespace="NHibernateTest">
  <class name="User, NHibernateTest" table="users">
    <id name="Id" column="LogonId" type="String" length="20">
      <generator class="assigned" />
    </id>
    <property name="UserName" column="Name" type="String" length="40"/>
    <property name="Password" type="String" length="20"/>
    <property name="EmailAddress" type="String" length="40"/>
    <property name="LastLogon" type="DateTime"/>
  </class>
</hibernate-mapping>

And the startup code is the following.

static void Main(string[] args)
{
    Configuration cfg = new Configuration();
    cfg.AddXmlFile("NHibernateTest.User.hbm.xml");

    ISessionFactory factory = cfg.BuildSessionFactory();
    ISession session = factory.OpenSession();
    ITransaction transaction = session.BeginTransaction();

    User newUser = new User();
    newUser.Id = "joe_cool";
    newUser.UserName = "Joseph Cool";
    newUser.Password = "abc123";
    newUser.EmailAddress = "joe@cool.com";
    newUser.LastLogon = DateTime.Now;

    // Tell NHibernate that this object should be saved
    session.Save(newUser);

    // commit all of the changes to the DB and close the ISession
    transaction.Commit();
    session.Close();
}

Annnd, the SQL needed would be the following. Note that the database used is “NHibernate”.

USE [NHibernate]
GO
/****** Object:  Table [dbo].[users]    Script Date: 07/23/2008 22:32:00 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[users](
	[LogonID] [nvarchar](20) NOT NULL DEFAULT ('0'),
	[Name] [nvarchar](40) NULL DEFAULT (NULL),
	[Password] [nvarchar](20) NULL DEFAULT (NULL),
	[EmailAddress] [nvarchar](40) NULL DEFAULT (NULL),
	[LastLogon] [datetime] NULL DEFAULT (NULL),
PRIMARY KEY CLUSTERED
(
	[LogonID] ASC
)WITH (PAD_INDEX  = OFF,
       STATISTICS_NORECOMPUTE  = OFF,
       IGNORE_DUP_KEY = OFF,
       ALLOW_ROW_LOCKS  = ON,
       ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Navigation

Debug

Editing

Other

Configuring shortcuts

I’m using a danish keyboard, so the ctrl+- shortcut does not work for me for whatever reason. You can customize your shortcuts by going Tools -> Customize -> Keyboard … Which brings you to the following dialog.

Visual Studio keyboard customization dialog

You’ll need to locate the shortcut your want to configure first (and there’s loads). Type in “back” into the “Show commands containing:”. You should find “View.NavigateBackwards” a bit down the last. You can bind it to something else, I use ctrl+´, but whatever works for you.

Other shortcuts

As you can see from the list, the amount of bindable actions is very large, and as far as I know not documented at all. Further, they also assume a US keyboard layout (and despite of old faithfull , I’m currently on a Danish keyboard, as it just does make some things easier). But that said, Coding Horror has a great script that will enumerate all of the short cuts, their name, and what object they belong to (View, Edit, etc). Microsoft also has some great looking posters for VB, C# and C++

• Visual C# 2008 Keybinding Reference Poster (and for 2005)

• Visual Basic 2008 Keybinding Reference Poster

• Visual C++ 2008 Keybinding Reference Poster

But since those aren’t editable, and I’m just not sure I need that many short cuts, I’ve compiled my own little Word document I’ll print out, and also list my own bindings in.

Download: formatDate.js (13kB)

Supported switches and test

I’m not going to duplicate PHP’s documentation. But I will list briefly the supported switches. Basicly, switches should return the same as in PHP, if they don’t, it’s most likely in error, so let me know at .

Here’s some examples.

And here you can test your own flags if you should wish.

Differences and gotchas

You should note quite quickly that you use % to escape, not backslash (\). PHP gets to treat strings a bit different, and frankly, \\d\\u\\m\\b looks stupid (not to mention the quadruple escape, \\\\, if you want a single backslash in your output).

Another thing to note is that this code operates either directly on a Date object (which always have a time set), or a passed in value, which it interprets as a date. The script doesn’t help you in any way in setting a time. As a developer, you need to be careful when juggling dates on the client side, and also if you create any dates, don’t make assumptions regarding what timezone the runtime thinks it is.

I’ve obsoleted my old page, though it’s still on the site under a different name. It had some more rigerous testing (it’s using the old version of the script so take care), and also some stuff about localization which I don’t really think is that interesting anyway.

w3schools “3 lines of documentation” regarding the ASP.NET PlaceHolder class.

I mean, this is a total joke. When did w3schools start out? 2000? They became popular with their concise CSS properties listings back in the day. But seriously, it’s like this site is frozen in time. Their CSS reference point is 2.0 from 1998 (not that a mere properties reference would list much different from 2.0 and 2.1, but there are some minor additions.) I would prefer they would work on updating their CSS reference instead of wasting time on ASP.NET.

There’s enough “interesting link sites” services out there there’s just no need to attempt to present down my perhaps 4-5 daily site checks as somehow unique. They aren’t. I check the old new thing now and then. I read Computerworld.dk to get a view of how the landscape of the danish commercial software scene. I wish I was cool and spent alot of time on Lambda the Ultimate, but I’m not, so I just visit it every few weeks and poke around.

Overall it just seems like we’re building paths to everywhere. But it’s nice to arrive as well. And I guess I wish for this site to be a destination for some people (and maybe helpful as well). Feel free to hit your back button now!

Rendering oddity with small tags with no trailing whitespace.

The HTML code used validates, should you wish to inspect it yourself. The “CSS1Compat” mode is merely to ensure we’re in “standards mode”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head><title>wth ie</title>
<style type="text/css">
h2{
background-color:red;
margin-bottom:0;}

.wth {
background-color:green;
margin-top:0;}
</style>
</head>
<body>

<h2>foo</h2>    <small class="wth"> b ar </small>

<h2>foo</h2>    <small class="wth"> b az</small>

<hr/>
<script type="text/javascript">
document.write(document.compatMode);
</script>

</body>
</html>

You’ll notice I remove all margin on the elements. And indeed, the first header h2 and small does render correctly. But the second gets a 2 pixel margin added for … who knows what reason.

Briefly, these expressions allow a web author to hook script expressions into the dynamic nature of HTML elements. The natural events of the page (onresize, onclick, onmouseover and so on) causing these expressions to be re-evaluated whenever content could possibly reflow. The effect is naturally very powerful.

<html>
<head>
<style>
#container {
width:expression(this.parentElement.clientWidth-100);
background-color:red;}
</style>
</head>
<body style="background-color:blue;">
<div id="container">foo</div>
</body>
</html>

The effect is unique, and should be obvious to anyone that this allows for very powerful behavior.

A problem of foresight

I’ll try to explain the motive for posting my old article, max-width in Internet Explorer. First off, at the time I was studying alot of HCI. So while making a HTML site for a school related project, I saw a good excuse for sounding clever about line-widths. Even with most of that stuff holding true, I simply didn’t think through the ramifications of posting this “hack”. And for a large part, I simply wanted to sell the expression technique, as I feel it’s extremely powerful, and many developers are unfamiliar with it. So I cooked up what seemed at the time as a “elegant” solution to this max-width problem.

I’ve received more email about this article then anything else ever on my site (quick hit in my inbox says hundreds of mails containing max-width). I still receive mail about it, with IE7 supporting max-width and the related properties. So, for a very long time, I’ve wanted to “set things straight”, and I shall attempt to do this here.

Not for the faint-hearted

As I noted, expressions are very powerful. To fully utilize and appreciate raw expressions you need a solid understanding of scripting, stylesheets and how they interact in Internet Explorer, and especially you need to understand how IE works, with “standards mode“, and the old-time box-model.

“Houston, we have a problem”

So, let’s explorer some of the problems we can run into. First off, this technique may look like a style in the presentation given above, but it’s behavior is anything but. First off, the expression construct used above is simply “short hand” for the setExpression function. This means that once IE encounters the expression construct it binds the code directly to the object. If you use any fancy DOM work to disable either the entire stylesheet (stylesheet switching) or just to kill a single element, it won’t work as the expression is already bound to the actual elements. It should be easy to see in this example where you can easily kill the stylesheet, but observe how the background-color style sticks regardless.

Far side of the moon

Let’s examine the actual code I posted in that old article. You can see the example of a simulated max-width here, but remember this only works in IE.

<html>
<style>
body {
width:100%;
margin:0;
padding:0;}

p {
border:1px solid red;
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
</body>
</html>

If you try it out in IE, it’s perfect. The red line is never past the view port of the browser, never does any scroll bar appear, and so on. It looks like a spot on emulation (and for this little example, it is). The code is deceptively simple, if body.clientWidth is more then 800 pixels wide, then we enforce a width of 800 pixels. Super simple and straight forward right?

Now, what assumptions are at work here? Well, a huge assumption is that the body element (or rather, the containing box of the content we wish to apply a maximum width to has no padding and/or margin. Another (more dangerous assumption) is that the box model applied is the old non-standards compliant box model. Another problem is that we’re working in pixels. The entire point of the article was to discuss line-lenghts. Falling back on the pixel defeats that idea. The basic problem is that it’s just so hard to retrieve information about an elements size using relative units, so I just “wing” it a bit in the article, which helps no one.

Crashing hard

Now, let’s see what happens when we change some of those assumptions. First off, including a proper DOCTYPE in the document causes IE to change the box model used. This will cause borders, padding, etc to not be counted towards the width of the element. This in itself isn’t so bad, it merely causes the “effect” to appear more jittery.

It’s far worse, if you try to apply the max-width to an element whose own width is dependent on the elements contained within. Reflowing content causes the onresize event to fire, which in turn may cause an infinite loop. Look at the following code same code from before. WARNING: this code is designed to hang your browser if you use any older version of Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
width:100%;
margin:0;
padding:0;}

div {
background-color:green;}

p {
border:10px solid red;
padding:10px;
margin:10px;
width:expression(foo());
}
</style>
</head>
<body>
<div id="ctb">
<p>
<script>
document.write(document.compatMode);

function foo() {
	return (ctb.offsetWidth > 800 ? "auto" : "800px");
}
</script>
[alot of text]
</p>

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

Things to note is that a DOCTYPE has been added, a containing box for the paragraph has been added, and some margins and padding added as well. If you attempt to run this code in IE6 (seems this has been fixed for IE7), the browser simply locks up hard, and here’s why. The paragraph will tell itself to be 800 pixels wide when the ctb element shrinks to any less (min-width). Now due to the padding and margins I’ve added, the paragraphs width will add up to 820 pixels. This will cause the ctb element to widen to contain it, and suddenly it’s wider then 800 pixels, and poof, the script expression thinks the width should be auto. The paragraph, with it’s new setting of width: auto; snaps down in width, to fit within the browser window, and in turn, meaning that ctb can size down as well, and then the whole affair just starts over. And infinite loop, and it locks the browser up.

And I think locking the browser up in this manner is about as crappily as you can treat any visitor to your site.

As aside, I can note that there has been some fixes to IE, to prevent the browser from hanging. First off, the above code actually works in IE 7. It hangs IE 6. But in order to cause it to hang, I had to swap the code out into it’s own function. If I inline the code, IE 6 just ignores the code completely, presumably using some heuristics to sniff out that this isn’t really code it wants to execute.

Solutions

I think the time for solutions is well past. Back in the day, Dead Edwards had a hancy HTC you could add to pages, to make IE implement all sorts of CSS properties, including max-width (seems he continues to do this). I would probably have recommended that, as that was probably a more solid drag-and-drop solution.

At any rate, I’ve always had a sour taste in my mouth with my old page, and I’ve tried a sort of carthasis with this post, trying to wash some of it out. I’ve never been a fan of the popular “hacks” that started to develop once Cascading Stylesheets started to catch on like wildfire. It seems to me, that relying on broken behavior in very specific versions of browsers is just stupid. It’s basicly against everything most web developers wish for when they look at a page rendering in Firefox and IE, and wish they looked the same. Refusing to accept a “blemish” on your page, and instead resorting to hacks (of which mine was admittedly the worst) to make sure your vision is presented faithfully to the visitor just smacks of arrogance to me.

I’ve long since stopped working at the yoke of the visual designers with photoshop files being sent my way by, and as such, I’m not entirely sure how the industry works in practise. But I sincerely hope that it has matured enough to accept imperfections, and see them for what they really are; an expression of the open nature of the web.

Littering our pages with browser specific hacks is no better then client sniffing code. Each time we introduce a browser specific feature on our sites, the web gets to be a little bit messier. The IE team at Microsoft has a pertinent article on what writing these browsers are like.

My old site had a very article “centric” look, and I’m not entirely sure I managed to translate that look and feel over to a more snippet oriented 2 column classic blog format. But mostly because this new software just contains so many more pages then my old did. So still lots of stuff to do; I need to get around to looking at making some nice URLs, instead of these horrible ?id=213 URL fragments that floats around. The site probably doesn’t validate. And overall need to check that the site works in all it’s little niches …

Oh, and if you’re looking for the old stuff, the content is in all the usual places, haven’t deleted any content, and until such a time as I get the old front page index and possibly content ported over (still not sure how to handle that), here’s a link to the old index page.

And this makes for my … 8th or so iteration of my site, which has lived on this domain since 2001, and on a few others for a few years before that. And I wish to send my gratitude to my friend Lasse, for providing great hosting ever since my former domain went defunct in late 2002.

But anyway. I’m very happy to finally have a blog and having it gotten launched tonight.