Web Design

Accessibility - Guidelines on alt texts in img elements

2006-12-27T19:22:00.000-08:00

Summary:

In HTML authoring, there are very good reasons to include an 'alt' attribute into every 'img' element. The purpose is to specify a textual replacement for the image, to be displayed or otherwise used in place of the image. Thus, the prime rule is: Consider what the page looks like or sounds like when images are not shown. Then, write for each image an 'alt' text that best works as a replacement. This document also gives more specific suggestions for simple, common situations, and some uncommon too. For content-rich images, it recommends explicit links to textual alternatives.

Originally written probably 1998-09, with the title Simple guidelines on using ALT texts in IMG elements.
This page belongs to section Web authoring and surfing of the free information site IT and communication by Jukka "Yucca" Korpela.

Usability - A blog about Card Sorting

2006-11-02T03:50:00.000-08:00

Donna Maurer is an expert on the topic of card sorting. She has a very nice and practical approach to card sorting. She maintains an up to date blog on the topic, the best resource I have seen...

Card Sorting Blog

XHTML - The Four Essentials of Modern Web Design

2006-10-30T01:37:00.000-08:00

The four essential practices focused are:

1. Valid code (standards compliance)

2. Accessible code

3. Semantically correct code

4. Separation of content and presentation

read on...

IE7 - Details on CSS changes

2006-09-25T21:39:00.000-07:00

Details on CSS changes in IE7

List of bugs fixed (mentioned in positioniseverything.net):

Other bugs fixed:

