CSSing, javascripting and Vectoring

This morning I checked my email (this seemed to take over an hour, don't know how though) and got Granny breakfast. I also did some more work on website. I added round corners to an element using -moz-border-radius, -webkit-border-radius (and although I don't think any current browsers support it, border-radius. For IE7, IE8 and Opera I used my javascript borders function with some .pngs of the borders.

To detect whether the browser was IE or Opera, I used conditional comments for IE and set a javascript variable inside them e.g.
<!--[if IE 7]>
<script type="text/javascript">
var IE7 = true;
</script>
<![endif]-->
Then for detecting Opera (and making sure the effect wasn't applied to webkit or Firefox browsers), I checked whether the CSS border radius properties were set on the element I wanted to style. Information on how to do this cross browser is available here: Reading applied element styles. Since I already knew whether a browser was IE and what version of IE it was, I didn't need to include the bit that gets the style in IE. Then you can do this:
var myEl = document.getElementById('elementIwantToStyle');
if(IE7 || IE8 || (!IE6 && typeof(window.getComputedStyle(myEl, null).MozBorderRadius) == 'undefined' &&
typeof(window.getComputedStyle(myEl, null).WebkitBorderRadius) == 'undefined' && typeof(window.getComputedStyle(myEl, null).borderRadius) == 'undefined' ))
{//style myEl;}

If the browser supports the CSS property on the element, then its typeof() will be 'string', if it doesn't support it, then it will be 'undefined'. Strangely, when alerting the CSS border-radius properties, if it is supported, then it will alert a blank string, rather than the actual border-radius.

In the morning I also checked dealextreme, ebay and froogle for ball heads as I want a cheap ball head with an Arca Swiss compatible Quick Release Clamp to go on my monopod. The Benro ball heads seem very expensive now, I don't know if now they have become more well known and put their prices up. The prices of everything has gone up as well due to the large drop in the value of the British Pound. Anyway, I bought a unbranded KS-1 Benro rip-off ballhead from dealextreme for about $55. Quite expensive, but I didn't want to wait for the pound to drop more and it get even more expensive.

I ordered the KS-1 ball head rather than the KS-0 ball head as it is rated for a larger weight, and one of the comments on the KS-0 said it would hold an SLR and medium lens. The MP-E and MT-24EX isn't too heavy, but not exactly really light either, so I bought the KS-1 just to be sure. Better to have something more capable than what you need than risk getting something not capable enough. I also ordered a pack of small throwing knives from there. Unfortunately the SATA hotswap HD bay was out of stock and wouldn't let me order it.

In the afternoon I did some more work styling my website. Safari was displaying the text on my site much bolder than all the other browsers, so I googled about that and came across this helpful thread: Designer's control over bold text in Safari?. The solution is given in the last post there - apply this CSS to the body elementtext-shadow: #000000 0 0 0px;, and then the text will display with a normal font weight. Great!

I looked at styling my login form, and looked at how other website style their login forms: Moneyweek, Amazon.co.uk, and ebay. I was wondering mainly about whether the title of the form (Login) should go in the legend (in which case it interrupts the border and could cause problems for getting a round border with my javascript function), or if it should go in the main content of the form.

I did some googling to try and find examples of how to style forms well, and found this great example that styles all the form elements using javascript and images. I coded something similar myself last summer, but got stuck getting the drop down select box working properly.

I decided not to use that for the moment, but keep it in mind for possible future use. I got on with styling my login form in Firefox and found that the form was always 100% width of its parent element. I originally fixed this by using width: -moz-fit-content;, but it seems display: inline-block; also does the same thing. The only problem is that I was using margin: 0 auto; to center the form, and this doesn't work for centering the inline-block element. I think if I set text-align: center; on the form's parent element, this should center the form again though.

There's a bit of info about -moz-fit-content and similar CSS properties here: New CSS in Firefox 3.

After dinner I played Excite truck with Mac and Ben for a while. I started doing a vector of pogman sitting in loads of pogs, watched an episode of Blinky Bill with Ben, then did a bit more of the pogman vector. Vectoring all the pogs he's sitting in will take ages, so I'll have to try and finish it tomorrow.

The weather today was misty and overcast in the morning, then a bit sunny from about lunch time to 3pm, then overcast again.

Food
Breakfast: Lemon marmalade toast sandwich; cup o' tea.
Lunch: 2x cheese on toasts; salad; clementine; digestive chocolate bar; cup o' tea.; ⅔ Cadbury's dairy milk 50g chocolate bar.
Dinner: Battered fish portion; baked beans; chips. Pudding was chocolate swiss roll with tinned mandarin segments and coffee custard. Coffee.
Supper: Oreo; Coffee.