Version 3 proves to be a mature, stable browser with great performance and fantastic rendering. As it is based on open source WebKit (see what they did there, MS?) finding and fixing bugs became much faster and manageable for Apple. I am very happy to use it as my full-time browser, leaving Firefox for development.

With all this it looks like Apple is busy with getting ready for Leopard.

Download Safari for Mac/Win

I think the logo successfully sends the opposite message of unfriendliness and dullness, expressed though jagged edges and unsymmetrical shapes which are combined into unbalanced group, representing the date 2012. This messy design comes in four colours: pink, blue, green and orange; as if to make it more of a farce by painting it bright colours.

The designers responsible for this disaster are actually a major brand consultancy Wolff Olins. I'm not sure what they are thinking, but from over 17 thousand votes on BBC web site, at this moment, 84% gave it the lowest point - 'wooden spoon'. The web site received just under 3000 responses in its discussion with majority of people seriously not happy with the brand. Their frustration is understandable because the cost of the design came to £400,000. An astonishing amount of money for something so badly received by public, which the brand is supposed to represent.

After using Microsoft products since the dawn of Windows 3.11 I have got used to using Windows in my own way that suits me best. I dreaded that my transition may take a while before I get used to the new platform. My worries were unnecessary. I picked up quite quickly on the feel of the new OS and the way the programs run. And as I learn more new tricks, shortcuts and explore software that came with OSX, I realise how far behind Windows is. And after seeing teasers from the new Leopard coming out soon I am really pleased I joined the "Other Side" sooner rather than later!

I spent a lot of time reading and listening to people saying how great the Macs are. I had some chance to use it and was impressed with it. But I hesitated to buy a Mac because I could see a smooth transition from a PC I have been using for many years. Today's Macs give me the extra push I needed replacing my PC too (I do need Windows for testing and some specific software). The order has been placed and I can't wait to open the box. The laptop that can do it all - Macbook Pro. I'm ready to be converted.

Preparation

1. Grab a piece of paper and a pencil or pen and draw a few ideas of how you want to structure the menu. This step can be skipped if you know exactly what you're going to do.
2. Load Photoshop or other image editor and redraw your menu as you want it to see on the page.
3. Open your favourite XHTML editor and create structure for the menu in XHTML. While creating structure it's important to understand that it has to be as simple as possible and make sense when styles are turned off. Imagine browsing the page you're creating via mobile or hand-held, how would you easily navgate your page so it doesn't confuse the hell out of you.

Coding

In our example we have a logo, utility links (links that are not related to any section and should be available from any page), main sections of the web site and sub sections is available.

The logo should wrap up the whole page, meaning it should visually suggest that it is on the top of the whole document and the content below. In stripped version we use text replacement (First level heading) for logo.

Below is the XHTML structure of our menu.

<h1><a href="#">Logotype</a></h1>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">My account</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact us</a></li>
</ul>
<ul>
    <li><a href="#">Section 1</a></li>
    <li><a href="#">Section 2</a></li>
    <li><a href="#">Section 3</a></li>
    <li><a href="#">Section 4</a></li>
</ul>
<ul>
    <li><a href="#">Sub Section 1</a></li>
    <li><a href="#">Sub Section 2</a></li>
    <li><a href="#">Sub Section 3</a></li>
    <li><a href="#">Sub Section 4</a></li>
</ul>

Defaults

First of all, we will set default setting for <body> and all inherited elements. Margins and font properties is a good start.

body {margin: 0; padding: 0; font: 100% arial, sans-serif;}

Logo

To create a logo with text replacement we add id to our heading:

<h1 id="logo"><a href="#">Logotype</a></h1>

In #logo rule we reset the margin for <h1>. Reset the font-size and position the element. Because the logo is the top level element and only skies are above, we position it against the body's viewport with relative values, dependent on elements font-size for nice scaling.

#logo { 
  font-size: 100%;
  margin: 0;
  position: absolute;
  top: 1em;
  left: 1.5em;
    }

Because logo is actually a link and is wrapped in <a> we will need to style in order to remove the text and replace it with an image.

#logo a {
  display: block;
  text-indent: -9000px;
  background: url(logo.png) 0 0 no-repeat;
  width: 100px;
  height: 25px;
}