Overflow now works correctly! (That means boxes do not automatically grow any more.)
Parser bugs: * html, _property and /**/ comment bug
Select control: CSS style-able and not always on top
Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
Addressed many relative positioning issues
Addressed many absolute positioned issues
% calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
<?xml> prolog no longer causes quirks mode
HTML element truly independent of the Body (now gets its own width, height etc.)
1 px dotted borders no longer render as dashed
Bottom margin bug on hover does not collapse margins
Several negative margin issues fixed
Recalc issues including relative positioning and/or negative margins are fixed now
CLSID attribute of <object> tag no longer limited to 128 characters
:first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
Descendant selector now works properly for grand children when combined with other selectors
First-line and first-letter now applies when there is no space between word :first-line and opening brace {
Pseudo-classes now are working as expected if selector is excluded
The :link selector works now for anchor tag with href set to bookmark
Addressed !important issues
PositionIsEverything piefecta-rigid.htm now works
List-item whitespace bug fixed
Fixed Absolutely Buggy II
Absolute positioned elements now use always correct containing block for positioning and size information
Nested block elements now respect all overflow declarations (hidden, scroll, etc)
Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
<a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
We no longer lose the image aspect ratio on refresh
Cleaned up our ident parsing according to CSS2.1 rules
Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
And many more

User Experience Forums

2006-08-09T22:34:00.000-07:00

UX Forums - launched for Usability and User Interface Design Professionals around the globe - For discussions, Knowledge Transfer, Problem Solving. etc.

contains the following discussion boards:
Usability & HCI Stuff
Quality in Usability
User Interface Issues
HTML, DHTML, JS Issues
How's My Site?
General Questions / Job Postings / Conferences
Web Hosting & Domain Names
Resources

Usability: Heuristic Evaluation Primer

2006-08-08T05:31:00.000-07:00

Heuristic Evaluation

containing...
- Jakob Nielsen's 10 Heuristics
- Tognazzini's First Principles

and many more resources for reference.

Rock Solid CSS Layouts

2006-04-26T03:38:00.000-07:00

This chapter is excerpted from SitePoint's HTML Utopia: Designing Without Tables Using CSS, Second Edition, which provides a complete introduction to CSS and shows you how to build rock-solid CSS-based web sites from scratch.

Rock Solid CSS Layouts [CSS Tutorials]

Pages » 1 2 3 4 5 6 7 8

User-Centered Design principles

2006-03-29T21:43:00.000-08:00

Meeting the ease of use challenge is largely a matter of adhering to the following principles. For each principle, the goal is to involve users -- to ask the right people the right questions. Putting yourself in their shoes is a sure way to put your product at the front of the pack.

1. Set business goals. Determining the target market, intended users, and primary competition is central to all design and user participation.

2. Understand users. A commitment to understand and involve the intended user is essential to the design process. If you want a user to understand your product, you must first understand the user.

3. Assess competitiveness. Superior design requires ongoing awareness of the competition and its customers. Once you understand your users' tasks, you must test those same tasks against competitive alternatives and compare their results with yours.

4. Design the total user experience. Everything a user sees and touches is designed together by a multidisciplinary team. This includes the way a product is advertised, ordered, bought, packaged, maintained, installed, administered, documented, upgraded and supported.

5. Evaluate designs. User feedback is gathered early and often, using prototypes of widely ranging fidelity, and this feedback drives product design and development.

6. Manage by continual user observation. Throughout the life of the product, continue to monitor and listen to your users, and let their feedback inform your responses to market changes and competitive activity.

Courtesy: IBM - Ease of Use - UCD

IBM User Engineering

2006-03-29T21:11:00.000-08:00

User Engineering (UE) is a significant evolutionary advancement in the process of developing offerings that satisfy and delight users, as well as the stakeholders who invest in bringing them to market.

It requires an understanding of value propositions—the values that users seek, how an offering will provide those values, and the values sought by the business providing it. The objective is a balanced design that provides value for the business, stakeholders, and users. UE is based on delivering this measurable value to each of them.

This section of the site provides a comprehensive reference source on the User Engineering process pioneered by IBM. It builds on the well-established User-Centered Design (UCD) process with the overall objective of delivering maximum value to the Customer/User and Supplier.

Introduction
User Engineering is about satisfying users with all aspects of an offering .

Principles
User Engineering is based on principles that govern its structure and practice.

Role by phase
The linkages between roles , phases , activities , work products and measures.

Phases
The design process has discrete phases where specific activities are performed.

Roles
A set of roles , with specific skills, must be staffed to perform User Engineering .

Activities
Activities are a set of actions performed by one or more roles , resulting in work products .

Work products
Roles produce work products during each phase of the process.

Methods
Methods provide proven techniques to help perform activities .

Measures
Measures are taken at each phase to ensure project goals are achieved.

Glossary
List of special words or phrases (terms) used throughout User Engineering .

User-Centered Design
Some of the core elements of User Engineering are direct extensions of the well-established User-Centered Design process.

IBM Web design guidelines

2006-03-29T20:52:00.000-08:00

This information is most valuable for novice and intermediate level Web designers, but contains tips and other information that may be useful to more experienced designers.

1. Introduction Clarifying how to use these guidelines.

2. Planning Getting started on a Web design project.
2.1. User analysis Eliciting initial input from users.
2.2. Competitive and market analysis Finding a niche in the market.
2.3. Strategy Determining the detailed plan for meeting your goals.
2.4. Content Establishing goals and an initial plan for content.
2.5. Dev tools and technology Learning about the technology options.
2.6. Schedule of time and resources Creating a Web design project plan.

3. Design Creating the framework for the site.
3.1. Structure Making it easy for users to find what they need.
3.2. Navigation Making sure users can move around in the site easily.
3.3. Text Designing text that is easy to scan and read.
3.4. Visual layout and elements Page layouts meeting users' needs.
3.5. Media Using animation and other media effectively.

4. Production Building all the pieces.
4.1. Preparation Establishing conventions for file management.
4.2. Browser compatibility Supporting different browsers.
4.3. Creating images Images to meet performance requirements.
4.4. Cascading style sheets Making good use of CSS.
4.5. Final testing Ensuring the site is ready for publish.
4.6. Rollout Publishing the site.

5. Maintenance Make it a site worth coming back to.
5.1. Administration Keeping your site healthy and vital.
5.2. Advertising your site Your web site gets deserved attention.

6. e-commerce topics Selling goods and services online.
6.1. Customer support Supporting before, during, and after purchase.
6.2. Trust Establishing trustworthiness.
6.3. Product navigation Enabling users to browse products easily.
6.4. Product information Providing product info that users need.
6.5. Purchase transaction Easy means to purchase products.

7. Bibliography Research cited in these guidelines.

Usability Testing Mistakes

2006-03-28T21:26:00.000-08:00

#1: Do You Know Why You're Testing?
#2: Not Bringing the Team Together
#3: Not Recruiting the Right Participants
#4: Not Designing the Right Tasks
#5: Not Facilitating the Test Effectively
#6: Not Planning How You'll Disseminate the Results
#7: Not Iterating to Test Potential Solutions

Jared M. Spool writes for uie.com:
Seven Common Usability Testing Mistakes

Top 10 Usability Blunders

2006-03-28T21:22:00.000-08:00

Blunders Of The Big Players:

1. No Search Function (Guilty party: NBA)
2. Massive Download Time (Guilty party: ESPN)
3. Non-scannable Text (Guilty party: Boeing)
4. Unclear Link Text (Guilty party: Real Player)
5. Poor 404 Error Page (Guilty party: Monster)
6. Visited Links Not Shown (Guilty party: About)
7. Frames Used (Guilty party: Ocado)
8. Links Point to the Current Page (Guilty party: Ford)
9. Important information contained in images (Guilty party: AOL)
10. Unique Scrolling System (Guilty party: BMW)

Trenton Moss writes for sitepoint.com:
Top 10 Usability Blunders of the Big Players

Making Poweful Personas

2006-03-28T21:06:00.000-08:00

Personas ought to be one of the defining techniques in user-focused design. Lots of professionals create them, yet too often the personas end up being too vague to guide a product’s focus.

They often lack the detail to be useful in guiding low-level design trade-offs. And, as typically done, personas have been too narrowly focused. They often aren’t helpful in identifying the information a user needs or creates.

After gathering information, George Olsen prioritizes personas into the following types:

* Focal
* Secondary
* Unimportant
* Affected
* Exclusionary
* Stakeholders

Read more about:
Making Personas More Powerful: Details to Drive Strategic and Tactical Design

R.I.P. WYSIWYG

2006-03-28T20:47:00.000-08:00

Macintosh-style interaction design has reached its limits. A new paradigm, called results-oriented UI, might well be the way to empower users in the future

Displaying commands in menus, toolbars, and dialog boxes works with a limited number of elements. But Microsoft Word 2003 has 1,500 commands, and users typically have no clue where to find most of them.

Another WYSIWYG downside is that it forces too much manual labor on users and requires a stretch of imagination to envision results in advance. Yes, you can gradually massage your work into the shape you desire, one modification at a time, and visually confirm progress as you go. But you have to make each modification yourself, at the cost of many a mouse click.

Even worse, you begin with a blank screen and must build up to your goal one step at a time. Although Michelangelo might readily see a statue hidden within an uncarved marble block, such a feat is considerably more taxing for the average person.

Jakob Nielsen writes:
R.I.P. WYSIWYG

CSS Background Position Bug

2006-03-28T20:19:00.000-08:00

A close examination of different browsers will show that each has a unique pattern to their combined centering displays as the window width is varied.

IE win is the one that has the problem when both the test box and the background image are the same "even" pixel width.

But if both are an "odd" width then it is Firefox that gets it wrong!

Opera only shows errors when the BG and test box are opposite, one being even and the other odd.

There is no combination of odd/even widths on background images and test boxes that will behave identically in all browsers.

Well, check the details here:
IE Background Positioning Bug - An explaination and a fix

CSS Templates and Concepts

2006-03-28T19:45:00.000-08:00

CSS Templates and Concepts

CSS Templates List

CSS Basic Concepts:

#01 CSS History

#02 CSS and XHTML

#03 Document types

#04 Selectors

#05 Inheritance

#06 embed CSS

#07 Fonts

#08 Box Model

#09 Background Images

#10 iFrames

#11 Navigation menus

#12 Accessibility/Display Problems

#13 Print CSS

#14 Cursors

#15 CSS3, the FUTURE

CSS Rounded Corner - Slide Box

2006-03-27T20:07:00.000-08:00

Sliding Doors Box– Rounded Corners
- A Simple, Semantically Correct CSS Box with Clean Code by Ryan Thrash

The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup and to make sure they could resize while keeping their backgrounds intact.

CSS Rounded Corner - Slide Box

Simplified task analysis - 6steps

2006-03-27T19:43:00.000-08:00

Indi Young of Adaptive Path has spend a lot of time helping clients conduct task analysis to form mental-model diagrams. When teams first start analyzing the interview transcripts they’ve collected, they often run into a confidence issue. “How will we know if we get the task groups right?”

This question usually arises because the team doesn’t have the kind of details it needs to identify clear tasks. The problem isn’t in sorting; it’s in the data-gathering stage. If interviews don’t provide details, task sorting becomes much more complex. Fortunately, there are six simple things you can do to improve the quality of your interviews, and clarify task analysis.

Indi Young writes...
6 steps to better interviews and simplified task analysis

Business value of web standards

2006-03-27T19:25:00.000-08:00

How important is standardization to an individual business?
Do Web standards give organizations a return on investment?
Does the transition to XHTML and CSS make financial sense?

Jeffrey Veen answers...
The Business Value of Web Standards

Information Architecture - Intro

2006-03-26T20:15:00.000-08:00

Information architecture is the science (some would insist art) of defining the structure, organization, navigation, labeling and indexing of a Website.

It is the role of the information architect to decide how a site should be structured, what kind of content it should host, and how to accommodate future growth. In short, information architecture defines the backbone of a Website.

Subha Subramanian writes...
An Introduction to Information Architecture

Quantify - User Experience

2006-03-26T19:52:00.000-08:00

Many look to the user experience as an overall indicator of Website success. Analyzing how effectively a Website provides for a net positive user experience can often turn into a subjective affair, rife with opinion and short on objectivity.

Robert Rubinoff outlines a quick-and-dirty methodology for quantifying the user experience, which I've found to be very useful in providing clients with a quick, objective, visual representation of where their site stands vis-à-vis the competition or past development efforts.

How To Quantify The User Experience

Improve Usability for Older Users

2006-03-26T19:45:00.000-08:00

According to the 2001 UK census, the UK now has more people aged over 60 than under 16. It also revealed that there are now 1.1 million people aged over 85 in the UK -- and the trend toward an ageing population is common in many other western countries.

Tim Fidgeon writes: The 40-minute 'talk-aloud' sessions involved our asking participants to find information on a range of government web sites. The results of this research provided insights into the ways older users differ from their younger counterparts when it comes to using the Internet.

Improve Usability for Older Users

Usability: Why Consistency is Critical

2006-03-26T19:39:00.000-08:00

Consistency can be something that you can use to your advantage, rather than a straitjacket that constricts you unnecessarily.

It can help minimize your development and maintenance costs, free you from having to be concerned about relatively trivial design issues, and provide an enhanced user experience for your customers.

Gerry Gaffney writes..
Why Consistency is Critical

Seven Screen Reader Usability Tips

2006-03-26T19:33:00.000-08:00

Simply ensuring that your Website is accessible to screen reader users is, unfortunately, not enough to guarantee that these users can find what they're looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so poor that they needn't have bothered stooping by in the first place.

Fortunately, there are plenty of simple-to-implement guidelines that you can follow. Trenton Moss lists down seven easy tips that will drastically improve a site's usability for screen reader users, as well as all other visitors.

7 Screen Reader Usability Tips

Usable Interactivity with Remote Scripting

2006-03-26T19:27:00.000-08:00

Usable Interactivity with Remote Scripting

Cameron Adams explains what is remote scripting and its advantages, Remote Scripting and Accessibility advantage ans much more...

If your bookmarks contain even one Web development blog, you'll undoubtedly know that remote scripting is being touted as the new "future of the Web".

Browser-Specific CSS Hacks

2006-03-26T19:16:00.000-08:00

Introduction to Browser-Specific CSS Hacks

More and more Web developers are ditching tables and coming round to the idea of using CSS to control the layouts of sites. And, given the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management... An article by Trenton Moss.

All about Web Accessibility

2006-03-01T21:04:00.000-08:00

Introduction

Day 1: Jackie

Day 2: Michael

Day 3: Bill

Day 4: Lillian

Day 5: Marcus

Day 6: Choosing a DOCTYPE

Day 7: Identifying your language

Day 8: Constructing meaningful page titles

Day 9: Providing additional navigation aids

Day 10: Presenting your main content first

Day 11: Skipping over navigation links

Day 12: Using color safely

Day 13: Using real links

Day 14: Adding titles to links

Day 15: Defining keyboard shortcuts

Day 21: Ignoring spacer images

Day 22: Using real lists (or faking them properly)

Day 23: Providing text equivalents for images

Day 24: Providing text equivalents for image maps

Day 25: Using real horizontal rules (or faking them properly)

Day 26: Using relative font sizes

Day 27: Using real headers

Day 28: Labeling form elements

Day 29: Making everything searchable

Day 30: Creating an accessibility statement

Conclusion

Accessibility statement

Translations

Overlay images on a webpage

2006-02-19T20:35:00.000-08:00

Lightbox JS

Lightbox JS by Lokesh Dhakar is a simple, unobtrusive script used to to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Benefits

Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity.

http://www.huddletogether.com/projects/lightbox/

Yahoo User Interface Library

2006-02-16T01:47:00.000-08:00

http://developer.yahoo.net/yui/

The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX.

The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM).

