Websiting

This morning I was trying to get a photo of myself to use on the about page of my website, but taking a photo of yourself is quite hard (unless you want a myspace style self potrait). I started off using the Canon 450D with 100mm/2.8 macro in manual focus mode, but found that the framing was too tight to fit my whole head in the image, and I didn't have any room to put more space between the camera and me.

So after that I tried the D200 with 50mm/1.4 AF-D. After much time and many test shots I found I reasonable setup - the camera in single shot AF mode on a tripod, connected to the PC with some camera control software. Then I sat on a stool in front of the camera with the (wireless) mouse, and could just see on the computer monitor the button to click to autofocus the camera and take a photo.

I had to do it this way instead of using a remote release cable as my release cable is too short for me to sit far away enough from the camera.

After finally getting a reasonable photo I updated my photo website's about page with the new photo, and also tried to fix some other problems with the site in my 'to do' list.

One of the problems on my 'to do' list was that the iframe that the google custom search engine results for the site were displayed in had a very tall height in Webkit and Presto based browsers. Googling for this, I found the following article: I'm having problems with the iframe that displays my CSE results; what can I do?, which says

The results iframe should automatically resize to fit your results; if it doesn't, you'll notice an empty space below the results. Most often, this occurs because you're A) working locally or B) using Safari or Opera, browsers in which resize does not yet work.

I thought I would try and do a quick test in Safari/Chrome to see if the reason that the frame resizing doesn't work in Webkit and Presto was down to laziness or an actual problem with those browsers. I tried using the javascript console to access the contents of the iframe, but when I did I got the following error

Unsafe JavaScript attempt to access frame with URL http://www.google.co.uk/cse?cx=partner-pub-1468119066513718%3A2cmt3w-hn5b&cof=FORID%3A10&ie=UTF-8&q=piglets&sa=Search+Whole+Site&ad=w9&num=10&rurl=http%3A%2F%2Fwww.photosite.com%2Fsearch.xhtml%3Fcx%3Dpartner-pub-1468119066513718%253A2cmt3w-hn5b%26cof%3DFORID%253A10%26ie%3DUTF-8%26q%3Dpiglets%26sa%3DSearch%2BWhole%2BSite from frame with URL http://www.photosite.com/search.xhtml?cx=partner-pub-1468119066513718%3A2cmt3w-hn5b&cof=FORID%3A10&ie=UTF-8&q=piglets&sa=Search+Whole+Site. Domains, protocols and ports must match.

Googling for 'Unsafe JavaScript attempt to access frame with URL', I found lots of reports of this error, but no solutions. So I guess it is a problem that Google and I can't fix.

I spent most of the afternoon trying to get Wordpress nested comments so that when you clicked 'reply' in a nested comment that had a small width (due to small viewport), the comment would expand its width to accommodate the comment reply form (normally the form inputs overflow the small comment box).

I got it working in FF, Safari, Chrome, K-Meleon, IE8 with the following CSS:

.commentlist li{
 list-style: none;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px 15px;
 margin-bottom: 10px;
 float: left;
 min-width: 100%;
}
.children{
 margin-right: 30px;
}

K-Meleon

IE6 automatically expands the comments to fit the form in anyway, and since it doesn't understand min-width, needed the above changes removing to get it back to its natural state:

.commentlist li{
    float: none;
}
.children{
    margin-right: 0;
}

IE7 seemed to give the lis 100% min-width of the main div container that contained the post and comments, instead of taking the width from their parent element. I tried adding position: relative to the lis, but I still got the same problem.

IE7

This problem meant that any comment containing nested comments would be much larger than 'normal' comments, because its width would be 100% of the parent plus the padding and margins applied to its children comments. Not what I wanted, and I couldn't see any way to fix it either.

Opera also seemed to have something strange going on (or maybe all the other browsers are strange). Each li was being indented from the right slightly more than the last one.
Opera 10 without box-sizing: border-box

The fix was to add box-sizing: border-box to commentlist li, but this now broke the comment layout in other browsers. I tried looking for an Opera specific CSS hack, but couldn't find any, then when I noticed that Arora didn't print the comments how I wanted either, I decided that it might be easy to try with js instead, especially since the comment reply form appearing inside a comment when you click to reply to a comment requires js anyway.

Arora

In the evening I was working on trying to make the comments expand to fit the comment form using js. I got it working in Firefox, but when I tested it in IE8 it wasn't working. I found first that IE8 was evaluating a nodeName of an unordered list as UL, whereas I was checking if the nodeName was ul, so to fix it I changed my code to check if the nodeName.toLowerCase() was equal to ul.

After changing that I now I got an error in the jQuery code. Unfortunately the IE debugger wouldn't let me add breakpoints (it kept saying that the point where I wanted to set a debug point hadn't been loaded yet, even though the page (and so the scripts) had finished loading.

So I gave up on IE8 for the moment and tried it in Safari and Chrome, but it still wasn't working properly - only the comment containing the comment form would be expanded to fit the form in, any parent comments of that comment would stay small and unexpanded.

Doing some debugging, I found that according to Chrome the comments (lis) had large negative right margins on them. As I was calculating the min-width for the parent comment from the width of its child plus padding and margins, this is what was causing the problem. So removing the negative margin from the calculation meant the script would now work in Webkit.

I then tried IE7, and found what was probably causing the error in IE8 - I was parseInting the margin and padding properties, and if these were set to auto, it would return NaN. So I was trying to set the min-width of the li to something like 490 + NaN, which obviously doesn't work (well, at least in IE).

So I changed my code so that rather than trying to add the various padding and margin values together with the child comment width, I would just add the one padding value that I knew was indenting the comment. But this didn't work, doing some debugging I found that in IE7 the indent was caused by a margin rather than a padding.

I guess that's because I didn't have any padding or margins set in the CSS, so IE must use a margin to indent list items, while other browsers must padding. So I probably could have set margin/padding values in the CSS, but instead I changed my js to use the padding, or otherwise the margin, and it now seems to be working okay.

The weather was sunny all day. At sunset the sun set behind some thinnish clouds, but it wasn't much to look at really - just a relatively small orange glow around where the sun was, and nothing really to see after the sun had set. In the evening it got a bit foggy.

Food
Breakfast: Apricot Jam Toast Sandwich; Cup o' Tea.
Lunch: 1½ cheese on toasts; Clementine; Caramel Rocky; cup o' tea.
Dinner: Slice of Chicken pie; Potato; Swede; Mixed veg; Ground black pepper; Gravy. Pudding was a slice of Chocolate cereal crunch cake. Coffee.
Supper: Cup o' tea; Home-made double choc chip cookie.