We convert the anchor into block element, apply a background image of the logo, set the width and height of the image and remove the text by declaring text-indent propery to be -9000, effectively pushing it outside the screen boundaries.

Images

Next we slice images in Photoshop to use them in the menu. The follwing is the chart of images we use in our menu. Notice the size of image files. Blue background is introduced for clarity.

Menu set ups

Next we set up the lists for the menu. Reset the margins and remove the list-style from our menus, also, we declare the font-weight for lists.

#utility, #tab-nav, #tab-subnav ul {
  list-style: none;
  margin: 0;
  font-weight: bold;
}

Next, we choose which items should be floated. Now there's one thing to remember about floats: floated elements get out of normal document flow, so if we place floated block inside a container the container's height will be 0, unless there's another unfloated element within the same container. However, floated elements expand the floated containers, so the trick is to float the container in order to expand it to fit the floated element inside it.

#nav, #utility li, #tab-nav li, #tab-nav a, #tab-subnav ul li {
  float: left
}

Here we introduce a wrapping div in order to keep the floating list to the right and float the list items to the left, thus creating a left aligned menu for main sections. Notice that #nav is the container for both lists so it expands to the height of sections menu.

<div id="nav">
<h1 id="logo"><a href="#">Logotype</a></h1>
<ul id="utility">
    <li id="ut-home"><a href="#">Home</a></li>
    <li id="ut-acc"><a href="#">My account</a></li>
    <li id="ut-help"><a href="#">Help</a></li>
    <li id="ut-cont"><a href="#">Contact us</a></li>
</ul>
<ul id="tab-nav">
    <li id="nav-sec1"><a href="#">Section 1</a></li>
    <li id="nav-sec2"><a href="#">Section 2</a></li>
    <li id="nav-sec3"><a href="#">Section 3</a></li>
    <li id="nav-sec4"><a href="#">Section 4</a></li>
</ul>
</div>

Utility menu

We are going to position utility list to the top right corner as it will not be dependant on any expanding elements. Also we're going to add id to list items to be able to pick out the active ones based on the information from parent elements (we can use <body> for this task. Add borders on the left, background colour and bottom and pading around the list items.

#utility { 
  background: #508b21; 
  padding: 3px 5px; 
  border-bottom: 1px solid #36670f;
  border-left: 1px solid #36670f;
  position: absolute;
  right: 0;
}

Next we add background colour to the wrapping div together with the image of line at the bottom. We add image to be able to overlap it with our tabs in order to create visual similarity with real world tabs. We also apply 100% value to width to extend it to the full width of the viewport.

#nav {
  width: 100%;
  background: #7DBE3C url(bottom-line.png) bottom left repeat-x;
}

We're going style list styles. First we need to set the font-size based on <body>. We will add padding of 7 px to the left and right of individual list items and dividing border to the left of each item.

#utility li {
  font-size: 70%;
  padding: 0 7px;
  border-left: 1px solid #bcdda2;
}

Now we're going to remove the dividing border of the first element of utility menu (as well as submenu for later).

#utility li#ut-home, #tab-subnav ul #sub-sec1 {border: none}

The following two rules style the actual utility links. Set the colour for links and hover states.

#utility li a {color: #bcdda2}
#utility li a:hover {color: #fff}

Top level menu

The next piece of code is responsible for stylying the main sections menu.

#tab-nav { float: right; padding: 2em .7em 0 0 }
#tab-nav li {
  margin: 0 0 0 1px;
  padding: 0 1px;
  font-size: 85%;
  background: #c5e1ae;
  border: 1px solid #508b21;
  border-bottom: none;
}
#tab-nav a {    
  padding: 5px 12px;
  text-decoration: none;
  background: #c0dfa6 url(tab.png) 0 0 repeat-x;
}

First we do float:right to whole menu to position it against the right side of the viewport, adding padding to keep it off the edge, leaving nice spacing which is relative to the size of the element's font size.

Then we style list items which have a dark green border around them apart from the bottom, light green background which matches the colour of the lowest pixel in our gradient to create seamless transition, controlled font-size, and are separated from each other by 1 pixel. One more thing is a padding of 1 from left and right to enable the highlights (which we have on the gradient for the button).