The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.

If there is one thing to love about this library, it's the documentation. From day one, every available component has full API documentation as well as a short "Getting Started" guide complete with working examples. No trawling through the developers' blogs, no pulling apart complex applications: this toolkit has all the spit and polish of a commercial product.

For now, the library's scope is somewhat limited. Beyond the core utilities for animation, remote scripting (AJAX), event handling, DOM manipulation, and drag-and-drop (which are certainly nothing to sneeze at!), the library currently offers only three actual widgets for building user interfaces:

Calendar for selecting dates
Slider for visually choosing from a range of values
TreeView for browsing through a hierarchy of items
Though the selection isn't overwhelming, these three widgets alone already solve some problems that have traditionally taken a lot of work to overcome. No doubt future widget releases will address some of the more mundane needs of web application user interfaces.

It's particularly refreshing to see Yahoo! opening up its box of goodies and sharing them with the web development community. This move contrasts sharply with Google's approach of protecting its JavaScript assets by hiding them away in obfuscated code.

CSS Basics

2006-02-14T06:06:00.000-08:00

CSS Basics

contains following chapters:

Chapter 1 - Introduction to CSS

Chapter 2 - CSS Syntax

Chapter 3 - CSS Classes

Chapter 4 - CSS IDs

Chapter 5 - CSS Divisions

