TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo

Articles & Tutorials...

Say no to CSS reset

New!
Starter CSS files versus reset styles sheets...

The truth about clearfix

New!
Everything you know about clearfix is wrong...

Block formatting contexts

New!
Everything you wanted to know about Block Formatting Contexts...

Wordpress on Windows 7

New!
Installing Wordpress, Joomla, MySQL connector and more using Microsoft® Web PI...

PNG hack

New!
How to achieve alpha transparency in IE 6 without an HTTP request...

Intrinsic ratio for videos

New!
How to resize videos dynamically...

»Styling the ABBR element...

New!
Using createElement() to fix the ABBR element in Internet Explorer...

»Saving Definition Lists one at a time...

Using the DOM to replace Definition Lists with Headings and Divs...

»Float-less CSS layouts...

No DIV, no FLOAT, no CLEAR, no HACK, no joke!

»PNG transparency and drop shadow...

How-to create drop shadow boxes with minimal markup.

»Block-formatting context and floats...

How-to contain floats without structural markup.

»Hacking the YUI container script...

Find out how to improve how YUI centered overlays are styled.

»How z-index works...

Find out how elements stack and start using low z-index values.

»Using Sprites to minimize HTTP requests.

How to use the Sprite method with my Image Replacement Technique...

»Giving some thought to the process.

The purpose of this exercise is to demonstrate how we create a document based on semantics and unobtrusive scripting, using an FAQ page as an example..

»The truth about Spry tabbed panels.

When an authoring tool adds bells and whistles, things can go wrong...

»How to fix the centered em-based layout bug.

In some browsers (i.e. Firefox 0.8) centered elastic layouts expand beyond both edges of the browser window when a user increases text-size...

»Styling a code listing with CSS.

How to use an Ordered List (OL) and CSS to create a nice code listing...

»Styling a gallery of thumbnails with captions.

A Definition List and a few CSS rules is all we need to create a gallery of thumbnails with captions that flow...

»Positioning LEGEND elements.

Wrapping the content of LEGEND elements helps positioing them...

»ABBR elements.

Two different scripted solutions to expand abbreviations in your documents...

»Apache and WAMP.

Find out what to check for when you cannot install, start the service, nor test port 80...

»Validaton Links.

Using Javascript to create validation links on the fly...

»Stretchy List Items.

Make an HTML List look like a table...

»Pure CSS Dropdown Menus.

A browser and keyboard-friendly solution...

»Using real images in Menus.

A solution to make the markup of graphic Menus looks nicer...

»A possible alternative to innerHTML.

Using DOM methods instead of the proprietary innerHTML property...

»The perfect Drop Cap.

Using the DOM with my Image Replacement technique to create Drop Caps...

»Image Replacement, part II.

Using the DOM to plug images along with the text into headings...

»Images in Blockquotes.

Using IMG elements rather than background images in blockquote...

»"PNG Overlay.

Using a Microsoft proprietary filter and minimal markup to create "PNG overlays...

»Keyboard Friendly "DOM Menu".

Using the DOM to create a menu that is easy to navigate for keyboard users...

»Accessible Photo Gallery.

Using the DOM to create a photo gallery packed with usability/accessibility features...

»Boiler-plate Accessibility Statement.

No more excuse for not including Accessibility Statements in sites we build...

»Navigation links and current location.


How to use the DOM to differentiate navigation links depending on the document which hosts them...

»The perfect FAQ page.

A Definition List and the DOM is all we need to "toggle" the answers of our FAQ page...

»User Defined Accesskeys.

Make your site more accessible by giving the user "full rights" over access keys...

» One clean HTML markup, many layouts.

It is this thread (title: "one template to rule them all") on the CSS-Discuss List that initiated this article...

» Say no to CSS hacks with branching techniques.

By doing the branching inside the (X)HTML markup, it is possible to contain what I call "proprietary fixes" within specific files. The main advantage of this approach is that it dramatically improves maintainability...

» Opening popup windows without extra markup.

Popup windows are a hot topic among the web designers' community. People who are new to the trade struggle to customize them while seasoned web designers argue about their very use...

» Find out about TIP (an alternative to the FIR method).

After spending some time reading about FIR, I thought it would be interesting to turn the debate on its head by reverting to the discarded <img /> element.

» Three-column fluid CSS-layout.

A CSS challenge and an article on A List Apart made me investigate the negative margins technique...

» Pure CSS Disjointed Rollovers.

... next page of this article is almost identical to Eric Meyer's tutorial but the following documents show a very different approach on how to "pop up" images [or even text and images at once]...

» The "Sliding Doors of CSS" revisited.

... I thought that I just wasted my time because Douglas Bowman had a solution already. Then, I found out that my own way to "get there" was very different...

» CSS-Based Dropdown menu.

There is a great ALA article that discusses CSS-based dropdown menus. It shows how to create "smart little menus that do the “DHTML” dropdown dance without sacrificing semantics, accessibility, ...

» Everything about Frames.

In the beginning… a browser was only able to display a single document with its “source” file’s name showing in the browser’s address bar. At this early date, browsing through documents was then a sequential process, e.g., first page 1, then page 2, and so on....

» Table Madness.

Many beginning web designers fail to properly understand inline elements [that's what images are], so when it comes to assembling a sliced image using HTML, they mostly rely on their favorite tool: "the table!".

» Box Model and other CSS Oddities.

Just in case you're wondering what the hack is wrong with the Box Model, let me remind you that IE5 Win does not apply borders and padding the way other browsers do.....

» Easy Maintenance (SSI, CSS, JS).

If you link many documents to a single file, it makes sense that a single change within that file is instantly brought to the ones linked to it ...

» URI string and "parameters".

This document will show how to pass name and value pairs from one page to another using the browser's built-in location object....

» Null links are bad, bad, bad.

What if the browser is not JavaScript enabled?....

» MSIE5 Mac and Floats.

2 "case studies" related to float in MSIE5 Mac: "phantoms links" and background painting bug....

» Cool CSS boxes.

Rounded corners and shadow effect made easy. 3 simple CSS rules and 2 images are all you need...

» Clearing floaters.

This is a "low-layout-impact-across-browsers-solution" to clear floats...

» Spacers [shims] are good.

... I'm sure that with a title like that I'd get the CSS-P purists' attention. For most of them, such things should not exist. They call them names; the first one that comes to mind is... "junk". ...

» Removing White Space.

Let me show you a simple and yet very powerful trick to remove white space using Dreamweaver's find and replace function.
It works like this ..