Introducing… drum roll please… last-child.com

I am now launching a new site for advanced CSS code. I’ve begun the process by copying code related posts; watch for book reviews, guest posts, and pure, simple code. I’ll be posting quick notes for problems I’ve encountered and the solutions I find.

This won’t be a gallery site. It won’t critique re-launched sites. It won’t discuss my fascination with Project Runway. In short, it’s the scrap book developers keep on their desks. It’s the photocopies taped to a wall, the notes scribbled on your hand, and the business card tucked away for later review. Visit it today: www.last-child.com

k2 theme

Kudos to the Binary Bonsai crew for building super fantastic K2 WordPress theme. You’ve made it possible for me to put this little project online quickly. I’ll begin transforming it to a more unique look quite soon. K2 will continue to be the backbone.

I did a Standardista Search for a cure and didn’t see it. But a quick message to the Web Standards Group returned the solution. It’s actually pretty easy.

UFO Flash detection and insertion script

I’m using the UFO JavaScript to detect the browser’s compatibility with the Flash movie and insert it on the fly. This method provides good default content to those without Flash and valid, shiny, happy Flash to those with it.

UFO gives you the ability to insert parameters into the movie and this is what you need to cure the z-index issue. You need to set the wmode parameter to “transparent.”

var FO = { movie:"swf/myMovie.swf", width:"300", height:"120", majorversion:"6", build:"40", wmode:"transparent" }

That’s all there is to it.

But not mine… I found some photo of a guy dancing in a speedo and boots and new my muse was getting tickled. With Photoshop’s newly released ability to set text on a path, I was on my own path to ugly tshirt lovin’.

I even wore this lovely shirt to the @Media conference and witnessed dozens of people jealously admiring my lovely dancing hack guy. Yes, that’s me next to the lovely Molly. Notice her admiration for the lovely tshirt. Or is that fear in her eyes as she wonders who this maniac is with the camera phone.
In the spirit of the IE7 Beta 2 release, you can get your own version of this lovely shirt. So, head on over to my CafePress Box Model Hack store and stock up on the goodies before Microsoft actually fixes the box model problem… Now that’s funny.

Microsoft has fixed much of the bugs that plagued IE6 and in the process removed the filters we used to target Internet Explorer in our CSS. As Lord God Martha would say, this is a good thing.

However, there will be a time when you need to send a rule to IE7 and not to IE6. Or perhaps you need to send a rule to IE7 and to IE6. I’ve put together a test page of IE6 hacks to see what IE7 doesn’t walk right past. I’m condensing the test page into the paragraph below.

Luckily, there is a loophole for us and we can use this for “offroad use only.” Why am I using this silly description? Because you and I need to move beyond hacks. Place browser specific (IE) in conditional comments or use a serverside script to place a class on the html or body (html class=”ie6″ ) to target these browsers in your main CSS file.

However, these hacks will let you develop your CSS on the fly and fix your issues before going the proper route.

Test Paragraph (condensed version of test page)

this is the test paragraph to see how IE7 will handle hacks

• IE7 Beta2 understands #wrap>p.borderfun and applies correct color.
• IE7 Beta2 ignores * html p.borderfun styles.
• IE7 Beta2 recognizes the * hack.
• IE7 Beta2 ignores the underscore hack.
• In Firefox, Safari, and Opera, you should see a red border. In IE7, you should see a black border. In IE6, you should see a pink border.

How to use this

If you need to send something to IE6 and nothing else: use the underscore attribute hack (_border:1px solid pink;) If you want to send something to IE7 AND IE6, use the *attribute hack (*border:1px solid black;). If you want to send something to IE7 and NOT IE6, use a combination (*border:1px solid black; _border:1px solid pink;).

A call to arms

Get out there kids and begin removing your * html rules. Place those suckers in a conditional commented css file or at least begin replacing them with the underscore hack. When it comes time to tune for IE7, you’ll have less work to do.

Rolling out IE7

Microsoft has an aggressive agenda to upgrade people from IE6 to IE7. By the end of Fall, we should see a significant percentage of our web site visitors using IE7 and by the end of the year, the majority of our traffic will be IE7. Those without IE7 are machines with illegal copies of XP, people with XP Service Pack 1, and those that don’t accept Microsoft service updates.

Use real CSS

If you are working on a site now, begin using real CSS.

• Use child selectors, first-child, attribute selectors, etc.
• Hover your list items and more. IE7 supports the hover pseudoclass on more than the link.
• IE7 offers full support of alpha transparent png graphics, so begin using them as well.

Forget what you knew about “* html”, those hacks now belong in a style sheet that is introduced via a conditional comment. They are gone, kaput, zilch. Sure, they’ll still work on IE6, but you’re going to have one heck of a nightmare keeping track.

Test Sites

