Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.

OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.

To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.

Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.

Related posts:

1. 2008 Weblog Awards Finalist
2. MIX10 Session and Supporting Documents
3. Why a CSS Reset should be at the core of your stylesheet

New stuff

Cut straight from the Knowledge Base article, here’s a full rundown of the new features:

Extensibility

Supports add-ins that use the Expression Web object model.

Root-relative links

Supports root-relative hyperlinks.

PHP files that do not use the *.php file name extension

Adds support for Drupal and CakePHP template files. Expression Web 3 SP1 now recognizes .module, .install, .inc, and .ctp as valid PHP extensions.

Application color scheme

Provides an improved black and gray color scheme that better reflects the appearance of the Microsoft Expression Studio 3 family of products. Expression Web 3 SP1 also provides a new Application Options setting that lets you select the Windows color scheme instead of the default color scheme.

Microsoft Internet Explorer 8 META tag and Web Slice support

Contains new code examples to support features that are specific to Internet Explorer 8. The new code examples include META tags specific to Internet Explorer 8, plus a new Web Slice code example. You can access the code examples by pressing Ctrl+Enter in Code view.

Old fixes

The Service Pack also addresses a bunch of standing issues with the original release. Again cut straight from the Knowledge Base article:

• Fixes a problem in which multiple tasks are undone when you use the Undo feature.
• Resolves a problem in which an invalid link is generated when you drag an image from the Folder List panel into the Code view of a page.
• Enables you to select text in the Design view of a page more easily and more accurately.
• Resolves a crashing issue caused by nonstandard or corrupted fonts that are installed on your computer.
• Fixes a problem in which tags that begin with <?php are renamed after you rename a file.
• Resolves a problem in which Japanese characters are altered.
• Resolves a problem in which the source file is deleted after you copy a file from one instance of Expression Web 3 and then paste the file into another instance of Expression Web 3.
• Restores the ability to drag files into a selected folder in the Folder List panel.
• Enables connections to each destination without restarting the application when multiple publishing destinations are specified on the same FTP server and when only the user credentials are different for those destinations.
• Fixes several problems in the workflow between Expression Web and Team Foundation Server.
• Shows the correct file status in Publishing view after you publish a site.
• Updates the file status and publishing log when you use the Publish Selected Files command to publish one or more files. Additionally, Expression Web 3 SP1 displays the publishing progress in the Publishing Status panel.
• Provides several fixes that make sure that pages accurately display in SuperPreview.

Users ask, the Expression team delivers

The release of Expression Web 3 SP1 comes on the heels of an extensive process where the Expression Web team went out and asked users and MVPs what features they wanted to see added or improved in Expression Web 3. As a result much of what you see in this upgrade is actually based on what we, the users, have requested. Which I have to say is very cool. Two such examples are the root-relative links (which I requested back in the early days of EW2) and the application colour scheme which was removed from EW3 and many MVPs wanted back. More than anything this shows that the team are working hard to listen to the end users and creating the application the end user wants. Which is more than I can say for a lot of other software developers.

Go get it right now (it’s free)!

If you’re running Expression Web 3, go to the website and the the Service Pack right now. It’s a one-click install you can download directly by clicking here. It’s also available in mutliple languages other than English.

Related posts:

1. HTML Basics: Hyperlink Syntax – Absolute, Relative and Root-relative
2. Expression Web 2 Beta Bug Report
3. Previewing Silverlight Applications in Your Browser With Expression Development Server

UPDATE: WINNERS ANNOUNCED!

The draw for the Expression Web 3 giveaway were performed this evening by @AnnyChih and @dabblerDOTca. Congratulations to @paladyn as the grand prize winner. The two runners up are @tommyflynn and @mxj1009. A big thanks to the 80-some Tweeters who participated in the contest.

To celebrate the release of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours Design Is Philosophy is holding a contest with some excellent prizes:

1st prize:

• A full working copy of Microsoft Expression Web 3
• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours
• A limited edition custom Design Is Philosophy t-shirt as pictured above (your choice of size and colour – black, blue, green and tan available)

2nd and 3rd prize:

• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours

