blog

Sorry to bore everyone with yet another developery post, but this does affect you designer types as well. Plus, I think it’s cool so I am going to share.

If you look closely around the web you will rarely see tabs that overlap each other. Usually, each tab is in its own self-contained box. The reason for this is that if two tabs overlap then turning one of those to its activate state requires the swapping of multiple graphics. This makes using sprites much more difficult and less effective (and if you’re still using JavaScript for image rollovers, well, that gets even messier).

So, I am working on the UI for the tabs seen to the right. You’ll notice that not only do they overlap, but each has a drop shadow that covers all the tabs and only those tabs that are “underneath” it. It is literally like we have four tabbed sheets of paper here that we want to be able to stack in any order. In my opinion, this is a pretty silky graphic effect, check it out, the PG. 2 tabs is all the way on the bottom, followed by PG. 1, then PG. 3, with PG. 4 on top.

My solution is to use absolute positioning along with transparent PNGs. Yes, transparent PNGs mean bad news for IE 6, but the solution is otherwise super-easy to work.

Simply cut out each individual tab and keep its alpha-channel transparency by saving as a PNG. Then, absolutely position each tab in its correct place on the page

Now here is the trick. If the server generates the active tab, whichever tab appears last in the HTML code will be on top based on the natural stacking order (i.e. no need to fool with z-index).

If the client-side can alter the active tab, messing with z-index is really not that difficult. I haven’t tried it, but something like the following should work thanks to jQuery.

$(‘.tab’).click( function() { $(this).siblings().css(‘z-index’, 1).end().css(‘z-index’, 2); } );

Oh yeah, if you do need rollovers this method is totally compatible with your traditional CSS sprite.

Recently, we’ve had multiple requests for “print” links and printable versions of web sites. So, I started wondering, with widespread access including mobile, does anyone still print from web?

I posed the following question over twitter the other day: Does anyone actually print websites? If so, what types of sites and how often?

Some of the responses:

@Selicker: I print maps, instructions, and recipes

@noahwesley: I’ll rarely print a blog post/article to read later if I’m going to be bored and w/o laptop.

@fricto: My wife @owlpoo prints blog posts about cooking and knitting for the recipes/patterns quite a bit.

@beccarkt: yes! For competitive audits for clients and for articles, etc. Probably a couple times a week

So, YES. People still do print from web. They print stuff like, recipes, instructions, maps, long articles, and reports. Frequency seemed to vary-some as often as every few days, others very rarely-but the fact remains, web users still hit Control+P.

But even if not many users are printing from web anymore (which I have concluded is NOT the case), it is still really important to define a stylesheet for print.

It’s not that difficult to do, CSS makes it so easy for us to implement a print-only stylesheet. Sure it takes some more dev time to define layout styles that hide the fluff, ensure high contrast, and size things appropriately. But, that extra time makes your content and site much more accessible and usable.

Here are some dynamIt tips to writing that print stylsheet:

• If you do not already know this here is how to specify the media type for a style sheet:
  <link type=”text/css” rel=”stylesheet” href=”print.css” media=”print” />
• Remove things that don’t need to be seen when printed: navigation, features that do not pertain to the page’s primary content, ads (maybe?). The easiest way to do this is use display: none;
• Make sure that your text-to-background contrast is high. This is essential for readability.
• Do not bother making background images or colors print. People do not print from web for the design, they want content. (See above).
• If you are building from a fixed-pixel width design, keep your printable content around 700 pixels wide or less.
• Don’t forget to test it out by printing (and yes this means printing from IE6, IE7, FF2, FF3, Opera, Safari).

I made a cool little CSS discovery recently that I have already found to be quite powerful.

Using the class selector is done with the “.” character.

