Post Archive

› January 30, 2004

Section 508 at odds with Web-based apps using rich interactions?

OK, this is more a point to ponder and discuss than anything else. In a UE review today, I had a coworker ask how accessibility/Section 508 was being fully addressed in my HTML mockup. Sure, I had appropriately included alt tags where appropriate and similar practices. But where I always get tripped up on this one is I often employ Javascript to hide/show rows in tables or divs or maybe the table would dynamically generate new rows when a line item was added (document.write), etc. And we believe Section 508/screen readers would balk at this sort of thing.

So the question is how do you employ sophisticated user interactions that intend to present the most successful user experience while fully addressing Section 508 compliance?

view rest of article

› January 29, 2004

SSCrable - the man in blue

"I thought that maybe an XHTML/CSS Scrabble name converter would be more useful than using images, and so proceeded to open up TextPad to style some tiles. After making the board ... what the hell, I might as well just do the whole game."

The Man in Blue has created a full working game of solitaire Scrabble on a web page, no Java applets, no Flash. More details.

› January 28, 2004

Making Usenet Usable

Panic has released it's newest gem: Unison. Unison gives us an easy to use interface that anyone familiar with MT-Newswatcher will definitely appreciate. They also are providing their own usenet service.

from their press release...
Unison offers easy-to-navigate threaded discussions, the ability to ignore annoying posters, multiple signature management, Mail-like posting with spell checking and more. Check out their other great products, including Audion and Transmit.

› January 27, 2004

CSS Widgets

The CSS Zen Garden has been a fantastic resource for web designers and developers. Since it appeared, designers are realizing the power and control provided by CSS. However, the Garden is limited by the fact that its XHTML file contains mostly large text blocks and long navigational lists. What if it contained something like this?


<form id="showtimeForm" action="#">
<div id="formWrapper">
<label id="byLocation" for="locationInput">Showtimes by Location</label><input id="locationInput" type="text" /><input type="submit" value="Go!" />
<label id="byTitle" for="titleInput" >Showtimes by Title</label><input id="titleInput" type="text" /><input type="submit" value="Go!" />
</div>
</form>

I've been occasionally posting on Widgetopia for a few weeks now. While I was writing a post a while back, it occurred to me not many of the widgets featured on Widgetopia are designed using CSS. Like most large websites today, they're a combination of images, tables and bed and breakfast markup. This should be just as unacceptable as web page layouts that use use the same hodgepodge of tags.

We've started to convince designers that CSS is a powerful tool for laying out a web page. Now we need to convince designers that CSS is a powerful tool for laying out forms, navigation and other widgets. There have been several efforts along these lines scattered around the web, but I think it's time for a coordinated movement. It's time to see the beauty in CSS design for every page element, not just divs, headings and paragraphs. We've got the power, so let's use it to its fullest.

Myriad, Futura, and more

There is an interesting post by Jeff Croft on online typeface choices, and what we could possibly take advantage of.

I don't think I've ever entered in Myriad, or Century Gothic as a type choice before, but yet I think it's been installed on every machine I've ever worked on. Same goes with Futura, American Typewriter, and so on.

He did find some reference material that details the percentage of installation based on platform. (Windows, Mac, Unix) and the Visibone Font Survey.

Definition lists - misused or misunderstood?

A short article on definition lists - What are they? When are they appropriate? And how to style them to look like bordered boxes, tables, image galleries, calendar of events and more...

› January 23, 2004

IAEA Redesign

The very in-the-news International Atomic Energy Agency has redesigned its site using XHTML/CSS. It looks great and validates.

The previous site was a mixture of sliced tables, image-based information and mish-mashed server document types. Finding documents and information in it perfectly mirrored one of the agency's primary tasks of finding illegal weapons programs in a hostile environment. The new site, which seems to be completely re-architected, is easy to navigate, has clear, concise information and indexes much more easily than did the old.

I think that it is important that a UN agency should adhere to the W3C standards, and I hope that more international bodies, NGOs and governments will wake up to the cooperation inherent in standards-based layout, markup and design.

› January 22, 2004

Design Principles

Beautiful site with great linkage. It's the design principles site, a product of the rehthree web design group. Of course, you don't need to visit web-graphics to learn about nicely designed CSS sites anymore, your first stop should be (and there it is) css vault.

› January 21, 2004

Pure CSS Tooltips