The winners will be selected by random draw of the twitter accounts that have tweeted the above comment and will take place on Wednesday October 7th at which point I will contact the winners. You’ll have 2 days to get your contact info back to me so check back here and keep an eye on your inbox on Wednesday to ensure that you get the prize if you win.

How to enter

Putting your name in to win the big prize is incredibly simple:

1. Follow me on Twitter
2. Tweet the following message:

Win an Expression Web 3 package incl software, Teach Yourself xWeb 3 book + Tshirt from @mor10. Details here: http://bit.ly/VEG6R

If you’re not already on Twitter it is easy to join: Just go to Twitter.com, enter your credentials and start tweeting. Twitter is an excellent social networking tool where you can find and connect with people from all walks of life including other Expression Web users and experts. Chances are if you have a problem, suggestion, question or concern you’ll find someone on Twitter who has an answer or a tip to get you on your way. While you’re there make sure to follow these other Expression Web tweeters: @MSExpression, @expressionweb, @tinaclarke, @patgeary, @XStudio, @cdwise.

Related posts:

1. Read my article in the Microsoft Expression November Newsletter
2. My book is featured in the Canadian User Experience Blog
3. First photo of my new Expression Web 3 book

Expression Web 3 is now available for trial download directly from Microsoft. Click here to join in on the fun!

It’s no secret that I’ve been playing around with various pre-beta and beta versions of version three of Microsoft Expression Web for the last few months, all in preparation for the release of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours which is available for pre-order from Amazon.com right now (even though it’s not finished yet!) So for all this time I’ve had to keep my mouth shut about my new toy and what it can do. Well, no more. I just got the all clear from the development team to talk about the application publicly and share some screenshots of what you can expect when it goes public in the next couple of months.

So, without further ado, here is a quick rundown of the new features, the new appearance and my innitial thoughts on the new member of the Expression Web family.

New Flat-tastic User Interface

The first thing you’ll notice (apart from the new logo in the splash page of course) when opening Expression Web 3 is the new UI skin. The application looks very different from its two prior iterations in that the team has moved away from the classic fake 3D/embossed look to a 2D/3D inspired look with flat surfaces and drop-shadows. The interface is also a lot darker than the prior ones with a dark gray being the predominant colour. The new look makes me think of new media applications like TweetDeck and DestroyTwitter and there is little doubt in my mind that much of the inspiration was taken from what I want to refer to as the post-web2.0 look.

As you can see in the graphic at the top of this article the new look is very clean and sharp and makes icons, toolbars and panels pop out. This dark flat-tastic look has already been used in Expression Design and Expression Blend and I think it is a welcome change that not only links Expression Web to it’s application siblings. It also visually separates the new application from those of the past and signals a new beginning of sorts. Not to mention that to me at least it is much easier on the eye (I tend to do a lot of design work in the dark).

AutoHide Panels

One of the things that really irks me with design applications in general is all these toolbars and task panes that take up valuable screen space. To curb my frustrations I prefer to work on a dual-monitor setup where I can stash all the tools and task panes on one monitor and leave the application on the other. But this doesn’t work when I’m on my laptop (which is where I’m at most of the time these days). And in Expression Web 1 and 2 even with a widescreen monitor the task panes ate up a lot of real estate. As a result I kept turning the task panes on and off all the time – a process that was a real time waster. In response to complaints and suggestions to do something about the task panes, the dev team introduced a simple AutoHide feature that lets you collapse the panels (they’re not called “task panes” anymore) to the sides from where you can open them by hovering over their names. In practical terms that means you can leave all your favourite panels on the workspace without having them take up tons of room in the process.

The AutoHide feature is easily toggled on and off with a pin logo (seen in the upper right-hand corner of the grab to the right). When the pin is lying sideways as in the grab, the panel is pinned to the wall (AutoHide on). When it’s in the upright position, the panel is a permanent part of the workspace. It’s a simple feature but it makes a world of difference, especially because you can pin individual and rarely used panels to the sides for easy access if you were to need them.

New and improved publishing options