And finally we style the <a> container which holds the text of the link. Add the padding (note that for active state button the padding value will be 1 heigher to compensate ovelapping). Remove text-decoration and add the gradient background which is repeated along x-axis and positioned at top left corner.

Next, selected item. To create an active state through selection of elements ids. The procedure is similar to explained above, we set the background of list item to the colour of highlight (lowest pixel) and replace the background of active element with the a corresponing image, adding 1 to padding as explained above.

#tab-nav li#nav-sec1 { background: #fff }
#tab-nav #nav-sec1 a {  
  background: #fff url(act-tab.png) repeat-x;
  padding-bottom: 6px;
  color: #000;
}

Sub sections

Finally, we add markup for sub sections:

<div id="tab-subnav">
<ul>
    <li id="sub-sec1"><a href="#">Sub Section 1</a></li>
    <li id="sub-sec2"><a href="#">Sub Section 2</a></li>
    <li id="sub-sec2"><a href="#">Sub Section 3</a></li>
    <li id="sub-sec3"><a href="#">Sub Section 4</a></li>
</ul>
</div>

Note that we wrap it around yet another div to make sure IE renders it properly.

We style subsections menu. float it to the right, and apply padding to keep it off the edge of the viewport, aligned to the rest of the lists.

List items are also styled with resized font-size, added padding to separate individual items and adding a divider (border-left). The first item is borderless due to a previous declaration #tab-subnav ul #sub-sec1 {border: none}.

#tab-subnav ul {
  float: right;
  padding: 5px 5px 0 0;
}
#tab-subnav ul li {
  font: bold 75% arial, sans-serif;
  padding: 0 7px;
  border-left: 1px solid #999;
}

Final result

The final result works and scales correctly across most standards compliant browsers.

See the result in action

The main problem is to eliminate all unnecessary mark up, make it degrade gracefully (opening the link as normal if JavaScript is not available) and at the same typ make it as customisable as possible.

I started reading a great book DOM Scripting by Jeremy Keith who describes a great and simple method of using links to pop ups that does most of the stuff I needed but the window was restricted to one size set in Javascript.

I needed more than one size and optional additional options - changing size for a particular link, option to use/hide scroll bars, add/remove status bar, make it resizable or locked. Even create a new window with toolbars and address bar.

/* Pop Up function with custom attributes (rel="Name Width Height Resizeable Scrollbars Status newWindow") 
Tyom v. 0.5 */

function popUp(linkURL,name,attributes) {
    window.open(linkURL,name,attributes);
}

window.onload = function() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (i=0; i < links.length; i++) {
    link = links[ i]
    if (link.className.indexOf("popup") > -1) {
        link.onclick = function() {
        var width = 780;
        var height = 590;
        var name = "popup";
        var resizable = 1;
        var scrollbars = 1;
        var status = 1;
        var newWin = 1;
        if (this.getAttribute("rel")) {
            var rels = this.getAttribute("rel");
            var relSplit = rels.split(" ");
            name = relSplit[0] ? relSplit[0] : name;
            width =  relSplit[1] ? relSplit[1] : width;
            height = relSplit[2] ? relSplit[2] : height;
            resizable = relSplit[3] ? relSplit[3] : resizable;
            scrollbars = relSplit[4] ? relSplit[4] : scrollbars;
            status = relSplit[5] ? relSplit[5] : status;
            newWin = relSplit[6] ? relSplit[6] : newWin;
        }
        attributes = "width="+width+",height="+height+", resizable="+resizable+", scrollbars="+scrollbars+", status="+status+", location="+newWin+",toolbar="+newWin;
        popUp(this.getAttribute("href"),name,attributes);
        return false;
        }
    }
}
}

And the list goes:

1. HTML Validator
2. ColorZilla
3. SessionSaver
4. Web Developer
5. Del.icio.us
6. IETab
7. Inspect This
8. ScreenGrab
9. View Formatted Source
10. View Rendered Source
11. Adblock Plus
12. Firebug
13. LiveHTTPHeaders
14. Header Monitor
15. Add & Edit Cookies
16. Download Them All