Chapter 6 - CSS Spans

Chapter 7 - CSS Margins

Chapter 8 - CSS Padding

Chapter 9 - CSS Text

Chapter 10 - CSS Fonts

Chapter 11 - CSS Anchors, links and pseudo classes

Chapter 12 - CSS Backgrounds

Chapter 13 - CSS Borders

Chapter 14 - CSS Lists

Chapter 15 - CSS Width and Height

Chapter 16 - CSS Classification

Chapter 17 - CSS Position

Chapter 18 - CSS Pseudo Elements

Web Design related topics

2006-02-10T23:34:00.000-08:00

Web Design from Scratch
- Free web design course - basics, layout, free tutorials, case studies, how to guides and examples.

Contains mainly the following sub-sections:

Basics

Design process

Opinion

Business

Goal-oriented design

Graphic design

Site architecture

Accessibility

Usability

Copy writing

Production

HTML

JavaScript / DHTML

Recommended

Topics in Usability

2006-02-10T20:43:00.000-08:00

Topics in Usability

Usability Basics
Introductory information about usability

Usability Toolkit
A collection of forms, samples and other useful tools

Research and Resource Sites
Links to other sites with good resource collections

More about the following:
- Usability Labs and Participant Recruiting Services
- User Analysis and Usability Evaluation Methods
- Conducting and Reporting Usability Activities
- Accessibility, Ergonomics and Special Audiences
- Design Topics
- Standards and Guidelines
- Career and Training Information

How to Improve Your Logo

2006-01-18T22:08:00.000-08:00

http://www.fizbang.com/1-3-06.php

Logo "touch-up" is one of our most frequent requests. Our final work must be more effective, more visually appealing, and most importantly, recognizable as a revision of the old logo. How do we go about this? I wrote this guide both to offer potential business clients insight into our graphic design process and to help aspiring graphic designers.

- Logo Design Objectives
- Tips for Improving Logos
- Apple's and Microsoft's Logos
- How We Improve a Logo
- Conclusion

CSS Hacks and IE7

2006-01-09T01:22:00.000-08:00

CSS Hacks and IE7

Recently the Microsoft blog announced some of the changes we may expect for the release of the IE7 browser, perhaps in early 2006. It's very good that we are getting this advance notice, because MS is biting the bullet and cleaning up a lot of selector effects that coders are using to hack special rules for Explorer.

Specifically a number of CSS hacks that rely on IEwin's failure to support certain advanced selectors will be failing, because IE7 will introduce IE's support those selectors. In the long run, this is a very good thing for us CSS'ers, since it will give us a lot more power and control over what our CSS does and where. Unfortunately, in the short run it will mean rewriting stylesheets and making alternate provisions for hacking IEwin.

Read More...

CSS Zen Garden

2006-01-03T20:02:00.000-08:00

http://www.csszengarden.com/

A demonstration of what can be accomplished visually through CSS-based design.

Download the sample html file and css file from the site for trying it out yourself.

CSS Page Maker

2005-12-18T21:38:00.000-08:00

CSS Source Ordered 1-3 Columned Page Maker v2.90 from ClevaTreva Designs

Features:

* Source Ordered Layout (Content First).
* Substantial x-browser support in one design.
* 100% page height design (except MAC IE 5.x, which is fluid height instead). Fluid height version soon.
* No images used to make layout (unless you add your own 3D effects).
* Fully customisable by user from online form (makes the css for you).
* Heavily commented css and source code to explain design.
* User can select from various Doctypes to use.
* On line Tooltips to explain the form.
* Uses source code ideas from Paul O'Brien, Big John, and loads of others, plus lots of ideas of my own!
* Allows multiple header and footer rows.
* Centered/Left Aligned fix-width design (fluid width design may come later), user sets the widths of all columns.
* Top and Bottom margins (shows background color) now possible within the 100% height.
* It's FREE.

CSS: Fast Rollovers Without Preload

2005-12-08T20:55:00.000-08:00

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

http://wellstyled.com/css-nopreload-rollovers.html

www.welie.com -- patterns in Interaction Design

2005-10-17T06:55:00.000-07:00

A huge collection of patterns in Interaction Design.
http://www.welie.com/patterns/index.html

Typetester ? Compare fonts for the screen

2005-10-06T21:58:00.000-07:00

What is Typetester?

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Technical details

Typetester's code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

300 Images From 1800 Sites

2005-10-05T21:26:00.000-07:00

300 Images From 1800 Sites: "300imagesfrom1800sites"

The author says: "I started gathering little, iconesque web images for myself so that I could compare, contrast, and study the techniques used by other graphic artists on the web. My initial pool of images looked so interesting that I decided to continue methodically hunting and capturing the icons for a public display piece."

All Images are © by their owners. Please do not steal!

PhotoshopSupport.com

2005-10-04T21:09:00.000-07:00

Free Photoshop Tutorials & Photoshop Tips

Here are the first installments of free Photoshop tutorials by Jennifer with more coming soon.