It’s no secret that the publishing options, and especially the FTP publishing option, in Expression Web 1 and 2 were less than stellar. It was so bad in fact that I urged the readers of my book to not use them. Well, without breaking any deals with my publisher I can tell you that my recommendation in the new book is quite different. Not only has the troll that was messing with the FTP been slaughtered but two all new publishing methods have been added to the list providing more secure transfers and options. The list of publishing options now features SFTP (Secure Shell File Transfer Protocol), FTPS/SSL (File Transfer Protocol over Secure Socket Layer) as well as the original FTP, FrontPage Server Extensions, WebDAV and File System.
But that’s not all. Expression Web 3’s publishing option has been rebuilt from scratch and features a whole new range of functions including the ability to define multiple publishing locations for one site so you can push your files to a backup storage as well as publish them online, or publish them to multiple servers, or set up a testing server and a main server within the same project. This again is a seeminly minor but actual major improvement that makes life a lot easier for people like myself who do a lot of server testing and cross-publishing.

In-application Browser Previews with Snapshot

In addition to alterations and improvements to the old versions of the application, Expression Web 3 introduces some new features that are going to make your life as a designer/developer a hell of a lot easier. They are connected at the hip but I’d rather deal with them independently. The first one is the Snapshot panel. Like the name suggests, Snapshot takes a real-time browser shot of your current page and displays it in a panel inside your workspace. This means you now have a quick and easy way to see what your recent changes will look like in different browsers, including Internet Explorer 6 and 7 and Firefox, without having to actually run the page in a real browser.

Snapshot’s output is just that – a snapshot – and does not provide functional links and the like. But it does generate JavaScript, CSS, HTML, PHP and whatever else you want to throw at it and gives you a true representation of what your page looks like in the different browsers.Like the other panels you can undock the Snapshot panel and place it somewhere else, for instance on your second monitor.

SuperPreview – Browser Testing Made SuperSimple

I’ve written about SuperPreview before both here on DesignIsPhilosophy.com and in the official Microsoft Expression Newsletter but it can’t be repeated enough: Expression Web SuperPreview could one of the most important innovations in web development of the last several years. SuperPreview is the powerful big brother of Snapshot – a stand-alone application that lets you perform cross-browser testing that lets you compare true output from multiple different browsers with onion skinning and side-by-side preview. To identify incompatibilities, problems and even tiny shifts the application also features simultaneous box highlighting of individual elements and even provides full FireBug-like DOM trees to give you as much info as possible about what’s going on when things go wrong.

I’m not going to go into too much detail here – the application will be better served with a tutorial video that shows how it actually works in real-time – but I will say one thing: Even if I was still a DreamWeaver user, I would buy Expression Web 3 just to get the full version of SuperPreview. And that says a lot cuz’ I’m a cheap guy. With alligator arms.

For more info on Expression Web 3 microsoft just published Expression Web 3: An Overview on the official Microsoft Expression website.

For another take on the new version check out fellow Microsoft MVP Cheryl D. Wise’s blog.

Related posts:

1. Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips
2. Previewing Silverlight Applications in Your Browser With Expression Development Server
3. Expression Web 3 Service Pack 1 now available

As per usual nothing of my session will be set in stone until a couple of minutes before the session starts (because I’m just that organized) so if you’re attending and you have a request or a suggestion or a question that you’d like me to talk about, drop a line in the comments of this post or send me an email and I’ll take it under consideration.

I was going to bring some of my new and insanely cool limited edition shirts to the event but sadly the printer decided they need two full weeks to do the job so they won’t be ready in time. Instead I might be bringing some other cool nicknacks to remember me by. And who knows, it might be something you actually want!

Related posts:

1. Speaking at Vancouver Microsoft Innovation Briefing
2. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?
3. The Big Expression Web 3 Giveaway – Winners Announced

Needless to say writing a book about software that not only is not out yet but is not even finished yet is a bit of a challenge. And like last year (when I wrote the first version of the book) I will probably spend the next couple of months in constant revision mode making new screen grabs, changing tutorials to fit a not-yet-completed user interface and so on. But hey, I’m not complaining: Writing these books means I have to learn and understand every minute detail about the software. And knowing your tools inside out makes for a faster and more productive work routine.

