office Standard 2007 key A List Apart Articles P

[buisness0243]

It can be time consuming to create net forms the two pretty and available. In particular, laying out varieties exactly where the sort label and input are horizontally adjacent, as within the image under, is usually a real obstacle. We made use of to work with tables, which worked nicely within this scenario—but kinds don’t constitute tabular data, so it’s a semantic faux pas. I’ve tried to make a form-styling solution that is both equally accessible and portable (inside sense that I can move the code from one project to the next). Floats have often provided a solution to my problem, but given the complexity of some layouts and the numerous float bugs associated with On-line Explorer, it’s not always easy to reuse a float solution. I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML type, would deliver the basis of the required layout. So here it is—my attempt at portable, accessible kinds. Marking up the kind The most important part of a type is the HTML we use to build it. Fortunately, HTML gives us a nice assortment of tags to build our types in an accessible way. These are fieldset, legend, and label. If you are unfamiliar with these tags, here’s a brief overview: fieldset and legend The fieldset element allows us to group type controls into logical, related “chunks.” legend then allows us to add a caption to that fieldset, which helps users understand the context of the type controls contained inside of that fieldset. In some screen readers, the legend is associated with every form control in a fieldset and is read out after every single tab of the keyboard, so that a specific control can always be referenced back to its legend. label The label element is utilized to associate information with a specific form control, whilst also enforcing a code-level association between kind control information and the control element itself. Let’s look at a simple fieldset example (line wraps marked » -Ed.): <fieldset> <legend>Delivery Details<legend> <ol> <li> <label for="name">Name<em>*<em><label> <input id="name" > <li> <li> <label for="address1">Address<em>*<em><label> <input id="address1" > <li> <li> <label for="address2">Address 2<label> <input id="address2" > <li> <li> <label for="town-city">TownCity<label> <input id="town-city" > <li> <li> <label for="county">County<em>*<em><label> <input id="county" > <li> <li> <label for="postcode">Postcode<em>*<em><label> <input id="postcode" > <li> <li> <fieldset> <legend>Is this address also your invoice »
address?<em>*<em><legend> <label><input type="radio" »
name="invoice-address" > Yes<label> <label><input type="radio" »
name="invoice-address" > No<label> <fieldset> <li> <ol>
<fieldset> The HTML is fairly simple, but you will notice a few things within the structure. I’m using an ordered list (ol) inside of the main fieldset. I’m doing this for two reasons: I can use each and every list item (li) as a container for every row in the type, which is handy for styling. It is, in my opinion, semantically appropriate (i.e. a list of sort controls in some sort of logical order). Additionally, the ol provides additional information for some screen readers that announce the number of list-items when they first encounter the list. Fields that have two or more control options are nested inside an additional fieldset. This logically groups the control options,office 2007 Pro Plus keygen, as discussed above, and the legend acts as a caption for each option within (in our case, radio inputs). Each option is then wrapped inside its own label tag. This is the most accessible approach, and definitely aids users of assistive technologies. Styling the sort The styling of the type is the fun part. My aim was to supply a main kinds style sheet that may be imported to give a type the basic structural styling we need. Here it is. type.cmxform fieldset margin-bottom: 10px;
kind.cmxform legend padding: 0 2px; font-weight: bold;
type.cmxform label display: inline-block; line-height: 1.8; vertical-align: top;
kind.cmxform fieldset ol margin: 0; padding: 0;
sort.cmxform fieldset li list-style: none; padding: 5px; margin: 0;
form.cmxform fieldset fieldset border: none; margin: 3px 0 0;
form.cmxform fieldset fieldset legend padding: 0 0 5px; font-weight: normal;
kind.cmxform fieldset fieldset label display: block; width: auto;
sort.cmxform em font-weight: bold; font-style: normal; color: #f00;
sort.cmxform label width: 120px; * Width of labels *
sort.cmxform fieldset fieldset label margin-left: 123px; * Width plus 3 (html space) * As you can see, the styles are quite basic; those with a keen eye will notice the display property set to “inline-block” on the labels. If you are unfamiliar with “inline-block,” here’s an explanation in the W3C blog: This value causes an element to create a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. This is the magic, and the good news is that it works in World-wide-web Explorer for each Windows and Mac. If you are tempted to use this value in other scenarios, I must point out that in On-line Explorer for Windows, it only works on elements that have a default display of “inline,” which a label does. The bad news, however, is that Mozilla-based browsers (Firefox, Netscape, etc.) do not directly support this property, but we can fix it, and I’ll come to that shortly. So, these are the core styles required to give the type its most basic appearance. I wanted to build a style sheet that contains basic kind styles that act as part of a larger library of reusable style rules. In theory, they would not need to be modified by an author, but could simply be included in any web site to set the baseline rules. (This core set of type styles is the first part of my vision for creating a library of style sheets that handle the common CSS conundrums.) The best part is that authors who want to modify something like the width of the label elements, can easily overwrite the default further down during the cascade or with a more specific selector. And to truly customize just about every sort, you can add your own styles in a separate style sheet like I have done with this “pretty” kind example. Bugs As I mentioned above, users of Mozilla-based browsers won’t see what all the fuss is about. Unfortunately,windows 7 home basic activation key, Mozilla does not currently support the “inline-block” display variety, which is actually a bit of a difficulty. However, Mozilla has a browser-specific display value, “-moz-inline-box”, which acts, for the most part, like “inline-block.” The challenge with this particular value is that if you have a honestly long label, the text disappears below the adjacent form control. Text does not wrap inside an element displayed as “-moz-inline-box.” But if we place the label text within an element displayed as “block” within the “-moz-inline-box” element and give it a width, it behaves as it should. Adding all that by hand into the document is going to mess up our nice, lean, mean HTML —plus we may possibly decide to change the sort layout later,windows 7 upgrade key, and who wants the extra markup in there? Luckily, there’s an easy way to fix this using JavaScript and the DOM (line wraps marked » -Ed.): if( document.addEventListener ) »
document.addEventListener( 'DOMContentLoaded', cmxform, false); function cmxform(){ Hide forms $( 'form.cmxform' ).hide().end(); Processing $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each( function( i )var labelContent = this.innerHTML; var labelWidth = document.defaultView. »
getComputedStyle( this, '' ).getPropertyValue( 'width' ); var labelSpan = document.createElement( 'span' ); labelSpan.style.display = 'block'; labelSpan.style.width = labelWidth; labelSpan.innerHTML = labelContent; this.style.display = '-moz-inline-box'; this.innerHTML = null; this.appendChild( labelSpan ); ).end(); Show forms $( 'form.cmxform' ).show().end();
} The JavaScript uses the wonderful JQuery library (which also, obviously, needs to be included) to simplify the processing. I will briefly explain how this works. Firstly, I hide any type that uses the “cmxform” class. Hide types
$( 'form.cmxform' ).hide().end(); We do this because otherwise the user would possibly see the sort “fixing” itself as it renders during the page, which can look a bit strange. Secondly, using the JQuery methods and a combination of CSS selectors and XPath, I collect all labels that are a direct descendant of an li,office Pro Plus 2007, that do not have a class of “nocmx”. $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each and every( function( i ){
... The reason I use the “nocmx” filter is so that users can add that class to labels that require a different styling. This can be very useful, as I have discovered from using this method for a while. Then, for each collected label, a span is created inside to fix the “inline-block” problem. $( 'form.cmxform' ).find( 'lilabel' ).not( '.nocmx' ) »
.each( function( i )... Finally, all the originally hidden varieties are created visible again, and everything looks sweet. Show kinds
$( 'form.cmxform' ).show().end(); Note: I’m using the Mozilla-specific document.addEventListener() method to launch the script. This genuinely is ideal, as it only runs for Mozilla (which is all we need) and it launches as soon as the DOM has been loaded. Although JavaScript might not appear the most elegant solution, it is completely unobtrusive and, when JavaScript is disabled, the sort degrades gracefully. There’s also a small amount of tidying up to do in On-line Explorer though. For Windows, we need to tweak the positioning of the legend@s so they line up neatly. This could very well be achieved by giving the @legend a negative leftright margin as shown under: kind.cmxform legend padding: 0 2px; font-weight: bold; _margin: 0 -7px; * IE Win * For IE5Mac, we need to tweak the display of the legend, to fix an odd display bug, by adding the following: *\**
sort.cmxform legend display: inline-block;
* IE Mac legend fix * This rule allows us to supply a rule particularly to Internet Explorer for Mac. If you are uncomfortable in using browser specific rules during this way, feel free to remove them. You could add these fixes to browser-specific style sheets, but I wanted this technique to be as portable as possible, so all the styles are in one spot. Finishing up We’re done. All you need to do is include the relevant “cmxform” files and then add the class of “cmxform” to any form you need to. (If you are wondering in which the name “cmxform” came from, it’s there because I developed this technique even when working for Cimex Media in London.) Enjoy! Note: This sort technique has been tested with Safari 2.0.3, Firefox 1.5, Opera 8.5, Internet Explorer 7b2 , World-wide-web Explorer 6, On-line Explorer 5 (Windows), Web-based Explorer 5.2 (Macintosh),office Standard 2007 key, Netscape 7.2 (Macintosh), and Netscape 8.1 (Windows).