breakthrough design

An amazing article written over at Yahoo on improving page load time, reducing server/page load, and essentially optimizing your website’s performance:

• Best Practices for Speeding Up Your Site

Problem

z-index is not performing properly in internet explorer, ie6, ie7, etc.

Don’t worry it’s not you, this is yet another bug in IE.  IE does not render z-index properly:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

Solutions/Workarounds

• Give the element (that should be behind) a z-index:-1 and position:relative
  
• Give the parent of the front element a higher z-index.
• Become a white water rafting tour guide.

This method has become our ‘gold standard’ for centering your sites, images, or anything directly in the center of the page (vertically and horizontally).  It’s easy to use, unobtrusive to your other page elements, requires only 3 lines of CSS and no javascript.  It’s almost like a CSS plugin of sorts.   The only downside is that 3 div elements are required, however, compared to all other solutions we’ve tested, this is minimal overhead, and worth the effort.    It’s built on Jakpsatweb’s method for Vertical Centering in CSS. Compatibility:

“The code below works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari. The page can be HTML or XHTML, standard or quirk mode.

Both examples don’t work in IE 5.2 for Mac. As I haven’t Mac, I can’t test it. Please let me know (dusan@pc-slany.cz) when you’d find any workaround.”

Vertical Centering Using CSS

1. Add 3 Classes to Your Stylesheet

.ht1 {display: table; #position: relative; overflow: hidden;width:100%;height:100%}
.ht2 {#position: absolute;  #top: 50%;display: table-cell; vertical-align: middle;text-align:center;}
.ht3 {#position: relative;  #top: -50%;margin:0 auto 0 auto;border:1px solid green;width:300px;height:200px}

Update: To clear up some confusion – we’ve added the widths & heights as needed above.  We had left them out to allow you to customize your own layout, but this way everything is included, and you can change the widths & heights as needed for your installation.

2. Create 3 elements in your HTML

<div class="ht1">
    <div class="ht2">
        <div class="ht3"></div>
    </div>
</div>

Important to Note:

ht1 =Is the main container, this div will be 100% width & height in size, positioned absolutely to the top left.

ht2 = 2nd container needed for vertical centering & positioning.

ht3 = Container to center. This needs an exact px width & height.

3. Set the Height & Width of ‘ht3′ Element.

In order to allow for reusability, we haven’t given this element it’s height or width, you will need to do so.  In most cases you will give these elements multiple css classes, that second class is most likely where you will define your height and width.

Voila – vertical & horizontal centering using 3 css classes.  Kinda makes me feel like riverdancing.

We debated calling this the “Complete Idiot’s Guide to Section 508 Compliance” and to tell you the truth, we’re still leaning towards changing it.  In any case, for anyone tasked with creating a Section 508 Compliant website, you may first want to take a look at the Section 508 official site.  Much of our info here is shortened, and simplified from the Access Board‘s page.

Also, the rigidity of these standards seems fairly debatable, as the Section 508 website itself does not appear to be compliant: using images as labels for the “Site Layout Controls” without text equivalents??

*PLEASE NOTE: We do not assume any liability for the information presented here, and encourage you to do the research yourself.  We are not affiliated with the U.S. Government.

(a). Anything non-text (images, flash, etc) must have a text equivalent

For all images, flash, etc include descriptive ‘alt’ tags, or ‘longdesc’ tags – especially when images are used for direction.

(b). Multimedia (Video, Audio, Presentations, etc) must have text equivalent.

Multimedia presentations must be accompanied with appropriate captioning.

(c). Don’t use to color for anything important.

Don’t use color to delineate direction, functions, navigation, etc.  Imagine you are color blind and attempt to navigate your site.

(d). Don’t require a stylesheet.

A bit confusing, but basically allow the document to degrade gracefully if the css stylesheet is not present, and don’t require a particular stylesheet for navigation or viewing.  Allow users to change font sizes, etc with the browsers if need be.

(e). Provide text links for Server-side image maps.

Not to be confused with client-side image maps, server-side image maps can not be read by screen readers.  Image maps created in the webpage or “client-side” image maps are deemed as better alternatives as the links are freely accessible by screen readers.

If you must use server-side image maps, you must provide redundant text links in addition to the image map.  See the next item…

(f). If possible, client-side image maps must be used instead of server-side maps.

The only case where client-side image maps couldn’t be used is when it is physically impossible – or the clickable regions cannot be defined using the available client-side geometric shapes.

(g). Row and column headers must be defined for tables.

(h). Data and header cells must be associated in tables with more than 2 rows or columns.

To accomplish both of these requirements, you need to use the ‘scope’ attribute within the <th> tags and within the first <td> element of each row.  For example:

<table>
<tr>
<th> </th>
<th scope="col" >Spring</th> <th scope="col" >Summer</th> <th scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr>
<tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td>
</tr>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td>
</tr>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td>
</tr>
</table>

Taken from the Access Board specs.

(i). Frames need descriptive useful titles.

Or you could simply not use frames and save yourself a million headaches right out of the gate.

(j). No screen flickering or blinking at ridiculous rates.

Specifically, the screen cannot flicker at a frequency greater than 2 and less than 55 Hz, so get out your flickerometer and then ask yourself where did I get this flickerometer and what store carries a flickerometer?

(k) No soup: Create a text-only page.

If you can’t adhere to everything here, you must create a text-only version of every page you are creating and it must be updated as your original is updated.  This might be achieved through the use of stylesheets if need be.

(l). Scripts can only be used to help, not depended on.

Javascript especially should be used to augment functionality – it cannot be used to dynamically display core navigation, buttons, etc.  All important links and text must be there on the page when it renders for the screen reader to traverse.  This is also important for Search Engine Optimization.

(m). Applets/Plugins must be linked.

Use of anything external must have appropriate download links.  (E.g. Flash, Acrobat PDFs, etc)

(n). Forms must have labels.

Make sure all elements on your form have properly assigned label tags (the label’s “for” attribute must be equal to the input’s “id”):

<label for=”first”>First Name:</label> <input type=”text” name=”firstname” id=”first” />

(o). Must have a link to “Skip Navigation”

To allow people with screen readers to jump past all repeated navigation links, you must add a link that jumps to the page body.  See the link at the top of the USDA‘s site.

(p). Alert user if timed response is required.

If for example, a page will expire for security reasons, it must display a prompt if that is the case.

More on Section 508 Compliance

• Section508.gov: Section 508 Standards
• W3C: Web Content Accessibility Guidelines
• ADA Compliance Guidelines

The following code will iterate all your checkbox elements (within the form you specify), and disable them all. Tested in ie and mozilla only.


function disableAllChecks(fmobj) {
for (var i=0;i var e = fmobj.elements[i];
if ( e.type=='checkbox' ) {
e.disabled = true;
}
}
}


If you want to check the checkboxes, change the red line to


e.checked = true;