Bill Gates to Step Down

Bill Gates, owner and founder of Microsoft, is to step down at the age of 52. He'll remain Microsoft's chairman and will work on "special technology projects" (so he's taking over Microsoft Labs then?) but will be concentrating on his charitable work for his organisation The Bill And Melinda Gates Foundation.

More @ BBC News

Icann Approves Domain Name Overhaul

Icann has approved an overhaul of the way domain names can be registered. Previously all domain names had to adhere to one of the many top level domains. In the future this will not be the case, allowing for domains to be created from virtually any string and opening up the possibility for millions of new domain names. Whilst the potential for millions of new domain names is truly a positive thing for the internet, the way they have decided to do it is very poor and will lead to mass confusion for the less tech-savvy - they're effectively de-standardising the domain name system, and as well all know, de-standardisation leads to hellish problems in the world of technology.

More @ BBC News

Icann to Vote on Opening up TLDs

Icann are holding a vote regarding whether to open up the top level domains (TLDs). Currently TLDs either have to be country specific (i.e. .co.uk for the UK) or have a global recognition (.com for commercial, .org for organisations etc). Opening it up would allow for the creation of hundreds more TLDs, including the much maligned .xxx TLD which was rejected last year. In some ways this could be a good thing, widening the availability of domain names, and potentially making them more specific to the domain's purpose, however given the plethora of virtually useless domains that are around at the moment (.biz, .me.uk etc) it could just lead to confusion for the average net user.

More @ BBC News

FireFox 3 Default Mac Theme for Windows

Want the FireFox 3.0 theme that's installed as default on Macs for your Windows version of FireFox? An "experimental" theme (meaning you'll need to log in to the Mozilla site to download it) has been created and is available here. Personally I much prefer it to the default Windows one and have been using it for a little while now - definitely recommended! Oh, and if you haven't already got FireFox 3.0, GO GET IT!

Browser Usage: Graphical Illustration

Whilst writing the below headline on MS stopping selling XP and the expected drop off of IE6 users I decided to find some reputable browser statistics and graph them to get a graphical representation of the trend the browser market has been following. It'll be interesting to see whether, in a couple of months or so, there's a sharp drop in IE6 user in comparison with IE7 and FireFox users. Anyway, for your delectation, here's a graph illustrating browser market share over the past year and a half, because everything needs a graph!

MS to Stop Selling Windows XP

Microsoft are to stop selling Windows XP from the end of June. OEM machine builders will still be able to pre-install the OS until early next year, however from the beginning of next month regular users will have to buy Windows Vista and then ask to be downgraded to XP should they still wish to run it. More details on The Register. Of course, for all of us web developers / designers this has a distinctly positive side to it - Vista comes with IE7 pre-installed, so IE6 usage should begin to drop off at a higher rate now, which can only be a good thing.

Pure XHTML / CSS Drop Down Menus

I use StumbleUpon to wander around the web looking for design resources and the like, and one of the things I seem to keep finding are endless pages devoted to drop down menus implemented in javascript. Personally I haven't used anything that relies on Javascript to make it work in years as I very consciously design for users who may have Javascript disabled or unavailable, but I came across one of these pages yesterday and thought I'd see if I could create a decent drop-down menu using just CSS and XHTML. It turns out that it's very simple to do.

Link 1Link 2Link 3Link 4Link 5

Link 1Link 2Link 3Link 4Link 5

Above this text you should see two drop-down menus which drop down over this content.

• In this instance I'm going to build a little menu bar which sits at the top of a DIV containing some text. Here's the HTML :-
  

  <div id="Content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
   facilisis accumsan est.
  </div>



• Next we need to wrap the content DIV in a container DIV which we're going to use to house the drop-down menus :-
  

  <div id="Container">
   <div id="Content">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
     facilisis accumsan est.
   </div>
  </div>



• The content DIV needs to be absolutely positioned within the container DIV so that it doesn't move around when the menus drop down, and the container DIV needs to be relatively positioned to allow us to move the whole lot around, so we need to give them some CSS :-
  

  <style>
   #Content {
     position: absolute;
     top: 30px;
     z-index: -1;
     clear: both;
   }
   #Container {
     position: relative;
   }
  </style>

  
  You'll notice that I've given the content DIV a z-index of -1. This sends it to the back of the other elements, which allows the menus to drop down over the top of it. I've also set the clear property of the content DIV to both for reasons which will become clear shortly.


• Next we need some menus. The menus are just a DIV with a series of links in. You could well (and probably should) implement the links in an unordered list, but for the purposes of this experiment unadulterated links will do just fine :-
  

  <div id="Container">
   <div class="Menu">
     <a href="#">Menu 1 Link 1</a>
     <a href="#">Menu 1 Link 2</a>
     <a href="#">Menu 1 Link 3</a>
     <a href="#">Menu 1 Link 4</a>
     <a href="#">Menu 1 Link 5</a>
   </div>
   <div class="Menu">
     <a href="#">Menu 1 Link 1</a>
     <a href="#">Menu 1 Link 2</a>
     <a href="#">Menu 1 Link 3</a>
     <a href="#">Menu 1 Link 4</a>
     <a href="#">Menu 1 Link 5</a>
   </div>
   <div id="Content">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
     facilisis accumsan est.
   </div>
  </div>
  