The new book is more than just an update to fit the new user interface: Over the past year I’ve received countless emails from readers with questions and comments about everything from how to save files in Expression Web to how I got a book deal and I’ve taken all these comments, suggestions and criticisms along with my own experiences and thoughts to rewrite many of the chapters and add new and exciting content. And yes, my sentences are just as long in the book!

New features in the book

The new version of the book will, amongst other things, include:

• a completely new project that the reader will build from the ground up. The new project has a better design, more flexibility and new choices for the designer to make the site her own. The idea behind the new project is that once the site is completed by the end of Hour 24, the reader can simply replace the content from the book with her own content and launch the site.
• New menu tutorials showcasing vertical and horizontal CSS based menus as well as a CSS based drop-down menu.
• A CSS layout tutorial explaining how you can use CSS to create multiple different layouts within one site without having to make separate style sheets.
• An entire chapter on cross-browser testing using SuperPreview and the other accessibility and reporting tools built into Expression Web 3.

I am currently rewriting Hour 18 and, having skipped some chapters, still have about 10 to go (plus a couple of apendixes and a bonus chapter) so if you have comments, questions, concerns or anything else you want to say before I wrap this baby up, please feel free to put it in the comments below or send me an email. The book is written to help you so if you need help, speak up!

That said, go to Amazon.com and buy the book now. That way you know you’ll have it the minute it comes out!

Related posts:

1. The Cat’s Out of the Bag: I’m Writing a Book!
2. My book is featured in the Canadian User Experience Blog
3. My Book Is Finished (first draft at least)!

What they presented to me – after the signing of numerous Non-Disclosure Agreements – was a pile of sketches of a future browser preview application with the working title “SuperPreview”. The premise was simple: During the authoring of a website the developer or designer can test the current output and get feedback in the form of warnings, graphic overlays and onion skinning showing how the page will appear and change depending on what browser is being used.

Now browser previews is not a new idea by any means – there are tons of free and paid online services that do the job and most if not all web design applications offer multi-browser previews – but all the existing services operate on a browser-by-browser basis. What was novel about SuperPreview was the idea of viewing all the browser outputs simultaneously and on top of each other so you can really see what the difference is.

As a designer/developer cross browser testing is a daily routine that often leads to my computer getting some multi-lingual verbal abuse. Because even with perfect, standards based and properly validating code there is no guarantee the site you design will look the same across all browsers and all platforms. What makes cross-browser testing truly tedious is that for every page you have to open multiple browsers and look a them individually. And if you want to find minute positional shifts or other differences you often have to flip back and forth between browsers or use screen grabs or worse (I sometimes use whiteboard marker on my screen!). Any application that simplifies this process would be a huge help.

So for two hours Anna and Boris listened to my rambling feedback and lofty suggestions and at the end we parted ways, they with a pile of notes, me with a deep and profound desire to build a time machine so I wouldn’t have to wait for the damn thing to be developed.

And today, finally, the wait is over. In conjunction with the MIX09 conference in Las Vegas Microsoft Expression Web SuperPreview is now available for download in public beta.

Caveats

The current beta release of Expression Web SuperPreview is for Internet Explorer only, and there is a known bug in the beta that prevents you from testing against IE6 if you are using Windows 7 as your operating system (which I am). I’ve been assured by the development team that upon final release in conjunction with Expression Web 3 there will be true cross browser support for at least FireFox and Safari. Still waiting for word on Opera. I asked about Google Chrome on a visit to Redmond last summer and got the response that due to the strange (my word) way Chrome functions (the browser is almost entirely JavaScript based) it is hard to test for and will not be supported. Which is too bad because in spite of Chrome being atrocious when it comes to page rendering – so much so at times it begs comparison with IE6 – I see it becoming a popular browser simply because it is being pushed by Google.

Also, the SuperPreview Beta is more of a teaser than an actual full fledged application. The Beta offers the basic display and onion skinning functions but nothing in terms of scripting assistance and all the other bells and whistles which will be in the final release. Therefore the beta is, at this point, merely a tool to tell you if things don’t look the same across different IE versions. The reasons why you have to figure out on your own.

Installation

