cssvault - inspiring creativity

Styling form elements is probably one of the toughest challenges in CSS design, right up there with positioning and dealing with varying browser quirks. That is why I personally try to avoid styling form elements, unless absolutely necessary.

Probably one of the toughest elements to style is the input type=”file”. It’s that cute little input box with a browse button beside it. You normally encounter them when uploading photos and files on a website.

In a perfect world these form elements should look consistent on all platforms and across different browsers. But this is not a perfect world, and so those who seek to style their form elements are faced with the task of making these form elements look consistent. A not to difficult task for standard input boxes, text areas, and buttons, but as always there needs to be a single element that just would not cooperate and obey CSS rules. You got it: input type=”file”

So we resort to using tricks such as multiple div layering, making the input box invisible, and even JavaScript (to the rescue, as always). For the longest time my favorite reference is Michael McGrady’s technique, which you can read about here.

Then there are those who decide that the best way to deal with these ugly creatures would be to hide the input box completely, leaving only the browse button visible for file selection. Accessibility proponents will probably cringe at this suggestion, but it works and sometimes that’s all that matters to the designer.

Personally, I prefer none of the above. In fact, I actually prefer not to style form elements at all (gasp!) Okay I was exaggerating. To not style form elements would be utterly moronic. But I think I got the point across. Remember the 90’s where everyone thought changing the color of the scroll bar was cool? Now it’s as good as dead and shamefully forgotten.

Personally the best form design is where styling done at a minimal, often restricted to sizing, placement, and font styling only. Let the operating system handle drawing of backgrounds and borders and scroll bars. They were designed that way. Plus, you’ll have less problems and and sleep better.

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

I have always been a huge fan of the minimalistic sign-up form. You know, the ones where all it takes to create an account is to provide 3 items: username, e-mail address, and password. Including the password confirmation box and that makes four. So, I was ecstatic when Luke Wroblewski’s article came out. Here he was telling us that there is actually a better approach which allows its visitors to plunge into the service without being stopped by a sign up and a login screen.

I tested one of the featured sites myself, Geni and behold, I never even saw a registration screen. I was converted from visitor to user in a snap.

Other featured sites included Jumpcut, TripIt, and Fidelity’s myPlan.

Now that is what you call thinking out of the box!

Microsoft has finally made Internet Explorer 8 Beta publicly available for download, and all I can say is: WTF?

First of all, IE8 can only be installed in Windows Vista SP1, XP SP2, 2008 Server, and 2003 Server SP2. Which leads me to think that this is nothing more than a business ploy to get people to upgrade their *cough* legal *cough* Microsoft OS.

Next, what happened to passing the ACID2 test? After bragging about this milestone months ago, it is still failing for some. The exact reason is still unclear, but this inconsistency is disappointing nonetheless.

Third, what about SVG support? The web community has been stuck with raster formats LONG ENOUGH! How much longer must we wait until we arrive at a standardized vector format?

Finally, let’s look at IE8’s “new and exciting” features:

Activities

Activities are contextual services to quickly access a service from any webpage. Users typically copy and paste from one webpage to another.

Kind of cool, but plugins / extensions / add-ons in Firefox do the trick just fine.

WebSlices

WebSlices is a new feature for websites to connect to their users by subscribing to content directly within a webpage. WebSlices behave just like feeds where clients can subscribe to get updates and notify the user of changes.

Again, sort of cool. I am all for microformats, but RSS feeds are already a standard across all modern browsers in different platforms including mobile, so I doubt web developers will want to develop widgets that will only work on IE8.

Every “feature” listed after Webslices is basically pointless or a replication of a Firefox, Safari, or Opera feature. It’s sort of like the marketing team had to try very hard to come up with something to sell IE8 with. Nothing “new” or “exciting” here.

Favorites Bar

In Internet Explorer 7, the Links bar provided users with one-click access to their favorite sites. The Links bar has undergone a complete makeover for Internet Explorer 8.

So basically, the team spent countless hours designing a new favorites bar that looks just like every other favorites / bookmarks toolbar and added a new menu item that saves favorites directly into the bar and called it a new feature.

This feature, for one, has really left me speechless.

Next!

Automatic Crash Recovery

Automatic Crash Recovery (ACR) is a feature of Windows®Internet Explorer® 8 that can help to prevent the loss of work and productivity in the unlikely event of the browser crashing or hanging. The ACR feature takes advantage of the Loosely-Coupled Internet Explorer feature to provide new crash recovery capabilities, such as tab recovery, which will minimize interruptions to users’ browsing sessions.

Finally IE8 gets a feature that has been in Firefox for AGES! I guess this is their way of admitting that their browser crashes all to often.

P.S. How long did the designers come up with such a cool name as “Automatic Crash Recovery”? If I were them I’d try to trademark that before someone else does.

Improved Phishing Filter

Internet Explorer 7 introduced the Phishing Filter, a feature which helps warn users when they visit a Phishing site. Phishing sites spoof a trusted legitimate site, with the goal of stealing the user’s personal or financial information. For Internet Explorer 8, we are building on the success of the Phishing Filter with a more comprehensive feature called the “Safety Filter.”

I can’t believe this made it to the “New and Exciting Features” list. The marketing team is really on a roll.

Activities, WebSlices, Favorites Bar, Automatic Crash Recovery, and now Safety Filter? What’s next, the Super Cool Browsing History Manager? Seriously who comes up with these names?! While renaming Phishing Filter to Safety Filter would prevent Grandpa Joe from getting a migraine while trying to imagine why he must bring a filter the next time he goes fishing, I must say that this only leads to more confusion.

It would have been much more intuitive if the Phishing Filter were moved as an option below the Security Filter, because the Security Filter does so much more than prevent phishing attacks. For one, there’s the group policy option for blocking unsafe sites, and two … well that’s just about it.

That’s really just about everything that there is with the new IE8 Beta. If this is any indication of what the final product is going to look like, then I guess we are better off without it. As far as web developers are concerned, it’s just another browser to produce hacks for. Speaking of looks, it looks exactly the same as IE7. At least the Mozilla Firefox team made the effort to come up with a new look in Firefox 3.

On a serious note, hard core developers may wish to take a look at the IE8 Beta 1 Whitepapers, which as of today appears to be central to a single new feature: Better AJAX Development. Hooray. Yeah I know I said this was a serious note. But really guys, WTF?

As a follow up to my recent article on CSS-only, tableless forms, do check out the CSS Form Garden, a gallery that showcases uniquely style forms utilizing the same forms technique.

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

While surfing around today day I landed on FitFlash, a JavaScript solution to resize Flash animations “… to 100% width and 100% height when your browser window is greater than the minimum desired size and resizes flash to the minimum desired size when the browser window is smaller…”

FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.

It works seamlessly with SWFObject, which is great.

Here is an awesome pure CSS, cross-browser drop down menu that can easily be plugged into any site.

The original script is a bit bulky at 10 KB (a whopping 296 lines of code!) but I was able to bring it down to 4.1 KB with a little help from CSS Optimiser.

You can download the optimized version here.

I have been contemplating on writing a similar tutorial, but web designer wall beat me to it. It’s a very well written article, so be sure to check it out. You can also check out the demo here.

Pseudo-selectors like :before and :after is perfect for adding content before or after classes, such as in the case of visited links or blockquotes. Here are some examples from the article:

blockquote:before {
content: “From the article: “;
}

This will literally put the text “From the article: ” before every single blockquote on your page.

Continue to the original article.