Working With Type In Photoshop CS2
Learn how to work with the type tools in Photoshop CS2.
Working With Layers In Photoshop CS2
Learn how to work with layers in Photoshop CS2.
I See iPod People — The Photoshop Silhouette
Learn how to make an iPod ad Silhouette in Photoshop.
Photoshop Web Template — Web Site Design Tutorial
Learn how to make a Photoshop web template with this web site design tutorial.
Blog Templates — Blog Design Tips And Resources
Tips on how to improve blog templates with your own designs. Includes resources.
Photoshop Keyboard Shortcuts
Learn how to edit and create sets of keyboard shortcuts in Photoshop CS and CS2.
How To Fix Overexposed Images In Photoshop
Two quick techniques to help you fix overexposed images in Photoshop.
How To Fix An Underexposed Photo In Photoshop
Two simple techniques that can make dark photos look great.
How To Wrap Text Around An Object In Photoshop
A quick and easy technique to wrap text around an object.
Tips And Tricks For Beginners
Photoshop tips and tricks that will save you lots of time down the road.
Create A Sepia Tone Effect In Photoshop
A simple way to create a Sepia Tone effect in Photoshop.
Turn A Photo Into A Sketch For Making Coloring Books
Want to make a coloring book? The first step is to turn a photo into a sketch.
The Night Vision Thing — A Photoshop Recipe
Learn to create the greenish glow associated with photos from night vision devices.
Resize Images Without Losing Sharpness
This simple trick will eliminate the dreaded blur often found after resizing.
Pixel Fonts To The Rescue
All about Pixel fonts — how to use them and where to get them.
Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
Learn how to create tiny custom icons that appear in the address bar of a web browser.

CSS Techniques Roundup - 20 CSS Tips and Tricks

2005-09-29T22:37:00.000-07:00

CSS Techniques Roundup - 20 CSS Tips and Tricks

Pete Freitag is a software engineer, and web developer located in central new york.

Here are 20 CSS techniques, tips and tricks from Pete Freitag that you may find handy:

Rounded Corners
Rounded Corners without images
Creating a Netflix style star ratings
Tableless forms
Styling Lists with CSS
2 Column Layout Technique
3 Column Layout with CSS
3 Column Fixed width centered layout
Printing with CSS
Adding a CSS stylesheet to an RSS feed
Footer Stick
CSS Element Hover Effect
Styling Horizontal Rules
Clearing Floats
CSS Popups
Box Punch
CSS Badge
Orange RSS Buttons with pure CSS
10 CSS Tricks you may not know
10 More CSS Tricks you may not know

Photoshop Tutorials - Tutorial Select

2005-09-29T22:08:00.000-07:00

http://www.tutorialselect.com/ is a good source for handy tutorials that help in everyday photoshop work.

FireFox Search Plugins are availalble for searching tutorials on Photoshop and PHP topics.

CSS and Round Corners: Build Boxes with Curves

2005-09-28T22:56:00.000-07:00

CSS and Round Corners: Build Boxes with Curves

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, author Trenton Moss uses CSS to create this box with round corners, without an 'img' tag in sight!

The Code:
Our finished HTML now looks like this:

div class="bl"
div class="br"
div class="tl"
div class="tr"
Lorem ipsum dolor sit amet consectetur adipisicing elit
/div
/div
/div
/div

div class="clear"

/div

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

Cross Browser DHTML

2005-08-30T02:51:00.000-07:00

Cross-Browser.com is an outlet for Mike Foster's DHTML hobby. This site features X - a cross-browser DHTML javascript library, and many demos, applications, articles and documentation.

The X library is designed for Opera 5+, Mozilla, Firefox, Safari, Netscape 7.x, Internet Explorer 4+, Konqueror, Netscape 4.x and browsers with similar object models. Object-detection (instead of browser-detection) is used as much as possible.

Painting in Photoshop - The Basics

2005-08-23T22:59:00.000-07:00

by Nykolai Aleksander

Index of Full tutorial with contents below:

Basic PS Settings

• Scratch Disk Settings
• Opening a new file & Canvas Settings
• Changing Colours
• Canvas Sizes
• Docking Palettes

PS Brushes

• Which Brushes to use?
• Basic settings
• Installing Brush Sets
• Loading Brush Sets
• Making Custom Brushes

Drawing Tablet

• Changing settings
• Getting used to the pen - exercises

Use of Colour

• Grass isn't always green
• Colour Theory (by Socar Myles)

The Use of Layers

• The Meaning of Icons
• Creating Layers &amp; naming them
• Moving Layers in the Palette
• Merge Visible Layers
• Merge Linked Layers
• Layer Sets
• From Scan to Transparent Layer
• Transforming Layers
• Flatten Layers

Painting

• Do I need to be able to draw to paint in PS?
• Pre-painting sketches - yes or no?
• Basic detailed painting steps
• Saving your Painting
• Special: Evil Tools

One last piece of warning: If you are hoping for a magic solution, there is none. You will not become a great painter overnight - it takes some time, patience and practice.

Free Usability Resources

2005-08-23T05:33:00.000-07:00

PDF documents available for download from resources at infodesign.com.au.

Topics include:

General

Analysis

Design

Evaluation

gotomedia : resources

2005-08-23T00:24:00.000-07:00

gotomedia : resources :

Goto Guides

Many have found the following goto guides (PDFs) to be helpful Usability resources. These were originally created as resource material for Kelly's regular lectures and eventually evolved into her 281 page book, Web ReDesign | Workflow that Works.

Setting the Stage, 2000 [PDF 485k]
Usability Testing, 2000 [PDF 776k]
Web Design Workflow, 2000 [PDF 1.9mb]
Enhancing Creativity, 2002 [PDF 468k]

Techniques

The Macromedia Website Production Management Techniques site represents a joint effort by Macromedia and Kelly Goto.

Lombergar.com - Free Photoshop video tutorials

2005-08-15T22:08:00.000-07:00

Lombergar.com - Free Photoshop video tutorials

Here you will find free Photoshop training trough video tuition - each of the tutorials will teach how to achieve a cool technique

PDF Book - Research-Based Web Design & Usability Guidelines

2005-07-25T02:11:00.000-07:00

FREE Download - full 128 pages book :
Research-Based Web Design & Usability Guidelines from http://usability.gov/pdfs/