Pure css tooltips, inspired by Eric Meyer's pure CSS popups. Works in IE5.5, Opera 7.11, Moz1.4. Pretty slick.

› January 20, 2004

CSS text shadow

In case:

  • you want to achieve a simple MOSe (so not Safari-only!) drop shadow effect on your webpage;
  • you don't want to insert any extra content or tags;
  • you want to do this with plain XHTML and CSS,

then this page might offer a solution. Works in Safari 1.1, Mozilla 1.+ and Opera 7.2 and gently serves IE a lo-fi solution, i.e. no drop shadows.

Note: a Google search done after I wrote the CSS mentioned above turned up this page, which describes a similar technique, but uses generated content :before the respective div.

A view on XML handling

There's been much discussion about XML handling lately, on Dive into Mark, Ongoing, Surfin' Safari and elsewhere. Some of the arguments I agree with, some not. This is my view on it.

view rest of article

› January 18, 2004

Limited child selector support in IE5.0/Win?

Trying to solve a CSS padding problem, I ran into this to me unknown (and maybe undocumented?) feature/bug: it seems like there is some rudimentary support for child selectors (>) in IE5.0/Win. Rudimentary, as you need to use a combination of id and child selectors to make it work.

body>div is ignored, #foo>#anotherfoo seems to be recognized - check this small test page for an example.

Update: actually, it seems like you can replace > with any other character: +, *, etc give exactly the same result. So we're talking about a bug.

› January 17, 2004

CSS Pencils

Christopher Hester from Design Detector has created an image file using nothing but CSS. You can find out more at his about page.

› January 13, 2004

Image Height and Width: depreciated?

Anne van Kesteren has started a very interesting conversation based around the simple question “Do we need the HEIGHT and WIDTH attributes for the IMG element”.

Colored boxes - one method of building full CSS layouts

Colored boxes is a step-by-step tutorial explaining one method that can be used to build a wide range of full-CSS layouts.

› January 12, 2004

Comments Down - Up

Hi, a really horrible person has pointed their comment spam bot this way, I'm cleaning up the mess and installing something to slow them down (not sure which yet). Meanwhile, commenting is disabled.

Update Ok, comments are back on now, thanks for your patience.

› January 11, 2004

Free web accessibility checking toolbar

Steven Faulkner, from the Accessible Information Solutions (AIS) team, has developed a free web accessibility checking toolbar for Internet Explorer.

› January 9, 2004

Is there such thing as an ancestor selector?

Hey, I have a question I need help with. Anyone out there who has information on this, please let me know.

So without going into much detail of why I need to do this, it would put my mind at ease if I knew for sure that such a thing does not exist or if it does... it is poorly supported. I need to find a method to do the opposite of descendants and children in CSS2.

view rest of article

Welcome George

The last post was made by our newest author George Penston. George is a contributing editor at creativepro.com and a Sr. UE Designer for Vignette. Welcome aboard George!

Safari 1.1.1 adds proper title support

Forgive me if others have noticed this already but updating to OS X 10.3.2 ups Safari to 1.1.1 (v100.1). I'm sure there's minor changes included in this update but the most notable for me is actual support for the title attribute. This attribute is often used to provide more information about a link or button in a form of a tool tip. And this is exactly how 1.1.1 presents them now.

view rest of article

› January 7, 2004

Call for help

Hi Web-Graphics readers. I've decided to post a call for help (see updates below, it's now fixed), I know many Web-Graphics authors and readers are as proficient (and much more) than I am with CSS layout. Right now I'm just slammed with work, and am having trouble finding the time to diagnose and fix a Win IE problem with this site's layout. I could use your help.

The problem: Windows IE is slipping the main content box below the floated nav bar on the right. This issue has been somewhat unpredictable, seems like the problem comes and goes (might be somehow related to current post content).

You can view the CSS files in use at /css/. Please feel free to comment to this post with ideas and suggestions, or if you prefer, you can use the contact form to email me personally. Thanks in advance for your time and help!

Update #1: Jurgen writes in that I need to widen the outer div. Which is of course correct, and I've done it. The problem (albeit a bit less urgent) is to remove that gap between the two columns. Each time I've tried to "fix" the problem, I manage to close the gap, but then the columns slip sometime later on, as if they were delicate. More help needed if anyone can spare the time!