• Next we want to give the anchor elements (i.e. the menu item links) some style. This is just visual style to make them look like a menu. I've chosen white text on a black background with a blue-green background when hovered. I've also given them a height of 20px with a top border of 1px, making the overall height of the anchor element 21px, and have set their display style to block to cause them to act like a block element and not an inline element. :-
  

  .Menu A:link, .Menu A:visited {
   font-family: Tahoma, Verdana, Arial;
   font-size: 10px;
   display: block;
   background-color: #000000;
   color: #FFFFFF;
   height: 20px;
   text-decoration: none;
   text-align: center;
   line-height: 20px;
   border-top: 1px solid #333333;
  }
  .Menu A:hover {
   font-family: Tahoma, Verdana, Arial;
   font-size: 10px;
   display: block;
   background-color: #0087A1;
   color: #FFFFFF;
   height: 20px;
   text-align: center;
   line-height: 20px;
   border-top: 1px solid #333333;
  }

  
  Specifying .Menu in front of the anchor selectors restricts the style to just links which are members of a menu DIV - handy if you don't want all of your links to look like menu items!


• With that done we need to style the menu DIV itself. Collapsed it's going to need a height of a single menu item (21px as described above) and expanded it's going to need to be the height of 5 menu items (5 * 21px = 105px). We're going to trigger the drop down when the mouse hovers over the first menu item by using the hover selector on the menu DIV (yes, you can use the hover selector on things other than anchor elements!). We're also going to give it a z-index of 10 which puts it on top of the content DIV, and we're going to float it left so that the menus will line up on the same line (hence the clear: both property on the content DIV earlier) :-
  

  .Menu {
   width: 80px;
   height: 21px;
   overflow: hidden;
   float: left;
   z-index: 10;
  }
  .Menu:hover {
   height: 105px;
  }



• At this stage you should have a fully working set of drop-down menus in FireFox. In Internet Explorer however, you will notice a slight gap at the bottom of each menu item when you drop it down, and when your mouse passes over a gap that has content showing through from underneath the menu rolls back up. Not much use. Thankfully fixing it is simple - what's happening is that IE is parsing and rendering the whitespace between anchor elements, so to fix it all we have to do is remove that whitespace, placing all the links within each menu on a single line. It doesn't do anything for the readability of our code, but at least it's simple to fix and doesn't leave us with anything that's dubious when it comes to standards compliance :-
  

  <div id="Container">
   <div class="Menu">
     <a href="#">Menu 1 Link 1</a><a href="#">Menu 1
     Link 2</a><a href="#">Menu 1 Link 3</a><a
     href="#">Menu 1 Link 4</a><a href="#">Menu 1
     Link 5</a>
   </div>
   <div class="Menu">
     <a href="#">Menu 2 Link 1</a><a href="#">Menu 2
     Link 2</a><a href="#">Menu 2 Link 3</a><a
     href="#">Menu 2 Link 4</a><a href="#">Menu 2
     Link 5</a>
   </div>
   <div id="Content">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
     facilisis accumsan est.
   </div>
  </div>

So there you have it, drop-down menus using nothing but a little simple CSS.

Knight Rider Sat Nav

Always wanted your own KITT to go with your dodgy leather jacket, perm and cheesy grin? Well now, thanks to sat nav manufacturer Mio, you need dream no longer! Well, sort of. Mio have released a Knight Rider inspired sat nav unit which features not only the words "Knight Rider" emblazoned across the top of the unit, but also KITT-esque LED lights on either side of it, and a piéce de resistance - KITT's voice to give you the directions!

More @ The Register.

New Site Focus

As some of you may know, I used to run a technology and web development website (diado.com) which was pretty popular. I've not run it for a couple of years now, mainly due to a lack of time however, due to a change in circumstances, I now find myself with time on my hands and so have decided to re-focus my blog to take my old website's place. So, as from this moment, this blog will now focus on technology, web development and design, and general geeky things - consequently the personal side of the blog will cease to be (hence the deletion of a bunch of posts).
If you have any suggestions for articles to be published here, have found an interesting link you think my readers will be interested in, or want to contact me for any reason, feel free to email me on diadoramirez@gmail.com.

Excel's logical comparison operators

Today I had cause to try and compare the outcome of two logical operations in Microsoft Excel as part of an IF() function. Basically what I wanted to do was to output a 1 or 0 dependant on whether the current date was part of a given week. So I had a sheet which looked something like this:

A	B	C	D	E	F
5	Week Commencing:	08-Oct-07	15-Oct-07	22-Oct-07	29-Oct-07
6	Current?	0	1	0	0

Now, to me this seemed very simple. All I had to do was a very simple IF() function which, to my mind, should look like this:

=IF((NOW() => C$5) and (NOW() < C$5 + 7), 1, 0)

The IF() function evaluates the first expression ((NOW() => C$5) and (NOW() < C$5 + 7) in this case) and outputs either the second parameter (1 in this case) if the expression is true, or the third parameter (0 in this case) if the expression is false. So the English equivalent of my function is this: If today’s date is the same or equal to the date contained in cell C5 (or D5, E5 etc) AND is less than that date plus a week, then out put a 1, otherwise output a 0.

With 10 years or so (mostly Microsoft-based) programming experience behind me, this simple logic made sense and should, as far as I could tell, work. It didn’t. What’s more, Excel in all it’s wisdom, decided to only tell me that the formula was invalid, but not actually why it was invalid. Thanks Excel!

So, I did what I do with programming issues that I come across – I Googled it, and Google delivered, after a fashion at least. I found an article about nested IF() functions which happened to include a reference to a function called AND(). It does exactly what it says on the tin as well, it performs an and on a series of expressions and returns the result – true if they’re all true, and false if they’re not all true. So, my final formula ended up as this:

=IF(AND(NOW() => C$5, NOW() < C$5 + 7), 1, 0)

Hey presto, how to perform the most basic of logical operations in Excel!