Guidelines by Chapter

Chapter 01 – Design Process and Evaluation (6 pages)
Chapter 02 – Optimizing the User Experience (6 pages)
Chapter 03 – Accessibility (4 pages)
Chapter 04 – Hardware and Software (3 pages)
Chapter 05 – The Homepage (5 pages)
Chapter 06 – Page Layout (6 pages)
Chapter 07 – Navigation (6 pages)
Chapter 08 – Scrolling and Paging (3 pages)
Chapter 09 – Headings, Titles, and Labels (5 pages)
Chapter 10 – Links (8 pages)
Chapter 11 – Text Appearance (4 pages)
Chapter 12 – Lists (4 pages)
Chapter 13 – Screen-based Controls (Widgets) (10 pages)
Chapter 14 – Graphics, Images, and Multimedia (7 pages)
Chapter 15 – Writing Web Content (5 pages)
Chapter 16 – Content Organization (5 pages)
Chapter 17 – Search (4 pages)

Essential Bookmarks

2005-07-21T23:49:00.001-07:00

Essential Bookmarks - Links to great webdesign resources

Topics include:

CSS
XHTML
PHP
Usability
Accessibility
Design
Inspiration
SEO
RSS
Validation
Miscellaneous

Styling even more form controls | 456 Berea Street

2005-07-18T04:01:00.000-07:00

A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.

Styling even more form controls | 456 Berea Street

CSS Help Pile

2005-05-02T21:42:00.000-07:00

CSS Help Pile: Links and Discussion About the Best CSS Resources Available on the Web - artypapers

Topics of Interest:
- How to Create a Photographic Gallery Using CSS
- Devil's Details: Web Design Details Blog
- Mobile CSS First Steps
- Image rollover effects
- CSS Tabs
- Nifty Corners: rounded corners without images
- A CSS styled calendar
- Applied CSS Management and Optimization

CSS: Hybrid CSS Dropdowns: A List Apart

2005-04-20T05:55:00.000-07:00

Author Eric Shepherd says:

This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.

Warning: This technique will not work as well for lists that require large numbers of items, where dropdowns either shine or collapse under the weight of their own sheer mass, depending on your perspective.

We’re going to create a hybrid menu that runs horizontally across the window. It has two levels of navigation (in our example, main topics and their associated pages). Our menu will allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot.

Sound good? Let’s get going.

Hybrid CSS Dropdowns: A List Apart Article

Hybrid CSS Dropdown Sample

CSS Design: Taming Lists: A List Apart

2005-04-18T05:24:00.000-07:00

Most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

CSS Design: Taming Lists: A List Apart

Photoshop CS Optimization Tips

2005-04-13T20:53:00.000-07:00

Design Your Site Team Tip: Photoshop CS Optimization Tips

This question comes up quite frequently in the Graphics and Multimedia forum so we thought we would address some of the issues of optimizing Photoshop CS for Windows and Macintosh systems.

Here are just some of many ways you can ensure Photoshop CS is running properly for best performance.

Troubleshooting

There are a few instances where Photoshop's files can become damaged or corrupt. Here are some ways to correct those problems.

Photoshop Preferences File
There may be times when your preferences file will become corrupt which will cause a variety of problems with Photoshop. Such problems include menus and tools disappearing, the program running slow or system lock-ups
To re-create the Photoshop preferences file:
1. Quit Photoshop.
2. Drag the Photoshop preferences file to the Trash:
Drag the Adobe Photoshop CS Prefs.psp in the Users/[ user profile ]/Library/Preferences/Adobe Photoshop CS Settings folder to the Trash.
Restart Photoshop.

If the problem recurs after you re-create the Photoshop preferences file, the problem isn't related to the preferences file. To restore custom settings, drag the file you moved in step 2 back to its original location, and then click Yes to replace the new preferences file.

Troubleshoot Fonts
System errors can occur if Photoshop accesses a damaged font.

To troubleshoot fonts to determine if they cause the problem.

- Drag the contents of the Library: Fonts folder to a new folder on the desktop. (If you manually added fonts to the Library: Application Support: Adobe: Fonts folder, also drag those fonts to the new folder.)
- At the Finder, choose File > Find.
- Type adobefnt.lst , select the system drive, and then press Return.
- Delete all adobefnt.lst files found (for example, adobefnt06.lst).
- Restart the computer.
- Restart Photoshop. Photoshop creates new adobefnt.lst files.
- Try to re-create the problem, and continue as follows.

-- If the problem doesn't recur, move one font back to the Library: Fonts folder, and then repeat the steps until you identify the problematic font.

-- If the problem recurs, move the contents of the new folder on the desktop back to the Library: Fonts folder.

Troubleshoot ICC profiles.
A system error can occur if Photoshop accesses a damaged ICC profile.
To troubleshoot ICC profiles to determine if they cause the problem:
1. Move all profiles from the following folders to another folder:
-- Library: ColorSync: Profiles
-- Library: Application Support: Adobe: Color: Profiles
2. Restart Photoshop, and try to re-create the problem.

-- If the problem doesn't recur, move profiles back to their original folders one at a time, and try to re-create the problem after each move, until you identify the problematic profile.

Optimization

Allocate more memory to Photoshop
Low memory in Photoshop can create real problems for you especially if you are working with large files. It’s best to shut-down all applications running in the background (if you don’t need them), and work with only Photoshop.
You can allocate a larger percentage of memory to Photoshop to eliminate problems caused by low memory.

-Start Photoshop.
-From the Photoshop menu, choose Preferences > Memory & Image Cache.
-In the Memory Usage section, increase the value in the Maximum Used by Photoshop text box.
-Click OK, and then restart Photoshop.

Optimize scratch disks.

Photoshop uses a scratch disk file (that is, temporary disk space for storing data and performing computations) when insufficient RAM is available for image editing. Photoshop CS can create 64 exabytes of scratch disk files on up to four hard disk partitions, while Photoshop 7 can create 4 exabytes on up to four hard disk partitions. An exabyte is 1,074,000,000 gigabytes.