.foo { color: #ff0000; } makes any <div class=”foo” /> have red text. Likwise, .bar { font-size: 50px; } makes any <div class=”bar” /> have really really big text.

With CSS, it is possible to apply multiple classes to the same element by separating them with a space. In fact, <div class=”foo bar” /> will have really really big text that is also red in color.

But what I recently discovered is that it is possible to define a style that only applies to those elements that have all of the specified classes set. This means we can create a style that is only seen when an element has both class ‘foo’ AND class ‘bar.’

This is done like so,

.foo.bar { background-color: #ff00ff; }

Now, <div class=”foo” /> and <div class=”bar” /> will both take the background of their parent, but <div class=”foo bar” /> will have a rockin’ magenta background.

Pretty cool.

This is just a simple example. What is really going on here is that we are giving a style to a set of classes. And this style gets applied whenever that set is a subset of an element’s classes.

<div class=”a b c d e f”>Hello World.</div> (This element has a class set of {‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’})

.c.b.a { color: #00cc00; } (This CSS style has a class set of {‘c’, ‘b’, ‘a’}).

Since {‘c’, ‘b’, ‘a’} ⊆ {‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’}, our <div> will get this style.

Hmm, I feel a set theory post coming on.

The majority of our time as web developers is spent writing markup (xhtml and css). Because we are committed to building the most functional, usable, and accessible sites, we do our best to adhere to web standards. So, we often refer to the CSS 2.1 Specification, a 384-page document fully defining and explaining the many properties of standards-compliant CSS programming.

Now, this document is great, but it is still up to the browser and device creators to support all of the properties set forth in the specification. And, we know that certain properties just aren’t going work in certain browsers.

With great care, we learn the ins and outs of the specification and the idiosyncrasies of all popular web browsers, then write code accordingly. Of course, we still must diligently test and tweak our code and make sure that it does in fact look just as intended.

Then comes IE6 to ruin the day. IE6 is an out-dated piece of technology that just won’t die even though Microsoft released the next generation of Internet Explorer long ago. IE6 is the bouncer that throws you out of the club for no reason at all. You are being a respectful gentlemen, following all the rules then suddenly IE6 comes up behind you, grabs you by the collar, and tosses you out onto the street.

And we deal with this, we have a laundry list of IE6 workarounds that force it to act right. Throw in a little more tweaking and cleaning up of code and before long we have IE6 displaying our work as it should be displayed.

So, last night I was a bit distraught when we received an e-mail from a client with the following IE6 problem.

The list of videos on their site was displaying a bullet next to each video when it should not have been. The client sent a screenshot of the problem and luckily she was savvy enough to have the “About Internet Explorer” dialog open displaying the browser version detail. It was version 6.0.2900.5512.xpsp_sp3_gdr.080814-1236 to be exact.

Next, I opened up IE6 on our computer and I saw no bullet. So, I opened up the “About Internet Explorer” and found that we too were running version 6.0.2900.5512.xpsp_sp3_gdr.080814-1236.

Client IE6 View	dynamIt IE6 View

That’s not fair.

We work too hard to have IE6 render pages on a whim. How am I supposed to solve this when IE6 refuses to play nice?

Do all of us web developers a favor by finding one non-tech-savvy friend and assisting them in downloading Firefox or Opera.

At dynamIt we dropped HTML tables as a layout device long ago. It has been all CSS ever since. CSS for layout is really the way to go. It’s light, it’s flexible, it separates design from content making your site extensible.

I’ve written markup (XHTML/CSS) for dozens of sites now. And, as we build more and more sites my CSS style continues to evolve, or mature, if you will. But, CSS is a interesting topic, no matter how routine you think it is, there are always new tricks to discover.

I recently found a new one that I am pretty excited about. Certain elements have a block display meaning they appear with a line break before and after them (that is to say on a page they stack vertically one on top of another). Meanwhile, other elements display inline, meaning they appear within a line much like single letters within a sentence. Inline elements are great because they can appear next to each other and wrap to the next line, but they have certain drawbacks. For example, you cannot set a definite width or height for inline elements, nor can you give them margins.

But, I came across a different type of display. It is called inline-block. Just as you can imagine, it is the best of both worlds. Items will display as inline elements, but certain block properties are available to them. I jumped on to Google to learn more and found a very nice article on the topic at SitePoint.

I quickly noticed that there are two things (one good, one bad) that this article does not address.

First, the bad news, it is rather broken in Mozilla FireFox 2.x. If you have text in the -moz-inline-box <div> that is longer than the width of the <div> (something that is, by the way, a very common occurrence), it fails to wrap and spills outside the box. Luckily, the solution is quite simple. Just add a <div> with display: block and same width on the inside. The block-level div forces the text to wrap properly.

Second, the vertical-align CSS property actually works! Give the series of <div>’s set to inline-block a vertical alignment and they actually behave as you’d expect.

For all of you developers out these that think this sounds interesting, check out this quick example:


<style type="text/css">
.holder {
text-align: center;
width: 500px;
border: 2px solid #1C659C;
}
.category {
display: -moz-inline-box;
display: inline-block;
width: 90px;
margin: 5px;
border: 1px dotted #666666;
vertical-align: middle;
}
.category div {
width: 90px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.category {
display: inline;
}
</style>
<![endif]-->

<div class="holder">
<div class="category"><div>The quick brown fox</div></div>
<div class="category"><div>jumps over</div></div>
<div class="category"><div>the lazy dog</div></div>
</div>


This should produce the following output:

I’ll admit it, I often experience feelings of nostalgia. So, when I learned that Webmonkey was back, I was excited to say the least.

Droves of web knowledge do not just hit you suddenly, you have to start somewhere. You read a few tutorials, play around a bit, experiment here and there, use what you’ve learned, and then read some more to expand your skill set. For me, that starting place was always Webmonkey.com. HTML, CSS, JavaScript, Flash, PHP, database design, you name it, all of it came to me first through reading an article on Webmonkey.

I distinctly remember writing my very first database with ASP and MS Access (something I’ve never done since) because Webmonkey used these technologies in a tutorial titled Your First Database. I also remember tinkering around in Flash 5 after reading a Webmonkey tutorial on ActionScript. All of my web knowledge, which is now quite expansive, was built upon my explorations around Webmonkey.

Then, it was gone. Webmonkey let it be known that they would no longer add new articles. Sure, it stayed online frozen in its existing state, but content ceased being updated. I was cutoff from this ever-expanding knowledge base.

I was forced to find new resources to learn about new web technologies. Over the years I gathered the following sites to fill the knowledge void left by absence of Webmonkey.

General Resources
W3 Schools (www.w3schools.com)
Mozilla Developer Center (developer.mozilla.org)
SitePoint (www.sitepoint.com)

CSS
W3C CSS 2.1 Specification (www.w3.org)

JavaScript/DOM
JavaScript Kit (www.javascriptkit.com)
QuirksMode (www.quirksmode.org)
Gecko DOM Reference (www.mozilla.org)

PHP & mySQL
PHP Builder (www.phpbuilder.com)
PHP.net (www.php.net)

These sites did their job well, especially W3Schools–an excellent resource, especially for beginners, which became my new go-to. I will undoubtedly continue to consult all of these resources, but it is with great pleasure that I add Webmonkey back to the list.

In browsing the new Webmonkey I see many things I like, both old and new. Some of the original articles, at least those that are not obsolete in their content, are still intact. Also, it is interesting to see the topics that were not present on the old Webmonkey but today are at the forefront of web. For example, there is now User Experience Design, a discipline that has existed but only in today’s web community receives the attention that is deserves. Then there is Platforms and APIs, something relatively new that came in with many popular web 2.0 apps.

Plus, it appears as if this new Webmonkey is a WIKI. Perhaps, I now have an outlet to give back to the community, and specifically the site, which gave me so much.