TW Blog :: Archives for May 2004

CSS Slide And Zoom

Relates to Accessibility and CSS Design

Since first discussing CSS Zoom as an alternative technique for accessible design earlier in the year, it has become an integral part of my design methodology. While this technique does come with disadvantages, especially related to images, I like the ability to enlarge an entire page to very high screen resolutions and similarly shrink the page to display satisfactorily in 640 x 480 dpi, without the worry of text or form fields breaking their parent containers.

In the latest incarnation of the Still Stoked website I have juxtaposed CSS Zoom with Doug Bowman's Sliding Doors technique to de-table-ise the three column design. The new layout relies on an extended banner graphic at the top of the page that can slide in out as the page is resized without affecting the look and feel of the page, while all the internal columns and text can grow and shrink freely. Enhanced accessibility and improved SEO were also high priorities for the site, so absolute positioning is implemented on the menu and side columns to allow the actual page content to appear first in the document structure.

The only complication that arose was incorporating a fixed width on the right hand column to ensure the background graphics remained locked together. A wrapper container is used to declare borders to house the left and right columns, where the left column is relative and, as just stated, the right column is fixed. But since the wrapper element contains floating elements (the internal columns) it must also have a width declaration. The problem is clear - how to combine a relative width and fixed border within the CSS Box Model.

The solution was to balance out the fixed width border of the wrapper container with a padding in its parent container as follows:

#cont {
  position:relative;
	/* [..snip..] */
	width:50em;
	padding-right:99px;
} 
#wrap {
	position:relative;
	border:1px solid #83acd6;
	border-width:0 99px 0 8em;
	width:42em;
	margin:0 -99px 1px 0;
	padding:0;
} 

So the relative components of #wrap (left border and width) balances out the width of #cont, while a right padding in #cont creates space for the fixed width right border in #wrap. For FireFox, Mozilla and Opera that seems to be job done, but the additional negative right margin is required on IE6. Not too much of a challenge! But of course playing with the Box Model always heralds danger when our least favourite family of browsers are booted up!

As it happens, in this instance, the hack required to appease the IE5.x family is simple - just declare the same width for both #cont and #wrap. After all, this solution is simply a case of balancing the equations and for these legacy browsers borders and padding are declared internally to the width of the container. So if the containers have the same width the browsers should be happy. I like to keep legacy hacks as far away from the main CSS file as possible, so these equal width declarations were placed in a file called using the mid pass filter (along with a few other Lost Child hacks for IE5.0).

This implementation of the CSS Slide and Zoom technique seems to work effectively across the entire range of PC browsers, and ICapture gave positive feedback for Safari. Please let me know in the comments of any glitches are observed on other browsers (IE5 for Mac perhaps?).

Posted on Sunday, May 09, 2004 at 15:53:29.