February 06, 2005

Lists and Hypertext Links in CSS

A great resource for learning how to create a wide variety of CSS based menu systems is the well known Listomatic demonstrations of CSS and Links, which has been updated since I last visited. There are many authors who contribute to the various menu systems on Listomatic. Russ Weakley author of the site was challenged by an email from a user to create a mock-up of a tv remote control using an unordered list for the construction. His detailed response goes beyond the request and adds to the repertoire of solutions for links, as well as opens up one's thinking about just how far you can go with a little creativity!
In case you have not yet discovered some interesting companion sites to Listomatic, try the automated version at Accessify.com and Dan Burn's Layout-o-matic site. Hopefully, students will use these sites for learning and not being lazy!

CSS and Browser Bugs

Any time I mention to a former student about going deeper into CSS, I get the old response that they don't want to deal with all the browser issues. Unfortunately the way the world is working these days there will probably always be "browser issues" for web developers. My attitude is that I want to use XHTML, CSS, XML, and JavaScript the way it is intended to be used, irregardless of some manufacturer who has decided otherwise, or simply can't get their act together. Many developers are quite comfortable getting around the various bugs and still manage to produce outstanding web sites that are well formed and validitated for CSS, XHTML, and Accessibility.
So where do you turn to find out how to manage the problems. To begin with, always design your sites in the most compliant browsers, which at this time include Firefox/Mozilla, Safari 1.1, and Opera. Then when something doesn't work correctly in IE or other browsers, find out who has solved that problem and what the work around is.
Peter-Paul Koch has released Bug Report, a welcome and great resource for finding solutions to the problems you experience with specific browsers. The report is updated by professional developers and your participation will be welcome.
Additional sites that also provide solutions and reports of bugs include:
Position is Everything, CSS Bugs in IE5.x from Mac Edition, and the resourceful css-discuss wiki, the online part of the css-discussion listserv.
Dealing with browser bugs is not the most exciting part of the job, but creating web sites without CSS/XHTML is a much worse situation!

Proper use of the "alt" attribute

Sometimes we need to fine tune our understanding of XHTML concepts. The proper use of the "alt" attribute and the "title" attribute are both one of those fuzzy areas that could use more attention. In my classes I always emphasize the importance of the "alt" attribute with images to assist those users of your site who cannnot see the graphics on your site for a variety of reasons including users using screenreaders to "see" the screen. Roger Johansson, of 456 Berea Street, has written a brief discussion of this feature which points out when to use "alt" text and when it is not appropriate also. He suggests not using alt text when you actually want a tool tip (small pop up text as used with the "title" attribute). He goes on to discuss the use of the "title" attribute, of which there is little literature as to the semantic use of it in our documents. Additional references to this discussion from Simon Willison's Writing good ALT text and Ian Hickson's Mini FAQ About the Alternate Text of Images.