The hard disk partition you specify as the primary scratch disk should have adequate free space equal to several times the size of your file. A good performance indicator is to have space available equal to three to five times the size of the average image file; specify additional scratch disks if you have additional hard disk partitions. If disk space is insufficient, remove unnecessary files from hard disks.

To specify a scratch disk in Photoshop, choose Photoshop > Preferences > Plug-Ins & Scratch Disks.

CSS - Creating a centered page layout

2005-04-13T04:24:00.000-07:00

Creating a centered page layout with CSS

CSS Box Model Hierarchy

2005-04-13T04:15:00.000-07:00

The author writes:

The order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

3D CSS Box Model Hierarchy

Resources For Web Design

2005-03-10T22:27:00.000-08:00

Resources For Web Design

CSS - Styling a button

2005-03-01T03:48:00.000-08:00

Sample CSS:

#btn a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:4px outset #cc9900;
background-color:#00ffff;
display: block;
width: 160px;
padding: 3px 5px;
margin: 1px;
}
#btn a:hover {
background-color: #00c0c0;
color:#000000;
padding-left:4px;
border:4px inset aqua;
}

CSS Cursor values

2005-03-01T03:42:00.000-08:00

In CSS syntax, 'cursor' properties supports the following values:

auto: Allows the Enduser's browser to select the Cursor.
crosshair: Crosshair
default: Default Cursor
pointer: Pointer that indicates a link.
move: Indicates something is to be moved
*-resize: Cursor used to reposition windows.
text: Text I-bar.
wait: Busy or wait hourglass cursor.
help: Help cursor

More details may be found at:CSS Cursors - Tutorials - HTMLCenter: "auto: Allows the Enduser's browser to select the Cursor.
crosshair: Crosshair
default: Default Cursor
pointer: Pointer that indicates a link.
move: Indicates something is to be moved
*-resize: Cursor used to reposition windows.
text: Text I-bar.
wait: Busy or wait hourglass cursor.
help: Help cursor "

Quirksmode and Strictmode

2005-02-28T01:23:00.000-08:00

IE 6.0 - QuirksMode - for all your browser quirks: "" and XML prologue details and the modes at which IE renders XHTML.

CSS Rounded Corners example - redmelon.net

2005-02-18T03:14:00.000-08:00

CSS Rounded Corners example - redmelon.net

A Demo page showing sample HTML code and VIew Source shows the CSS

This is the essential CSS:

/* set background images for corners */
.rbroundbox {
background: url(simple_background.gif)
repeat;
}
.rbtop div {
background: url(simple_top_left.gif)
no-repeat top left;
}
.rbtop {
background: url(simple_top_right.gif)
no-repeat top right;
}
.rbbot div {
background: url(simple_bottom_left.gif)
no-repeat bottom left;
}
.rbbot {
background: url(simple_bottom_right.gif)
no-repeat bottom right;
}

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%; height: 14px; font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 20em; margin: auto; }

and HTML:

[div class="rbroundbox"]
[div class="rbtop"][div][/div][/div]
[div class="rbcontent"]
[h2]Header[/h2]
[p]Text here my love.[/p]
[/div]
[div class="rbbot"][div][/div][/div]
[/div]

CSS - Transparency for Images

2005-02-17T04:43:00.000-08:00

{img src="assets/misc/solar-radar.jpg" width="105" height="140"
alt="solar-radar (7K)"
style="-moz-opacity:0.5;
filter:alpha(opacity=50);cursor:hand" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"}

In the above code:

-moz-opacity:0.5; - alters opacity in Mozilla based browsers
filter:alpha(opacity=50); - alters opacity in Internet Explorer

More details

CSS - Effect for Transparent Images

2005-02-17T04:18:00.000-08:00

Using CSS change the background colour behind transparent .gif images.
The changing background colours show through the transparent portions of the image.

Create an anchor with the following styles

Style:
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000;border:1px solid #990000;}

HTML:
[div class="rollover"]
[p]
[a href="#"][img src="image.gif" border="0"][/a]
[/p]
[/div]

XHTML Events

2005-02-17T01:49:00.000-08:00

XHTML Events Complete reference includes:

onload
onunload

onchange
onsubmit
onreset
onselect
onblur
onfocus

onkeydown
onkeypress
onkeyup
onclick
ondblclick
onmousedown
onmousemove
onmouseover
onmouseout
onmouseup

XHTML Reference

2005-02-17T01:18:00.000-08:00

Complete XHTML Reference from w3schools.com.

A Comprehensive and essential reference

CSS Presentation: Hi-Fi design with CSS

2005-02-05T01:05:00.000-08:00

Hi-Fi design with CSS - presentation by Douglas Bowman covers the following areas:

Colorswapping

Fahrner Image Replacement and alternatives

Adding multiple style sheets

Styleswitching using scripts

CSS Rollovers

Sliding Doors - CSS for Tab Design

.. worth a read

CSS Presentation: The Good, the Bad, & the Ugly

2005-02-05T00:56:00.000-08:00

CSS: The Good, the Bad, & the Ugly - presentation by Douglas Bowman covers the following areas:

What is Image Replacement?

Fahrner Image Replacement and alternatives

CSS Code and Design Theft

Some lesser known HTML character entities

2005-02-04T21:36:00.000-08:00

Here's a list of some of the more useful but lesser known HTML character entities.

Character	HTML Entity	Description
¢	¢	Cent sign
£	£	Pound sterling sign
€	€	Euro sign
©	©	Copyright sign
‘	‘	Left single quote
'	’	Right single quote
“	“	Left double quote
”	”	Right double quote
«	«	Left angle quote
»	»	Right angle quote
—	—	Em dash
–	–	En dash
®	®	Registered trademark
™	™	Trademark sign
°	°	Degree sign
±	±	±
¼	¼	One quarter
½	½	One half
¾	¾	Three quarters
×	×	Multiplication sign
÷	÷	Division sign
α	α	Greek letter alpha
β	β	Greek letter beta
?	∞	Infinity symbol

