MikePadgett.com

Hey kids, this is definitely one of the weirdest bugs I have ever clapped eyes on, so to speak.

Not for the first time, I was happily writing CSS and Dreamweaver CS3 crashed.

The crash

Something feels a little too familiar - this is DW after all - but I try to restart anyway: it’s 1am and I don’t need this. Nope, there it is, unequivocal and painfully blunt: Dreamweaver CS3 won’t start on Windows XP.

The following options were available:

• Abuse someone at Adobe
• Reinstall Dreamweaver
• Try to clean out my config files so that Dreamweaver has to create new ones on restart (an old and occasionally successful solution)

After the jump: getting Dreamweaver up and running again

Microsoft’s Office Sharepoint Server 2007 clears up some problems with cosmetic improvements, but delivers enough new ones out-of-the-box to remain beyond the reach of assistive technology users. Significant development will be necessary to ensure a basic level of accessibility.
Article continues after the jump…

The old RouteOne website

A new website for RouteOne, the leading publication in the Coach and Bus industry, is set to go live shortly.

My job was to turn the old offering - primarily a storefront for new registrations - into an accessible, readable editorial site to reflect the investment in design.

RouteOne was a great opportunity for me to follow up on my recent interest in the area of editorial design and I did a lot of research into what works.

The business of designing for a readership turned out to be a process of experimenting with subtlety, since content and continuity are the most important factors in getting the site to sit well with users. I think we’ve certainly achieved this, based on the results of the testing I did.

The new RouteOne website homepage

As ever, the site is put together with a CSS-based layout and on this project, a full stylesheet was devoted to the provision of the numerous editorial styles that should make RouteOne distinctive and highly readable.

I really enjoyed working on the new site, my first under the banner of our new business. I look forward to the desired results being achieved!

I just completed a new CSS layout build for Memorabilia, the event that runs every year at the Birmingham NEC.

The Memorabilia show features appearances from actors and actresses, sports personalities and stalls selling collectibles from film and television. There’s often a particular bias on sci-fi.

Past guest appearances have included Verne Troyer (Mini-me of Austin Powers fame), Anthony Daniels (C-3PO) and Bond-girl Britt Ekland.

The new site sports a broader, more attractive layout in keeping with the direction in which the event organisers Expo Management are pushing.

Check it out at http://www.memorabilia.co.uk!

Briam asked on the forum for the blog software that runs MikePadgett.com about template styles.

I had written a brief article before MikePadgett.com was so kindly hacked about the work I’d done on templates.

In common with most blog software, the idea is to separate content from presentation, so it’s just a matter of writing decent CSS.

Here are the two previous ’skins’ that have graced these pages:

Japon - the first blog style I used in 2005

Woollen - a Norwegian sweater to keep the blog warm for winter

If anyone would like some help with their templates, let me know.

Update 21/02/2007:

Getting this problem?

PIE Clearfix works fine in IE7 like this:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Now simply add:

class="clearfix"

… to the outer div. For the sake of neat markup, you could also just incorporate the above code into your existing rules and/or classes.

Let me finally remind readers in this update that I take absolutely no credit for this clever fix. I wrote my article because it took me a painfully long time to find the original PIE article and I’d hoped that it might just take a few more people to connect the cables and light up the Christmas tree! If you’re here, it worked!

It was hard to find because it’s hard to describe the problem except in the most generic - and therefore most Google-unfriendly - search terms. As a result, I’ve also seen this issue described as “nested div float problems”, “clearing nested floats” and simply “container div won’t float”.

The original article below has more than mere archive value. There are other hacks too, some devastatingly simple, but clearfix is still the one I use almost two years on. It’s something dependable and rock solid in these twilight times for backwards compatibility!

Original article:

I reported some time ago on the clearfix hack: the kludgy solution to nested DIV float problems.

Since then, I went on to make liberal use of this little gem.

As you do, I stumbled across a sickeningly simple alternative today, whilst looking for a solution to a Safari float problem.

This latest wonder is from CSS nut Paul O’Brien, and apparently it’s been around for some time, if fifyfoureleven.com’s report is anything to go by.

