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.

More on JavaScript as Behavior

I have reported a new direction in the use of JavaScript in the past, and a new article by Peter-Paul Koch reminds me to review the sources of information and share with students and faculty. Koch’s newest article, JavaScript Triggers, is located in Zeldman’s A-List-Apart: http://www.alistapart.com/articles/scripttriggers/. He discusses the strict separation of structure, presentation, and behavior in semantic web site development, and gives examples of how he suggests using the “id” attribute as a JavaScript trigger, rather than dumping loads of JavaScript into the structure of an XHTML document. I am also adding a list of articles that discuss this direction in the use of JavaScript now that CSS has taken over some of the functioning of JavaScript. The direction is to use JavaScript to manipulate CSS objects, among other behavioral functions. These articles are the only references I have found that speak to these issues. I would appreciate anyone adding to this list if you have read of this type of application and it is not listed here.

Separating behavior and structure, by Peter-Paul Kock http://www.digital-web.com/columns/keepitsimple/

separating_behavior_and_structure.shtml

Separating Behavior and Presentation, by Peter-Paul Koch

http://www.digital-web.com/articles/

separating_behavior_and_presentation/



The Behavior Layer, Peter-Paul Koch

http://digital-web.com/columns/keepitsimple/

keepitsimple_2004-01.shtml

Enhancing Structural Markup with JavaScript, Simon Willison

http://www.sitepoint.com/print/structural-markup-javascript

Presentational JavaScript, Bobby Vandersluis

http://www.bobbyvandersluis.com/articles/presentationaljavascript.php



JavaScript navigation – cleaner, not meaner, codepo8 (evolt)

http://www.evolt.org/article/Javascript_navigation_cleaner_not_meaner/

17/60273/index.html?format=print

Introduction to Events, Peter-Paul Koch

http://www.quirksmode.org/js/introevents.html



Some Additional Articles related to JavaScript issues:

For other articles about JavaScript from Peter-Paul Koch, go to his site and select the link to JavaScript

http://www.quirksmode.org

Validating a Custom DTD, by J. David Eisenberg

http://www.alistapart.com/articles/customdtd/

JavaScript: How Did We Get Here?, by Steve Champeon

http://www.hesketh.com/publications/javascript_history.html

JavaScript: Why You Don’t Know More About It, by Steve Champeon

http://www.hesketh.com/publications/

javascript_why_you_dont_know_more.html

Working With JavaScript: Introduction, by Steve Champeon

http://www.hesketh.com/publications/javascript_introduction.html



Modifying Styles, Apple Internet Developer Site

http://developer.apple.com/internet/webcontent/styles.html