Expression Web SuperPreview public beta can be downloaded for free directly from Microsoft. It installs as a stand-alone application and will continue to do so in its final release this summer. I think initially the plan was to make it part of Expression Web 3 but having it as a stand-alone application makes more sense in my mind because as I see it I’ll be using it mostly to test live sites on the web and it would be cumbersome to have to go through Expression Web to get to this function.

Some bad news for Mac users: Expression Web only runs under Windows and this also applies to SuperPreview. Well, bad news might be an overstatement. Expression Web (and by extrapolation SuperPreview)  runs just fine under virtual emulators such as VMWare and Mac users can always install Windows through BootCamp or directly onto their fancy boxes. But you have to give up your beloved OS to do so. Small price to pay in my view.

SuperPreview installed with no problems in less than 30 seconds under both Windows 7 and Vista Home Premium on my Vaio laptop but kept on freezing on the start page when installed on my Vista Home Professional desktop. Based on the behaviour I am extrapolating it is some form of resource conflict that is causing the stall but it’s hard to tell. More to come on that one.

In its present configuration (testing only for 3 versions of Internet Explorer) it doesn’t really pull much in terms of resources though I can imagine this will change when you start piling on browser emulators. TBD.

So how does it work?

On startup you are presented with a split view where you can select what browser configuration to use. The screen grab above shows the beta release restricted to only the currently installed Internet Explorer versions while the one below shows the future release in which you can choose from more than just Internet Explorer browsers.

In the default Vertical Split Layout (seen above) the baseline browser is displayed on the left and the testing browser is displayed on the right. This is mean to reflect how designers work – deigning for one baseline browser first and then testing to see how the same site looks when put into other browsers. Multiple browsers can be selected for comparison but only one is displayed at a time on the right. The buttons on the bottom of the window decides which one.

Display modes

In addition to Vertical Split Layout you can also view and compare different browsers in Horizontal Split, Overlay or Single View. Of the four I think Overlay Layout is the one that will be used the most. Being able to place multiple browser views on top of each other and onion skinning them shows you exactly how distorted your layouts get as they appear in different browsers and gives you an often surprising reality check when it comes to browser idiosyncrasies. I have to admit I was surprised at how even 100% standards based and IE-friendly code displays slightly differently between IE7 and IE8, especially where font size and line height is concerned. The grab below shows the font size discrepancies between IE8 and IE8 in Compatibility Mode as they appear on this blog – this in spite of a comprehensive CSS reset and proper font sizing being applied.

DOM highlighting

But the different display modes is only the tip of the iceberg. SuperPreview also provides two different kinds of DOM (Document Object Model) highlighting – Standard and Difference.

When set to one of the split views with Standard selected SuperPreview will draw a red outline around whatever element you hover the mouse over and mirror this element position in the other window. This provides an element-by-element indication of not only where an element is located (if it’s improperly positioned in one of the views) but also shows even slight shifts between the two browsers. What’s cool about this feature is that it works both ways – so if you hover over an element in the right view, you see the shift in the left view and vice versa.

With Difference Mode is on, the selected element is highlighted and the rest of the page is darkened. The actual process behind this effect is the same as in Standard view but in some cases the highlighted view makes it easier to see exactly what is going on and like the name suggests it highlights any shifts or aberrations much better.

In the Beta release the visual cues is all you get. And this is what I mean by the Beta being a “teaser”. As the grab below suggests, the final release of SuperPreview will also provide code information about the elements being selected with the DOM highlighting making it easier to troubleshoot code that doesn’t work the way it’s supposed to.

Practical usage

Like I’ve said way too many times, this Beta release is not the complete package. But it’s close to what the free version of SuperPreview will be once the full package is released: namely an Internet Explorer compatibility tester. And even in its stunted form you can still get some good use out of it. One of the many challenges web designers face is the ability to effectively test their sites against IE6. There is a huge movement stirring to get rid of this dinosaur of a browser but until that happens we are stuck with having to either accommodate it or deliberately ignore it. The challenge is that unless you run some form of virtualization software or use an application like IETester it is very hard to test sites against IE6 because only one version of IE can be installed on your computer at one time.

Well, that problem is pretty much gone with the introduction of SuperPreview. Right out of the box the application lets you test pages against IE6 and see just how mangled they get when the browser digs its claws in. As an example, DesignIsPhilosophy looks horrendous in IE6 and SuperPreview makes that abundantly clear:

When Anna and Boris sketched this project out for me a year ago one of my concerns was that the output of SuperPreview wouldn’t be accurate but some form of emulation or approximation of the true output of a real browser. But based on my quick tests since yesterday it looks to me that the output is true. Case in point: The StopLivingInThePast.com site features a WordPress plugin that adds an IE6 warning asking the visitor to upgrade her browser. The plugin uses both JavaScript and CSS to identify the browser and inserts a big box off the top if the visitor is using IE6. As a testament to the good programming at the base of SuperPreview, the warning shows up in IE6 view as it is supposed to which means JavaScript and CSS is rendered properly from the ground up.

Conclusions

I won’t pretend to understand how SuperPreview works and it’s hard to judge an application in terms of usability and impact when you are working with a beta version that doesn’t have all the features included. But even so SuperPreview offers true cross-browser testing on a level never before achieved and it has the potential to become one of those “must-have” tools in the toolbox of web designers and developers. I’ll wait impatiently for the full release so I can do some true cross-browser comparisons.

Related posts:

1. This is Expression Web 3
2. Previewing Silverlight Applications in Your Browser With Expression Development Server
3. YouTube joins the movement to phase out Internet Explorer 6

Interactive Panel Discussion: The Right Presentation Layer for Your Solution

By the end of this webcast, you will be able to:

• Use some of the presentation layer tips and tricks provided by the panel
• Gain some knowledge of what presentation layer technologies Microsoft provides that you can use in your solutions
• And most importantly, have your questions answered!

The Presentation Layer of an application can be pivotal to the adoption of your solution by users. The right technology for the presentation layer should be the one that makes an emotional connection with the user and helps make the user more productive.

Join us for an interactive panel discussion from some of the foremost experts in user experience, effective presentation layer design and development. This is intended to be a discussion between you and the panel of experts, so come prepared to ask your questions about picking the presentation layer for solution!
This event is focused on Custom Developers, ISVs and Interactive Designers.

This webcast is appropriate for both technical and business decision makers.

W E B C A S T

Thursday February 26, 2009

Time: 2:00PM to 3:00PM EST

Event ID: 1032385445

Register Now

Related posts:

1. Speaking at Vancouver Microsoft Innovation Briefing
2. Expression Web 2 Webcast June 5th – What do you want to know?
3. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation

Just before the Holidays this dropped into my inbox. It’s a great deal made even better by the fact that the Microsoft Expression line is already competitively priced. Add to that the great review Expression Web 2 got form PCMag.com and you have the perfect last-minute or belated gift for yourself or the web designer / developer in your life:

For a limited time (exact timeframe is TBD), there is a 50% off discount on Microsoft Expression Studio, Expression Blend and Expression Web through the new Microsoft Online Store. *This is US Only*

http://store.microsoft.com/microsoft/design-developer/category/6
http://store.microsoft.com/microsoft/design/category/601

Related posts:

1. Taking Microsoft Expression Suite to Task – And Blogging About It
2. This is Expression Web 3
3. Read my article in the Microsoft Expression November Newsletter

A quick review of his CSS told me the problem was he didn’t have the display property set to block. A slight omission for sure but I was more focused on where it originated. A quick read of the paragraph in the article showed me that somewhere in the editing (probably during my rigorous clean-up) this small but important piece of code was ommitted. Which means if people follow the tutorial step by step they’ll run into the same problem.

I’ve already informed the newsletter team of the issue and hopefully they’ll fix it presently. In the meantime, if you’ve run into this problem and you found your way to this blog, here is the full paragraph and the resulting code:

5th paragraph under the heading “Style the links”:

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to “fill out” the area with the background colour, go to the Layout category and set display to block.

The resulting code should look like this:

ul li a {
	background-color: #808080;
	color: #FFFFFF;
	width: 142px;
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding-left: 8px;
}

You can find a full working version of the menu here and it’s CSS here for reference.

Related posts:

1. Fancy Interactive Pure CSS List Boxes with Hover Effect
2. Highlight current page in WordPress menus
3. Get Microsoft Expression Products 50% off for the Holidays!