A complete list of character entities is provided in the HTML 4.01 recommendation .

Sample Webcredible Usability Handbook

2005-02-04T03:55:00.000-08:00

Webcredible Usability Handbook contains very useful usability tips for designing user friendly websites.

If you like the sample chapters you can purchase the 90-page Handbook at http://www.webcredible.co.uk/handbook.

Don't show scrollbar unless needed (IE)

2005-02-03T00:10:00.000-08:00

/* This may make it impossible to scrolling using the keyboard! */
html, body { overflow-y: auto }

Web Development Bookmarklets

2005-02-02T22:42:00.000-08:00

Web Development Bookmarklets - a useful set of web development tools that may be attached to IE/FF/Opera

Text Encoding

2005-01-28T22:11:00.000-08:00

Text Encoding - Character and Base10 values
The basic format is &#xx (where &# is followed by a number )

space = &# 32;
tab = &# 9;
carriage return = &# 13;
line feed = &# 10;
less than = &# 60;
greater than = &# 62;
ampersand = &# 38;
single quote = &# 39;
double quote = &# 34;

Link:firstobject.com

Navigation menu with lists using :hover and :focus

2005-01-27T04:01:00.000-08:00

CSS:

#focusexampleone ul{
list-style:none;
width:200px;
}
#focusexampleone li{
width:100%;
margin:1px;
text-align:center;
}
#focusexampleone a, #focusexampleone a:link, #focusexampleone a:visited{
display:block;
width:198px;
text-decoration:none;
border:1px solid #ddd;
}
#focusexampleone a:focus, #focusexampleone a:hover, #focusexampleone a:active{
background:#484;
color:#fff;
border-color:#000;
}

HTML:

Printing table details spanning multiple pages

2005-01-26T22:18:00.000-08:00

thead, tfoot and tbody allow you to separate the table into header, footer and body. This is particularly useful for large tables and when printed for example, the header and footer rows should appear on every page.

These elements must be defined in the order thead - tfoot - tbody

Note: IE fails!
IE doesn't have a clue when it comes to headers and footers, and although it renders them in the table, they will not appear at the top and bottom of every printed page.

Link:htmldog.com

How to style table columns directly?

2005-01-26T21:45:00.000-08:00

How to style table columns directly??

Use a style in the required 'col' of the 'colgroup'
More details at:htmldog.com

The only styles that can be applied to columns are borders, backgrounds, width and visibility.

Tan Hack - (Edwardson Tan)

2005-01-25T03:52:00.000-08:00

Basic Syntax:
Only for adjusting the width setting due to wrong CSS1 box model of IE5.x/Win browsers

/*selector recognized-IE only*/

* html selector 

{

  width:value; /*total width-IE5x/Win)*/

  w\idth:value;/*content width-otherIE)*/

}



selector

{ padding:value;

  width:value; /*content width-others)*/

}

The selector of the first rule is meant to be recognized only by IE. It utilizes the star html selector. The first declaration in the rule supplies IE5.x/Win its width value. But since other IE versions which do not have the box model bug will also pick up this value the second declaration is necessary to serve them the correct width. This second declaration has the escape character (backslash) embedded in the middle of the property name, thus, making it "invisible" to IE5.x/Win only. Character escapes are recognized by IE6/Win and IE5/Mac. Keep in mind that the backslash cannot appear before the first letter of the property since IE5.x/Win understands that.

The second rule above is recognized by all CSS-aware browsers. All the properties declared here are for all browsers including IE. The only values which IE will not apply from this rule will be width values since the first rule has a higher specificity. And because of this difference in specificity placement of these two rules relative to one another is irrelevant. Either one can precede the other.

Advantages:
One advantage of the modified form of the SBMH is that it effectively hides any escapes from browsers (other than IE) that may have difficulty with them. When a browser (other than IE) reads the star html selector it will not find any matching element in the markup and will simply move on to the next rule. It will not bother reading the declaration block. Therefore, such browsers as Opera 5 and NS4.x are effectively shielded from w\idth.

Moreover, the modified SBMH is obsolescence-proof. If and when the star html selector bug finally is fixed by Microsoft the hack will not have any negative impact on the browser. Just like Mozilla or Opera 6 for instance the hypothetical new IE without the star html bug will simply ignore the entire rule and pick up the width from the other rule. And since this new IE will presumably be implementing the correct box model (IE6 and IE5.x/mac do so already) all will be as it should be.

Example:


div#footer p{

 margin: 0 30% 0 0;

 padding: 0.5em 2em 0.5em 10%;

 background: #eee;

 font-size: 90%;

}



* html div#footer p{

font-size: 75%;/* for IE5.x/win */

f\ont-size: 90%;/* for other IEs*/

}

Tantek Celik's IE5 CSS1 Box Model Hack

2005-01-20T01:00:00.000-08:00

Tantek Celik's IE5 CSS1 Box Model Hack

To achieve an equal width of 120px in all browsers,

Add border and padding values to text width and specify the sum (130px) as the width for IE5
(120px content width + 5px left padding + 5px right padding = 130px)

Other browsers interpreting the CSS box model correctly would identify the width as 120px from the last line of the following #container code.

However the html>body line is required for Opera5 which gets the box model wrong but understands the CSS2 Child Selector '>' correctly.


#container{

  padding:5px;

  width:130px;

  voice-family:"\"}\"";

  voice-family:inherit;

  width:120px;

}

html>body #navigation{width:120px;}

More Details: here at tantek.com

Welcome!

2005-01-19T22:04:00.000-08:00

Ah..Yes, finally I have decided to buckle down and key-in a few lines...
It takes a lot of patience and drive to do this...!

Me..
Ramnath Ramachandran - thats my full name..
well i like to be called 'ram' :)
Working as 'Graphic Designer' at Sobha Renaissance IT, Bangalore, India.

webramdesign.blogspot.com
well this doesn't sound very friendly, but I tried all easier ones but they all were used out!
webramdesign - is the abbreviation for 'Web Design and related topics by Ramnath'

well thats all for now...