Update #2: Paul comments to this post with a solid answer to the problem, which explains why it's been on/off - the "last 5" name and date floats were knocking heads and splitting the nav column too wide. The layout now looks correct in Win IE 6. Readers might notice a problem with the previous post's individual archive page, but I think that has something to do with the use of PRE and CODE, which is a separate issue.

Now that the main problem is fixed - great big thanks to those who wrote with suggestions so quickly!

› January 5, 2004

List Style Bullet Images

Robbert Broersma writes in to suggest a method of using list style bullet images for more advanced browsers that display them well (Not IE), and at the same time use background-image bullets for those that don't. A simple IE avoidance trick is all that's needed to provide both. I'm trying out this technique here at Web-Graphics (see bullets for list of items below). Here's the snippet of CSS that I'm using, the bottom two selectors are right from Robbert's email:

.nicelist {
    margin-left: 10px;
    padding-left: 0;
    list-style: none;
    }
	
.nicelist li {	
    padding-left: 14px;
    background-image: url(/img/bdot.gif);
    background-repeat: no-repeat;
    background-position: 0 6px;
    }

html[xmlns] .nicelist {
    padding-left: 2em;
    }

html[xmlns] .nicelist li {
    background: none; /* undo the background-image */
    list-style-image: url(/img/bdot.gif);
    padding: 0;
    }

From what I can tell it seems to work pretty well, anyone see any downfalls to using this method save a few extra lines of CSS? If you're interested, Robbert also has a number of interesting things to sort through, it's not yet organized into a website, but here's a list of stuff to be found there:

  • javascript for sorting tables: /sort-table/
  • javascript for alternate row colors: /alternate-row-color/
  • javascript basis for a XML-based chatsystem: /xml-chat-i/
  • the one _big_ thing: a remake of the large Dutch site tweakers.net in XHTML/CSS: /tweakers/frontpage.html (they currently use tons of nested tables)

This list of items found at Robbert's site, along with associated notes is quoted from an email he sent recently, and is used with his permission.

Non-link element hovering in MSIE

As noted at WASP and also promoted by Anne van Kesteren, Peter Nederlof came up with a JS method of cajoling Win IE into understanding how to hover elements (non-links that is) without cluttering up your XHTML. Then Ben Nolan pointed out that he came up with another solution around the same time, Ben's script is embedded right inside the CSS rather than being a separate file. Here are the links:

What is all this hubub about? Anytime we can get the most widely used web browser to do the W3 approved tricks that Mozilla, Safari, and other browsers already know by heart, everybody wins. In this case, we win the ability to trigger hover based style changes to any element in a webpage, powerful stuff. Thanks to Anne for the tip.

› January 3, 2004

All about Abbreviations, Acronyms and more.

Shirley Kaiser has a healthy roundup of tutorials, comments, examples, information, charts, ideas, and tools in regards to Abbreviations, Acronyms, and Shortened Words. A very useful collection of links indeed.

› January 2, 2004

Columns of text

I mention in my previous posts that I plan to make a liquid layout style option for Web-Graphics readers who prefer it. My plans to do so are based on recent discussions about liquid vs fixed layouts on various blogs, and the unquestionable existence of an audience who vocally prefer liquid layouts. Speaking for myself only: I very much dislike them, but that's not good enough reason to avoid offering the option.

I've noticed some new things open up in non-browser applications for those who prefer shorter line lengths. NetNewsWire's new widescreen view has made my syndication reading much more pleasant. And today (thanks Ti Kouka Too) I discovered Tofu for OS X, a text file reader that displays text in columns, left/right arrows make for easy-on-the-eyes reading. From the Tofu site:

In Tofu, text is arranged in columns, and each column is only as high as your window. So lines are nice and narrow, they don't move about vertically, plus your text is now in easy-to-digest chunks. You just scroll from column to column horizontally, and feel more in control.

All of this reminds me of what I like about the IHT article navigation, the code for which is available for use at smokinggun opencode library, which is no longer maintained, although the sg_layout code (which does the multi-column formatting tricks) was updated November for Safari I just noticed.

New Years Plans

2004 has arrived, and with it, I've been pondering various improvements to this site. Not really new year resolutions, rather just an inventory for pre-spring cleaning.

  • Change default site style to "centered"
  • Create non-FIR site style, if it looks good cross browser perhaps make it default?
  • Make fluid site style option
  • Improve CSS for 4- browsers
  • Make a nice print media stylesheet

Any other improvements you'd like to see done here? Let me know by leaving a comment