Though there is a CSS property vertical-align, it doesn’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this problem:

Plain and simple, the CSS veritical-align property really doesn’t work like it should. (Maybe it works to the spec, but it’s not intuitive.) It does not work like a <td>’s valign="middle" attribute, and odds are that’s the behavior you’re trying to emulate when you’re using vertical-align.

Aligning an element vertically within a container of a known height is pretty simple. You can:

• Give the to-be-aligned element margin-top,
• Give padding-top to the container, an sub-container in the larger container, or the to-be-aligned element,
• Use position:relative or position:absolute to slide the aligned element into its desired position.

All this is great. But, what happens when you’re trying to vertical-align against something with a dynamic height? Using vertical-align rarely works as planned, and won’t work if you’re using a block-level element. What do you do?

Vertical Centering in CSS is a solid technique that lets vertical alignment work like it should. I’ve got code using this method in production and, let me tell you, it works very well. Yes, it adds a little extra markup to your document and CSS, but it’s well worth it for the final effect: a vertically centered element without the usual headache. Follow that link and align freely!

technorati tags:vertical-align, css, html

Here’s a little CSS tip that a lot of people are unaware of: you can give an element as many CSS classes as you’d like by adding them to that element’s class attribute separated by spaces.

This is how it looks: <div class="big orange square">. Your div now belongs to three classes: big, orange, and square.

What about adding classes with a script? Just use element.className += ” classname” to add them (that’s space + classname). To subtract? Set element.className equal to a string without that element. You can do this by splicing that unwanted class out of a string, using a regular expression to filter it away, or using any other string manipulation. Just set element.className = to your new string. Voila.

technorati tags:css, classes, html, dhtml, javascript

The final release of IE7 is fast approaching … and I mean really fast … and will be delivered to customers via Automatic Updates a few weeks after it’s available for download. We want to ensure that you are ready and the information below will help get you there.

IEBlog : IE7 Is Coming This Month…Are you Ready?. I hope that IE7 site-wide audit I’ve been pushing for at work gets bumped up super-high priority…

There’s also a lot of complaints about MS pushing out this update to everyone. I, for one, am actually in favor of it. Why? Because it means there will be a lot more uniform distribution of browsers: we won’t have
to worry designing and developring for a staggering amount of stragglers that never upgrade, because they’ll all be pushed to the new product at one. That said, I’ll echo the words of one commentor on the MS blog I’m citing: my job is about to get harder.

technorati tags:IE7, cross-browser, web development

I’ve been using Dojo’s FisheyeList widget (think of Mac OSX’s dock) in an internal app I’ve been
building for TheLadders.com. It’s a totally killer piece of script,
and works very well right out of the box. However, there’s not much (read: there’s no) documentation on using it. So, in the hope of
helping someone out, here’s what I’ve figured out so far. (I’m working on dojo version 0.31, and by no means is this list exhaustive).

• Using dynamic images: You can add list items (dojo-FisheyeListItems, to be exact) at run-time with JavaScript. Just document.write them into your dojo-FisheyeList container, and the widget will pick them up. This allows you to grab images dynamically with another script, and inject them into your list.
• What do the properties of the dojo-FisheyeList container actually do? This:
  • dojo:itemWidth - The width of the item in the "dock" before mouseover (in pixels).
  • dojo:itemHeight - The height of the item in the dock before mouseover (in pixels).
  • dojo:itemMaxWidth - The biggest possible width your image can have on full mouseover (in pixels).
  • dojo:itemMaxHeight - The biggest possible height your image can have on full mouseover (in pixels).
  • dojo:orientation - Either "horizontal" or "vertical".
  • dojo:effectUnits - The distance your mouse can be from the widget before it activates. Lower values mean your mouse must get closer to
    the widget strip before the icons puff up; higher values mean the widget activates at greater distances. Decimal values are OK.
  • dojo:attachEdge - Specifies which section of an icon triggers the "puff" effect. Can be "top", "bottom",
    "left", "right", or "middle". "middle" creates a really strange effect.
  • dojo:labelEdge - Specifies where the image’s label displays. "top" and "bottom" are the only choices here. If you
    enter anything other than those two, the widget defaults to "top".
  • You don’t need to add a label to your images. If you don’t add the "caption" attribute to a dojo-FisheyeListItem,
    the caption won’t display for that item.
  • dojo:enableCrappySvgSupport - I tried toggling this between quot;true" and "false", but really noticed no difference.
    I’ve been testing in IE 6.0 and FireFox 1.5, so perhaps this does something in an older (or different) browser?

In all, this widget gives you a great effect with a very quick installation. Does anyone else have any tips for using the FisheyeList?

technorati tags:dojo, javascript, dojo FisheyeList, dock, css, web development, dojo toolkit

Here’s something that’s a tad bit lighter than usual. My personal favorite:

Perl
You shoot yourself in the foot, but nobody can understand how you did it. Six months later, neither can you.

technorati tags:nerd humor, programming languages

Blogged with Flock