Here’s the problem again:

The solution is simply to add overflow:auto to the outer div.

Here’s the before, and here’s the after. Now I haven’t really tested this yet, but these examples seem to suggest that all is definitely well.

My colleague John Goodall said he’d read that the PIE Clearfix solution wouldn’t work in IE7. I haven’t found the item he saw as yet, and it shouldn’t be an issue if IE7 does support (as they say it will) the :after pseudo-selector.

Well, even if PIE Clearfix does break in IE7, here’s a drastically simpler alternative!

This item is a follow-on really from a statement I made in my previous article about User Experience 2005: how we are web designers rather than artists.

J recently pointed out to me a website she’s been looking at called Heavy Backpack. It’s billed by its makers as a “Creative Catalogue” - in other words a mini portfolio for each of its contributors and there are some outstanding examples of graphic design in there with the usual derivative stuff.

Heavy Backpack

But the site itself is what interested me first. It looks attractive, along similar lines as K10K or any number of those horrible awards sites that all present us with a cutting edge mostly made out of Flash.

Now, of course I realise that the right way to do this kind of magazine (or catalogue or whatever) site is to mute your design so as to let the content do the talking, but being a person interested in the details, I couldn’t help but notice as the site slowly loaded that there were so many images on the page.

My interest was piqued and I dived right into the source code to see what efforts had been made.

Few. 27 validation errors in HTML 4.01 Loose. A cherry pick of the accessibility issues includes those perennial favourites tiny type, iframes and almost no alt attributes.

The team that put Heavy Backpack together is Wade Studios, an Australian business with a good client list. Very talented graphic designers, clearly, but as web designers they ain’t.

In the last year, I have become increasingly convinced that to call yourself a web designer today means that you are a proficient XHTML/CSS coder, a standards evangelist and well-versed in usability and accessibility best practices. So says Zeldman, so says O’Shea and all that lot, so says Nielsen, and so say I. A graphic designer is not a web designer.

Quote:

“Too many graphic designers have tried to force the Web to be what it is not, in the process creating ineffective and sometimes unusable websites. Quality web design is driven by information architecture design principles. Graphic design should support these principles.” - Gerry McGovern

Graphic design houses ignored the Internet. It was low culture for a long time and there was no money in it. But today, interactive projects can rival those in other media in scale and value and now these same graphic design houses are selling their web capabilities where they can’t get through the door on the back of print alone.

But in truth, the fuddy old Art Directors don’t understand websites. Just as some design houses tried to stay aloof when DTP was adopted by all walks of employee (even though the product was crap, it was certainly cheap) they also missed the boat with the Internet.

Hence why the code is neanderthal, or worse, art program-generated.

Hence also why it’s pretty but without practicality.

[See also: Design Choices Can Cripple A Website by Nick Usborne, 08/11/2005 A List Apart]

This item is now out of date. See the updated version.

I recently discovered a CSS hack that has come in very handy indeed since.

The problem arises in both Firefox and IE (though the solution is different for each) when we try to wrap a div around one or more divs with float.

You want your wrapper to stretch vertically with your contained divs, but instead, you find that your wrapper gets behind when your floated content divs go stretching off down the viewport and beyond.

The development community is all but silent on this issue, though I would think it’s a common enough problem to have encountered.

I tried and tested an IE solution, but it was thanks to Big John and Holly at positioniseverything that the NS / Firefox side of things could be cleared up. The full article with the whys and wherefores is here, and the code we need is as follows:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


Now we get the result we want!

Studio 8 is here, announced Macromedia on Monday.

I’ve taken a look at the demos. A lot of the focus seems to have been on GUI improvements and extended support for technologies.

There haven’t been too many changes in Flash 8 - better video support, some more development for non-coders, improved GUIs and so on.

Dreamweaver 8 is gearing up for better CSS support, but it actually looked a bit confusing from the demo.

Fireworks 8 introduces more filters to bring it closer to Photoshop and some interesting CSS support for menus. Freehand remains unchanged (again).