Beware of duplicate cookie values

Came across a strange problem today that I thought I should record since I’ve already wasted enough time investigating it. The problem was that a web site was recording a setting to a cookie each time a page was unloaded; e.g. Preference1. Any page can then read the cookie and take appropriate actions. However, for some reason the preference was not correctly read on any other page. Puzzled I examined the document.cookie property. For some strange reason the value was duplicated; e.g. Preference1=hello; Preference2=bla; Preference1=goodbye. So when the page wrote to the cookie the 2nd version changed but when the cookie was read the 1st version was taken. Once I cleared the cookies for the domain everything went back to normal. The site only has one domain, no sub-domain or anything. Very strange behaviour.

So there it is, an aide memoir for me, but if anyone can provide an explanation I would be grateful. I should mention this was all client side JavaScript.

How to prevent autocomplete on textboxes in html

Just a quick one because I keep forgetting how to do it. If you want to stop your form displaying suggestions in text boxes that were based on previous entered values, then add the following attribute to your html form tag; autocomplete=”Off”

Silverlight to resize to 100% with IE8

Had a frustrating time getting a Silverlight control to take up 100% height of the browser page. First off, this is nothing really to do with Silverlight and all about the div it’s contained in. In IE7 having the div at 100% worked fine, but in IE8 it was tiny. The problem is that in IE7 a div at 100% means, ‘please take up 100% of the available height’. Whereas in IE8 it’s, ‘please take up 100% of your parent’. So a structure like

html->body->div->div[100%]->Silverlight Control
means that in IE8 its height is basically nothing. So I added 100% to the parents up to body and still no joy. Then Hannah at Clear Breeze Design pointed out that I needed to apply it to the html tag too. That did the trick. So if you have a very simple layout you could do something like;

 html * {height 100%}

Even in my code that’s too simple but the basic take-away is that you need to follow the ancestors from the Silverlight control up until you hit a height, that’s the one it will take. If you want it to be 100% then must ensure that everyone on that chain is 100% too, including body and html.