I am a big fan of All that malarkey (Andy Clarke). However, his site is full of special rules for IE6 and its a great testing ground to see what IE7 chokes on and what it does as good as Firefox, Opera, and Safari. If your site is fairly hack free, you probably won’t notice a difference going from Firefox to IE7 Beta 2. Start hunting around and finding the errors.

What is still broken on IE7

There are two major issues that I have with IE7.

1. No generated content. You can’t use CSS to add checkmarks to visited links, clearing containers spans, etc.
2. Double float margin still exists. This can be fixed by adding display:inline to your floated objects when this problem occurs.
3. While I haven’t been able to nail down the specifics, there seems to be some bugginess with positioning absolute/relative.

I’m sure there will be much better analysis of this launch by PositionIsEverything, Quirksmode, and the IE7blog. I hope these scribbled notes help you move forward. IE7 is a good thing. It’s not perfect, but damn it sure is nice to ditch the son of suckerfish javascript, class=”firstitem”, haloed transparent gifs, et al.

I forgot to mention, IE7 replaces IE6 on your computer. You need to have an extra computer to continue testing your pages in IE6. If you only have one windows box, I’d suggest keeping IE6 on that and just program for Firefox, et al and placing your IE6 hacks in a conditional comment linked style sheet

SELECT element in IE7 – An Overview

In IE6, the HTML SELECT element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.

In IE7 however, we re-implemented the SELECT element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.

IEBlog

Form design is frustrating.

Form elements are up to the browser for final presentation unless you get into some tricky CSS and JS solutions and those are not necessarily cross-browser solutions. One particular problem I’ve experienced was with the nicetitles javascript that creates a nice popup box with the text of a title attribute on hover. I tried to use this on an insurance quote form to give the visitor better feedback on what was needed. IE6 would place the inputs on top of the popup window. I then tried moving the popup farther to the side to avoid this and that just looked hokey. So, I gave up on the idea. It would be interesting to test this now with IE7.

I’m also intrigued by the ability to use the title attribute on the select object. Normally, I would place the title on the label. However there may be times when the visual design requires hiding the label. Placing a title on the select would be a great way of letting people know the page may refresh or whatever action the select box leads to.

With rumors floating of an IE7 Beta2 developer release within a few weeks, we should begin looking for pages to test these new attributes on.

Filling the Vacuum

Other standardistas have been talking about the new web professionals, those who know how to create valid, accessible web sites. And those who are no longer true pros (who still use tables and invalid markup). What they are not discussing is the vacuum being left behind by the early-adopters. Let’s take me for example, as I always do enjoy the subject.

The Ted Factor

I have created a number of site conversions over the past 2 years. I’ve also moved up and up from job to job. I’d finish a conversion, move to the next, finish that, move to the next, etc… But who ends up maintaining these sites? That is the problem some companies are facing today. You hire someone that builds a standards-based web site and then gets tapped on the shoulder by a bigger company. Now the smaller company needs to hire someone that can work with this new creature.

I got an email today from a former employer. They need someone in San Diego who is ready to work. Sundance Kid and I made huge changes to their sites and now they need someone that knows how to continue the work without us. Another former employer has been searching for a web developer for over a year. What do they do? Hire a table hacker that will revert the pages back to tag soup?

Witness the Disney store makeover in Europe. They went from an accessible, standards-based design to a crappy mess. Why? Possibly it was due to lack of understanding. Perhaps they had nobody that could extend it and they felt more comfortable with the old cut-up images.

Education, Education, Education, Education…

As standards-based web developers, we need to educate others. Take someone under your wing and show them how to use CSS, DOM, or what it means to validate. Don’t hold it in. Be kind to your fellow workers and employers. If they are not recognizing your abilities, look around. Jobs are out there!

So, this post has rambled enough. If you are a standards-based developer. Leave a comment, I’ll respond with information on who to contact. Heck, leave a small resume and perhaps someone else will see this and contact you as well. The jobs I know of are in Southern California, but I do have certain connections to a very large company in Silicon Valley that is looking for quality developers.

Seriously, don’t hesitate to attend this conference. Yes, I’m talking to my fellow North American programmers. Cross the pond and get on with the show.

Big thanks to the @media crew for acknowledging the attendees of last year’s event by giving us a few bucks off the reasonable ticket cost.

Looking back fondly

Several of the standardistas out there have been sharing their joyful memories of their ventures into the big ol’ world of moolah with nary but a Dreamweaver on their back. Great advice is out there for the pickins. Sure there’s a mixture of demanding bosses, forever late paycheques, and brain-dead art directors. But ah….the glory of it all.

Yes, my dear… there is a big world of hacks out there for you to climb. Grab a friend and start climbing, for soon enough you will be on top and have the opportunity to reach down and pull someone else out of the valley of the table-goo. Ask questions and begin providing answers. Maybe next year, you will be the star on top of the standardista chrismahanakwanza tree.