[X]HTML and CSS

5th April 2006

Naked day

Naked and proud....

26th September 2005

Maintainability, a.k.a. the CSS elephant

Now that even Slashdot has made the move to CSS it's safe to say that the CSS advocacy battle is slowly being won. It's time to talk about the elephant in the corner of the room: stylesheet maintainab...

19th August 2004

Site specific stylesheets in Mozilla

New in Mozilla 1.8 Alpha 3: bug 238099 - implement at-rule for matching on site/document URL. Here's the example: @-moz-document url-prefix(http://www.mozilla.org/) { #q { background: white ! im...

15th July 2004

Per-site user stylesheets

I've been thinking a lot about per-site user stylsheets recently. Eric Meyer's CSS signatures are great for sites that support them (as this site does), but the sites that really need altering are hig...

18th May 2004

Atom discussion minutes

The minutes from the Atom/W3C discussion in New York have been posted online. Unfortunately the default formatting is pretty difficult to follow. I found it a lot easier to figure out who was saying w...

27th April 2004

CSS-Discuss Wiki Spam

The css-discuss wiki has pretty much looked after itself since its inception a year and a half ago, thanks to a small but active community of wiki gardeners. Unfortunately, recent months have seen a r...

8th March 2004

Lockergnome reverts

I decided to hold off commenting on the news that Lockergnome were dropping their CSS layout in favour of a table based alternative until I had seen the new design for myself. I figured that they were...

16th December 2003

More CSS trickery

Stu Nicholls dropped me a line earlier to pimp his new CSS demo site, www.s7u.co.uk. He's got some really nice tricks and the site warrants serious exploration. There's a good take on the classic 3 co...

2nd December 2003

Selectutorial

New from Russ Weakley: Selectutorial, which taks his widely acclaimed step by step CSS tutorial style and applies it to CSS selectors. Having a full understanding of selectors is critical if you're go...

25th November 2003

Collaborative Redesign

Out with the orange, in with the green. As with my last redesign, only the CSS changed. A fun deviation with this one was that it was a collaboration between myself and Natalie over nearly 5,000 miles...

23rd November 2003

The underscore hack

Via Web-Graphics, Petr Pisar's Underscore Hack provides a new way of targetting CSS rules specifically at Internet Explorer on Windows. As with all such hacks, the pros and cons of using this approach...

19th November 2003

Teaching CSS: there's a long way to go

This email to the css-discuss mailing list does a great job of describing the confusion and frustration that still confronts traditional web developers who are only just starting out on the road to ma...

11th November 2003

More required reading

Via Craig, Big John and Holly Bergevin present Float: The Theory and Flowing and Positioning: Two Page Models. Both articles take a complex topic and present it in clear, straight forward terms with e...

9th November 2003

Full page zoom

For as long as I've understood the issue, I've been an advocate of liquid layouts over fixed widths for web page design. Liquid layouts are layouts like the one used by this site, where the page adjus...

22nd October 2003

Google's Internal Blogs

Evan Williams on Google's intranet weblogs: How many people blog at Google? Not sure what the count is, but I know there's a couple hundred or more. It's really interesting to see the network ...

21st October 2003

Using XPath to mine XHTML

This morning, I finally decided to install libxml2 and see what all the fuss was about, in particular with respect to XPath. What followed is best described as an enlightening experience. XPath is ...

18th October 2003

CSS border art and other treats

Chris Hester's 3D Border Demo 2 (via Web Graphics) is an impressive demo of just how much you can achieve with CSS borders. His Tips & Demos collection is worth browsing through as well; I particu...

14th October 2003

Learning to use Floats

Russ Weakley's latest offering, Floatutorial, is probably the single most valuable CSS tutorial I've seen to date. Floats are one of the most powerful constructs offered by CSS, but they are also the ...

6th October 2003

Targetting CSS at IE5

Tantek has created/discovered a new CSS hack, the Mid Pass Filter. This filter allows you to write CSS rules that will only be applied by IE 5 and IE 5.5 for Windows. This is great news, as those are ...

4th October 2003

On CSS Remakes

I'm a bit late to the party on this one, but Paul Hammond's open letter to "tableless" recoders caused quite a stir a few weeks back with its extensive list of reasons that recoding someone else's sit...

Magazine styles in CSS

Mimicking Magazines (via techno weenie) is a nice set of CSS styled paragraphs inspired by the design of Cosmopolitan. They resize well thanks to intelligent use of ems for sizing instead of pixels....

20th September 2003

"Interactive Tabular Data"

Just spotted in a comment by Drew McLellan on Russell Beattie's Notebook: I'm comfortable using tables for forms. My point of view is that they are interactive tabular data. I'd never thought of...

13th September 2003

Listutorial

Russ Weakley has followed up his excellent Listamatic with a useful set of tutorials on styling lists. The style of the tutorial looks worth emulating: each page adds a new property, explaining what i...

10th September 2003

Javascript free rollovers

I've talked about image rollovers on this site before, but I've never seen a technique I like half as much as Pixy's Fast rollovers, no preload needed. Like all good techniques, it's so simple I'm sur...

5th September 2003

Listamatic

Russ Weakley's Listamatic borrows a whole bunch of fun CSS list effects from around the web and shows how they can be applied to the same markup to produce a large range of different results....

27th August 2003

Hire Meyer

Congratulations to Eric Meyer on the launch of his new consultancy business, Complex Spiral Consulting (named after his famous css/edge demo). The new company's tag line is "Helping clients improve th...

XML textarea validation bookmarklet

Jesse Ruderman's Blogidate bookmarklets cycle through all of the textareas on the current page and submit their contents for validation. I suggested an alternative approach, and to my great delight ha...

18th August 2003

3 column CSS layouts: Easier than you might think

In a recent issue of the Sitepoint Tech Times newsletter, Kevin Yank explains (in detail, with pictures) the recurring problem in CSS of trying to create a three column layout with columns of equal he...

5th August 2003

A better image replacement technique

Over on Kryogenix, Stuart has solved the CSS image replacement problem with some clever application of the overflow: hidden; property. The Fahrner Image Replacement technique is often used to replace ...

3rd August 2003

XHTML for future-proof content

Don Park questions the benefits of emitting XHTML. In one sense, Don is right; publishing a whole site using XHTML in this day and age brings very little benefit and can cause a great deal of grief. B...

30th July 2003

Superb CSS template/tutorial

I'm not sure how I missed this one. Holly Bergevin's Perched Upon a Lily Pad is a CSS demo that shows off a 3 column layout with a flexible header, full length columns, horizontal navigation bar and c...

28th July 2003

Let's go ::outside

Tom Gilder has started a series of posts looking ahead to CSS3. In his first installment, he describes the awesomely powerful ::outside pseudo-element. Using this, CSS3 authors can apply multiple back...

24th July 2003

More CSS tips and tricks

Lachlan Cannon shows off some neat tricks for styling forms with minimal markup on the freshly redesigned illuminosity. I used his CSS for the forms in the comment authentication prototype and it w...

22nd July 2003

A feature request for CSS3

One of the niggles I have with CSS 2 is that I frequently have to define colours multiple times. Consider this blog: I use orange in several places (as a background to the header, a border around the ...

9th July 2003

Adaptive Path Redesign

Doug Bowman and Adaptive Path have launched the redesign of the Adaptive Path site. It's well worth exploring: the site looks gorgeous, and is a great example of best practise structural markup, CSS a...

CSS drop shadows

Yet another groovy CSS demo: Drop shadow effects using only two nested divs and an alpha-transparent PNG. They look passable in IE as well. Another gem from Paul Hammond's link blog. Incidentally, Pau...

6th July 2003

Fixing an IE scrolling glitch

Mike Golding offers a solution to the slightly odd IE bug whereby divs in CSS layout sites suffer glitches as the page is scrolled (from December 2002): The problem is in the way that Internet Ex...

overflow: hidden

I've never really played with the CSS overflow property, partly because I don't trust it to work in a decent number of browsers. Haiko Hebig's Title Pictures show off a clever use for the property to ...

4th July 2003

Reintroducing HTML

Jay Small: Reintroduce yourself to HTML. A call to web authors everywhere to go back to their roots and realise that HTML is not something that should be avoided. He makes some great points, such as t...

Diagonal shapes with CSS

Information on Border Slants (via Paul Hammond). Border slants are the effect whereby diagonal lines can be created using pure CSS, by taking advantage of the fact that thick borders around a box meet...

2nd July 2003

CSS Roundup

SitePoint are running a CSS Design Contest, inspired by the Zen Garden. CSS/Exp is Mark Schenk's collection of CSS experiments which show off some pretty advanced CSS, much of which oonly works i...

25th June 2003

The new RNIB site in CSS

Just to show it can be done, here's the new RNIB site design (as mentioned earlier) re-done with a CSS layout. It's something of a first draft - I've only tested it in IE6 and Firebird on Windows and ...

17th June 2003

HTML Definition Lists

Ben Meadowcroft has a new tutorial up showing how definition lists can be used in semantic markup for lists of definitions, such as glossaries. Definition Lists are the third type of list present i...

15th June 2003

Improving label element discoverability

My good friend Andy is soliciting applications to be his other half via his blog. He's a lovely guy, so go sign up! More importantly, the stylesheet for his romance test includes this gem: label { ...

14th June 2003

The Way Forward

Dave Shea: The Way Forward: HTML will die. Today's internet is obsolete, and anyone still coding in HTML 4 is planning the obsolescence of their own code. The big picture says that if, and this i...

11th June 2003

Eric Meyer Redesigns

Eric Meyer has released a new selection of designs over on Meyerweb. The designs are inspiring, and Eric's CSS is well worth perusing for style tips and insights in to reliable methods of creating rel...

1st June 2003

From HTML to CSS

Tom Gilder: "I did this in HTML, how do I do it in CSS?". A collection of tips for replicating visual formatting effects in old-style HTML with their CSS equivalents. A good resource for people just g...

15th May 2003

CSS2 is five years old

No one appeared to notice, but the CSS2 Recommendation had its five year birthday on Monday the 12th of May. Maybe now people will stop writing it off as a new and unproven technology and start lookin...

8th May 2003

The CSS Zen Garden

This is something we've needed for a long time. The CSS Zen Garden demonstrates CSS as used by graphic designers, and is a truly beautiful sight to behold. It currently showcases 5 radically different...

6th May 2003

Delay to the start of my CSS tutorial series

I still plan to go ahead with a CSS tutorial series, as promised. I'm delaying the start, partly to give myself time to work out a good structure for the series, but mainly because I have a shed load ...

Living on a knife edge

In The XHTML 100, Evan Goer describes an experiment in which he checked 119 site claiming to be with an XHTML doctype for full compliance with the W3C standards. His test consisted of three parts - a ...

5th May 2003

Better structural markup rants

Better structural markup rants than mine: Owen Briggs' classic Design Rant and Craig Saila's Tables or CSS? Choosing a Layout. Incidentally, my rant has sparked some excellent feedback in the comments...

4th May 2003

Defending Structural Markup

I've been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I've been using CSS for long enough now that I'd started to ...

28th April 2003

CSS Headings

Via Craig Saila, Christopher Schmitt's 50 CSS Headings. Free CSS code snippets is definitely an idea who's time has come - there are hundreds of copy-and-paste javascript sites out there but hardly an...

25th April 2003

position:fixed in IE, no Javascript required

Via Craig Saila, a method for getting IE to apply position: fixed without resorting to Javascript. It uses a conditional comment (slightly ugly but perfectly valid HTML) and works a treat. Kudos to Er...

23rd April 2003

Show Computed Styles (yet again)

By jove I think they've cracked it: Show applicable styles from Stuart and List computed (cascaded) styles from Pixy. Talk about being spoiled for choice :)...

21st April 2003

CSS Feedback

My rambling post on CSS yesterday has had some excellent feedback, including some insightful comments on the weaknesses of CSS layouts. My call for a new bookmarklet drew responses (and implementation...

20th April 2003

Flamin' CSS

Dave Winer, in a follow up to his recent CSS problems: I used to work reasonably well with designers until CSS came along. Now my writing is supposed to be a soldier in the fight for Web "standar...

13th April 2003

CSS Layout Generators

A tool for generating 3 column CSS layouts that appears to use Big John's Source Ordered Columns technique. CSS generating tools are a thoroughly excellent idea and I'm surprised no one has done one b...

12th April 2003

Yahoo Search uses CSS

In all the fuss about Yahoo's new search interface over the past few days, the extensive use of CSS in the results pages was almost completely overlooked, probably because the page still contains a sm...

11th April 2003

CSS Support Charts

Time to update bookmarks: The Web Review CSS Support Charts, which went offline several weeks ago, are back at a new home on Netscape DevEdge. Despite not having been signiicantly updated since 2001 t...

10th April 2003

Isolating Crashing Bugs

CodeBitch's tips on isolating "crashing" bugs in CSS are mostly common sense, but are well worth reading in any case. Her methods could easily be adapted to help track down less serious bugs as well....

9th April 2003

IE6, italics and horizontal scrollbars

And the prize for freakiest CSS bug in the universe goes to... IE6! I was having a problem with the new design and a horizontal scrollbar occuring in IE6 for no readily apparent reason (the same bug h...

Half Hour Redesign

Redesigned. CSS changes only, took less than half an hour thanks to the zap style sheets, test styles and ancestors bookmarklets. I'm feeling orange :) I've tested it in Phoenix, IE6 and Opera 7 on...

8th April 2003

XHTML Tips

Via the XHTML-L mailing list, Simon St.Laurent's XHTML tips archive. An abundance of useful XHTML related information....

6th April 2003

Lots and lots of CSS buttons

The alternative W3C buttons on AntiPixel are great. Jamie Zawinsky suggested recreating them in CSS. Stuart Langridge, Marek Prokop, Nick Boalch and Eric Meyer all had a go. Eric even did the Raging ...

5th April 2003

Absolute positioning on the wiki

I've put together some notes on constructing CSS layouts using absolute positioning over on the css-discuss Wiki. If you have any suggestions or improvements, just make them :)...

3rd April 2003

Three column layouts in CSS

ThreeColumnLayouts in the css-discuss Wiki currently lists 24 freely available three column CSS layout templates....

css-discuss archives back online

After several months spent offline, the css-discuss archives are back and better than ever thanks to the hard work of my colleagues at Incutio. As well as updating the archives with all of the missing...

1st April 2003

Tables are the new black

Gotta dig Sam's retro redesign, nested tables galore ;)...

31st March 2003

I can't believe its not a table

Via Craig, Big John's new CSS layout "I can't believe it's not a table!". I've played with the key concept of this before: using a background-left image on the body and a background-right on an all-en...

Sitepoint XHTML tutorial

SitePoint are running an excellent new tutorial series: XHTML Web Design for Beginners. There's little there for non-beginnners, but I'll certainly be sending new learners in that direction....

29th March 2003

Smarter CSS positioning

Daniel Glazman's proposal for smarter positioning in CSS (see also this blog entry) makes a lot of sense....

18th March 2003

Haunted by old hacks

Paul Hammond is seeking the perfect way of marking up code snippets. He examines several methods, including this interesting specimen: <ol class="codeListing"> <li><code>…<...

9th March 2003

Replacing text with images

Douglas Bowman writes about Guiltless Image Use, describing a technique that uses CSS to cause text to vanish from the page, then replaces it with a background-image. I experimented with this techniqu...

25th February 2003

Doing forms justice

Dan Loda: Doing forms justice. A demonstration of how labels, accesskeys, fieldsets and CSS can make a form that's usable, accessible and looks great. He even uses an optgroup in a select box, an ele...

23rd February 2003

Slow professional suicide

Al Sparber makes perfect sense in article from June last year: There's nothing inherently wrong with using tables to layout a web page. They are great for rapidly deployment sites for clients who...

11th February 2003

Label elements

Peter Van Djick asks why does hardly anyone use LABEL tags? It's a very good question - in my opinion label tags, like title attributes on links, are a complete no-brainer. They're well supported by a...

5th February 2003

Zeldman and definition lists

I'm really liking Jeffrey Zeldman's latest redesign. Aside from a pretty face, the markup holds some interesting ideas as well. For example, I've never seen a definition list used for a blogroll style...

28th January 2003

More markovers

Other weblogs.com remakes: (via Scripting News): Gary Taylor, Dave Polaschek, Douglas Bowman. Doug's is particularly impressive, featuring an almost pixel perfect recreation of the original page with ...

Weblogs.com table using floats

I've knocked up another attempt at Weblogs.com in CSS, this time using floats instead of absolute/relative positioning. It seems to work pretty well....

Weblogs markover

Also, I know it isn't what Dave was after but I've recreated the front page of Weblogs.com in structural/semantic XHTML and CSS as well. Again, it works fine in Phoenix and IE 6 but probably needs a f...

Weblogs table as an ordered list

Dave Winer: A question for CSS design gurus. What's the best you can do with a table that has three columns like the one on Weblogs.Com. Let's see an example. I'd like the page to look good and l...

21st January 2003

More body ID fun

Scott Andrew points out another smart trick with body tag ID attributes - selectively showing and hiding navigation elements depending on the current page. This is a really neat idea, but it does lead...

20th January 2003

Stylesheet parsing gets complicated

Craig Saila points to the SearchEngineWatch Webpage Size Checker. It's a nice tool, but it doesn't appear to take the size of linked style sheets in to account. I was playing around with the idea of a...

16th January 2003

Fun with body IDs

Mark has hit on the clever idea of using the body tag's id attribute to apply different styles to different pages all from the same stylesheet. The technique is very neat, but it would be even neater ...

11th January 2003

Safari conditional comments

The current extended discussion over whether or not Safari should have some kind of specific CSS blocking technique built in (sparked off by Mark Pilgrim) reminds me of a relatively unpublicised featu...

7th January 2003

Vertical centering with CSS

Lots of people said it couldn't be done (myself included), but evidently we were wrong. Joe Gillespie shows how to achieve vertical centering with CSS in the latest edition of WPDFD. Via Craig Saila, ...

6th January 2003

XHTML is just fine

In Who dropped the deat cat into the well? (via Mark Pilgrim), Brian Donovan argues that keeping web site content in (X)HTML is a fundamentally bad idea. I thoroughly disagree. When I started this web...

19th December 2002

Tantek's markup challenge

In A Touch of Class, Tantek continues his series of tips on writing better semantic markup and then issues a challenge: find related improvements that can be made to his blog. I couldn't find anything...

Creative Commons copyright link

It's great to see the Creative Commons getting an overwhelmingly positive reception - as Lessig says on his blog, 'Tis the season to be giving, and this will be a great gift to the Commons. If you hav...

4th December 2002

Taking a break

Coursework continues, but I'm taking a quick break to blog the fact that Tony Bowden has changed the CSS style for blockquotes on Understanding Nothing. This may not be earth shattering news, but con...

29th November 2002

rel="bookmark"

Mental note: add the rel="bookmark" attribute to my permalinks, as recommended by Tantek. I'd never realised the rel attribute could be applied to normal hyperlinks....

28th November 2002

Syndication is not publication

Mark Pilgrim pretty much single handedly killed the discussion thread on syndicating weblog content with XHTML started a few days ago by Anil Dash. Stuart's reply to Mark's post is definitely worth a ...

24th November 2002

CSS filter guide

Spotted on the Web Manager's Weblog, centricle : css filters is a list of all of the current CSS browser hiding techniques (all 17 of them!) along with a table showing which hack will hide things from...

Polluting the web

Hixie and Aaron Swartz are debating Hixie's infamous Sending XHTML as text/html Considered Harmful on a W3C mailing list. While I am just as guilty of sending XHTML as text/html as anyone else (I've b...

21st November 2002

Different browsers different DOMs

Hixie has put together a fascinating article describing how the Mozilla, Opera 7 beta and IE6 DOMs deal with incorrectly nested HTML tags. Internet Explorer goes as far as creating a malformed tree ju...

20th November 2002

OmniWeb CSS hack

The hack we've all been waiting for: How to hide CSS from OmniWeb. OmniWeb is a Mac browser which understands the @import rule but horribly mangles CSS layouts beyond all repair. Thanks to this hack C...

12th November 2002

DOM inspector tutorial

An Introduction to the DOM Inspector (via Scott Andrew). The DOM inspector is a powerful but little-known tool that comes packaged with Mozilla and can be used to interactively browse through the DOM ...

7th November 2002

aqTree 3

Stuart has released aqTree3, an upgrade to previous aqTree versions which takes in to account some of the best ideas from both Eric Meyer's pure CSS menus and Dave Lindquist's recently released drop-d...

6th November 2002

Funky new use for CSS backgrounds

Jeffrey Zeldman points to the newly redesigned v-2 Organisation site, which features a clever technique whereby a large background image is displayed "widescreen" style with different amounts of the p...

Girlfriend as a case study

I've been helping my girlfriend recreate her site using CSS and structural markup. She's new to web design and has been taking to CSS like a duck to water - as a veteran of Microsoft Word globally def...

3rd November 2002

Inline XML

Inline XML explains how different XML languages can be embedded in XHTML documents using namespaces, and how they can then by styled using CSS....

2nd November 2002

Joe Gillespie does CSS

Joe Gillespie has been introducing CSS to the readers of Web Page Design for Designers. CSS Positioning - How the browsers cope (from September) discusses browser support and explains Joe's exper...

31st October 2002

RSS validator uses my CSS

I just noticed that the RSS validator is using my numbered code listing CSS experiment :)...

CSS roundup

Jeffrey Zeldman has resolved his niggling CSS bugs, and posted the workarounds for all to see. What's amazing and unprecedented about CSS layout is that it's completely abstracted from the data it pre...

30th October 2002

Trade by Bumbers

Craig Saila has launched his latest project, Trade by Numbers, which uses valid code and (Netscape 4 friendly) CSS for layout. The CSS code is worth looking over for the intelligent use of browser hac...

28th October 2002

Apple Internet Developer

Apple have an excellent site called Internet Developer, with articles covering a wide range of web development topics from HTML and CSS right through to Using SOAP with PHP....

24th October 2002

Tweaking sites for readability

Jeffrey Zeldman's new design continues to develop, but remains virtually unreadable on my monitor (without extensive tweaking of the settings). I'm not griping though as this was an ideal opportunity ...

23rd October 2002

The Web Style Guide

Spotted in Ordinary Life's new bookmarks, the Web Style Guide is a full online book covering all kinds of different aspects of web design. I've only glanced through it so far but it appears to have so...

CSS short hand

Introduction to CSS shorthand properties (via webgraphics, via Glish)....

21st October 2002

More CSS layouts

I'm not sure when it happened, but Opera.com has been redesigned (since the last time I checked the site). The new layout is done with valid XHTML and CSS but is decidedly tabular in appearance, demon...

17th October 2002

Tricking browsers and hiding styles

Eric Meyer on CSS: Tricking Browsers and Hiding Styles. This bonus chapter which was not included in the book explains the various techniques that can be used to hide CSS rules from browsers, includin...

12th October 2002

Dave on tag soup

Dave Winer: What is Tag Soup? They've already lost the argument. The Web is tag soup. People use blockquotes to indent. Even though the REST folk argue that it's anti-Web to do RPC, people do RPC...

11th October 2002

Wired Redesigns

Wired have redesigned, and now boast one of the snazziest CSS layouts on the web. The redesign is explained in A Site for Your Eyes, and has already drawn commentary from Jeffrey Zeldman and Mark Pilg...

The css-discuss Wiki is now live

The css-discuss wiki has finally gone live to the public. Here's my message to the mailing list announcing the launch....

7th October 2002

Eric has permalinks

Eric Meyer now has permalinks! Now if he would only start pinging weblogs.com when he updated I (and many others) could add him to their blo.gs-powered blogroll. The other day I complained about KP...

3rd October 2002

Sidekick suck

Leonard Lin has a new HipTop - a hand-held wireless device for browsing the internet. His description of how well different sites work in the device makes for depressing reading. Blogs constructed wit...

2nd October 2002

Newspaper sites and the link element

Adrian Holovaty advocates the usage of next/previous link elements on newspaper sites to add optional linear navigation. His comments include some interesting discussions on whether or not this featur...

30th September 2002

Taming lists

In CSS Design: Taming Lists, Mark Newhouse explains in detail every CSS list trick in the book, including inline lists, nested breadcrumbs and a variety of other useful techniques. He also links to Er...

CSS in the real world

Adrian Holovaty: CSS in the real world. Adrian uses CSS to reduce the markup for a list of news headlines by 75%: Which code would you rather work in when there are four breaking news stories on th...

25th September 2002

Deng - HTML rendering in Flash

DENG (via WaSP) is a W3C compliant XHTML/CSS/XForms rendering engine written entirely in Flash MX Actionscript. Updated 27th July 2006: Link no longer points at a domain squatter....

Fluid thinking

Peter-Paul Koch explains graceful degradation in Fluid Thinking: Think fluid. The WWW isn't a fixed medium. It's unpredictable. It will do unexpected things to your site, and the best you can do ...

17th September 2002

Returning

Cameron Barrett is back from Russia and brings photos. Scott Andrew is back from his summer vacation and brings CSS tips. I am back at University and stuck without bandwidth for the next few weeks....

13th September 2002

More thoughs on Flash editors

Flash Voodoo's Battle of the Flash Text Editor Components (via Jeremy Allaire) is interesting - the editors are all good, but they all suffer from the same problem in that the code they generate is pr...

12th September 2002

The float label bug

Strange Mozilla bug: In some versions of Mozilla / Netscape 6+ <label> elements that have a float applied to them will vanish. Tom Gilder's test case can be viewed here. I tried it in Mozilla 1....

Randal Rust on accessibility

Randal Rust has posted an updated version of his excellent CSS forms demo. While exploring Randal's site I stumbled across ALPHABET SOUP: A web designer's journey to standards and accessibility, an ex...

11th September 2002

Disable CSS bookmarklet

A handy bookmarklet courtesy of Rick on the MACCAWS mailing list: 0){cs=!document.styleSheets[0].disabled;for(i=0;i<document.styleSheets.length;i++) document.styleSheets[i].disabled=cs;};void(cs...

10th September 2002

Hixie on XHTML

Ian Hickson: Sending XHTML as text/html Considered Harmful. Ian makes an excellent case for sticking with HTML 4.01 rather than upgrading to XHTML. Here's the killer point (at least for me): Document...

4th September 2002

The css-discuss Wiki

The css-discuss Wiki has gone live - but only to list members. If you are on the list you will have received an email with instructions for accessing it. The Wiki should go live to non list members in...

3rd September 2002

Fixing IE6

Jeffrey Zeldman on fixing A List Apart for IE6: MSIE6 has trouble calculating the heights of block level elements. Eddie Traversa discovered the browser was caching the values it calculated on one ...

31st August 2002

External link icons in CSS

Stuart has put together a nice demonstration of how Mozilla's CSS3 selectors can be used to automatically add icons to external links, in response to Mark Pilgrim's guide to achieving the same effect ...

30th August 2002

Zeldman gems

Two gems from Jeffrey Zeldman: Show, don’t sell and Table Layouts, Revisited. An extract from the former:Take credit for what CSS has done. Don’t say: "Web standards did this." Do say: "We’ve se...

17th August 2002

CSS image rollovers

CSS Image Rollovers describes a brilliantly simple technique for creating the effect of an image rollover using only one image and no javascript. The effect works by creating a gif with a transparent ...

16th August 2002

Fiendish markup quiz

Hixie has posed a fiendish markup quiz - spot the four markup errors in a document that validates. It's harder than it sounds. I've mailed off my answers, but I'm not expecting to get full marks. U...

css-discuss rocks

css-discuss has seen some interesting threads in the past 24 hours and the new archive means I can link straight to them - so here goes. Kentaro Kaji kicked off the topic of techniques for aligning an...

15th August 2002

PHP numbered code listings

Michael V has written a couple of functions to apply my CSS numbered code listing technique to PHP's built in syntax highlighting....

CSS Trickery

New CSS Experiment: Trickery with Floats and Negative Margins, inspired by this message on css-discuss. By applying both position: relative and a negative margin to a floated element it is possible to...

14th August 2002

Alchemist contest

AlltheWeb.com introduced an innovative feature called Alchemist a while ago which allows visitors to customise the site by specifying the URL to their own style sheet. They have now announced a CSS de...

SitePoint CSS experiment

SitePoint are trialling a new design for their front page. For fun, I had a go at recreating the new design using structural XHTML and CSS. The result isn't my normal style (I normally avoid fixed pix...

Tidakada

Spotted in my referrals: tidak ada, a beautifully designed blog covering web development and other related topics. This is another great example of what you can achieve with some creative CSS....

12th August 2002

Archivist goes live

After a successful private beta, the new searchable css-discuss archive is ready for use by the general public. If you spot any bugs or have any suggestions for improving the archive please drop me a ...

11th August 2002

Benefits of XHTML

Phil Ringnalda is questioning the point of XHTML. The single, huge advantage it has over HTML is that XHTML can be parsed by anything (or any language) with an XML parser. As an example, a few weeks a...

7th August 2002

Funky stuff for css-discuss

I think I've kept quiet for long enough, so here are some details of the two projects I have alluded to. The first is a database driven mailing list archive for css-discuss. It has just gone in to pri...

XHTML 2 demonstrated

Sjoerd Visscher has published an XHTML 2.0 page that works in IE6, Mozilla and Opera, complete with support for navigation lists and href attributes on multiple elements. The implementation is very cl...

6th August 2002

More CSS

Two more interesting CSS demonstrations - Bullet proof rounded corners and Breadcrumb nested lists. The rounded corners technique is very impressive - it solves a common CSS problem in a way that is d...

More on XHTML

A few more notes on XHTML 2.0. Tom Gilder (who incidentally has written an excellent series of tips on accessible scripting) has pointed out that the <dfn> tag is part of HTML4 and corrected my ...

XHTML 2

The W3C have published a working draught of XHTML 2.0. Since the Changes from XHTML 1.1 pages doesn't appear to have been written yet, here are a few of the most notable differences I've spotted so fa...

5th August 2002

So it does have a use after all

text-decoration: blink spotted in the wild!. Seeing as Hixie so eloquently argued for its inclusion in Mozilla in the first place it's nice to see this most vital of CSS properties being put to some u...

Impressive CSS

Take a look at this page in Mozilla, view the source code and ask yourself "how on earth did he do that?". It appears to involve very creative use of borders, possibly relating to the fact that a sing...

4th August 2002

First impressions

I'm slowly working my way through both Eric Meyer on CSS and CSS: Separating Content From Presentation. Initial impressions are that they were well worth the money - the two books complement each othe...

2nd August 2002

Don't expect to hear much from me for a while

My Amazon order has arrived....

1st August 2002

Real World Style

Real World Style: These techniques work. I know, because I use them every day in my real world job. Mark Newhouse provides a whole site dedicated to CSS tips, tricks and full blown public domain layou...

Ooooooooooh

placenamehere.com: Chris Casciano's Digital Playground. I love this design - Chris uses beautiful black and white photos for page backgrounds and carefully positions the main navigational element on e...

LUMS in CSS

I've been messing around with CSS today, trying to convert this page to use standards compliant CSS and XHTML while keeping the overall look and feel. My efforts so far can be seen here - I've knocked...

CSS selectors tutorial

Since it took me a while to find this page today, here is it for future reference. Westciv's Guide to CSS Selectors is an excellent explanation of selectors, a key element of CSS. A good understandin...

31st July 2002

The CSS bug ring

Killer CSS link: Position Is Everything, part of the CSS bug ring. Big John on CSS-Discuss is probably the single most helpful individual I have ever encountered on a mailing list - he explains the mo...

29th July 2002

XHTML 1.1 Woes

Tim Luoma on thelist poined out this table, which details the media types that can be used when serving XHTML documents. The table shows that XHTML 1.1 should not be served with a text/html Content-Ty...

28th July 2002

XHTML ODP attribution

The ODP require you to display an attribution on any page that reuses ODP data. The recommended attribution fails to validate as XHTML, so I created an XHTML compliant alternative which looks visually...

23rd July 2002

Evil but sometimes unavoidable

I've seen a few questions on various forums and mailing lists asking if there is a way of using target="blank" on links in XHTML Strict without running in to a validation error. I've put together an e...

22nd July 2002

Useful tips from Craig Saila

Craig Saila's Web Building Tips include all kinds of frequently asked but infrequently answered questions relating to various areas (mostly client side) of web design and development. The rest of the ...

Lycos tip the balance

Fantastic news for the web standards movement: Lycos Europe goes XHTML and CSS for layout (via Zeldman and the W3C evangelism mailing list). The new layout can be seen here - at the time of writing it...

Floats clarified

Floats, an alternative perspective. A useful overview of how CSS floats should work based on the specification....

CSS books galore

I've placed an order on Amazon for both Cascading Stylesheets: Seperating Content from Presentation and Eric Meyer on CSS. I'll probably post a side-by-side comparison of the two books in a few weeks ...

17th July 2002

Positioning tips

If you're still struggling to get to grips with CSS layout techniques (heaven knows I am) Dorothea's latest will teach you more in a single post than many lengthy tutorials do in their entirety. Float...

16th July 2002

CSS could be so much more

Stuart Langridge discusses the nature of minimalism and CSS design, following a post by Sarabian. Stuart wonders if the current trend for relatively plain site designs is an interim period while we fi...

Dashes and hyphens

Dashes and hyphens in HTML....

Accessible headers

Mark's latest accessibility tip concerns header tags (<h1> through <h6>). Mark explains that using headers in the right order helps screen readers to interpret the structure of your pages,...

More CSS demos

Chris Smith has an interesting set of CSS demos, including some attractive CSS buttons and an excellent example of a more complex layout. There's a lot of interesting creative work going on with CSS a...

Fun with <link>

Things I learnt today part two: The <link> tag is fun. I've been building support for it in to IncDirectory (not long now) - it took a while to find the necessary background information but Mark...

XHTML nested lists

Things I learnt today part one: Nested lists in XHTML are possible, but you can't just put a list inside another list. You have to nest the nested list in a list item. References: W3Schools XHTML diff...

Pretty link on Kottke

In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than th...

15th July 2002

Accessible fonts

Mark has out-done himself today with his long awaited coverage of relative font sizes. This is a notoriously tough topic (thanks to a whole bunch of strange CSS bugs and browser differences) but Mark ...

14th July 2002

An excellent rant

Lobowalk is a "somewhat daily" blog that has just made the transition to using CSS for layout. The decision to go CSS was accompanied by an excellent rant:Why am I doing this? Because right now the we...

10th July 2002

CSS numbered code listings

I've been experimenting with using CSS and <ol> tags to format code listings, complete with line numbering. Here's what I've got so far: Numbered Code Listing Experiment....

Alt all the way

Mark says that today is the most important day of his whole accessibility series, and who are we to argue? The topic is the alt attribute for images, and the message is simple: Every image should have...

9th July 2002

Rounded corners in CSS

Courtesy of css-discuss: Two examples of expanding boxes in CSS with images in the corners, ideal for that trendy rounded corner effect: One and Two. Mozilla has experimental support for rounded corne...

Accessible lists

Today's tip from Mark informs us that "real" lists are good for accessibility. They are also fantastic for writing maintainable code. Thanks to CSS, a humble unordered list can be transformed with cus...

7th July 2002

Using web widgets wisely

Jodi Bollaert: Using Web widgets wisely. This is first in a two part series explaining the best practise for designing user interfaces using the form elements available in HTML....

5th July 2002

<strong> and <em>

Caveat Lector: <em>, <strong>, and markup assumptions. Dorothea Salo explains these semantic tags, why they exist and when they should be used, and throws in a bit of HTML history as well....

4th July 2002

Useful CSS links

A few useful links spotted on css-discuss: A javascript fix to make IE support the position:fixed CSS property. This is really clever, if a tiny bit jerky. the author has also created several other...

Accessible tables

Mark has been educating us on the accessible way of marking up tables, with particular reference to calendar tables on blogs. My blog doesn't have a calendar (yet, I'm considering adding one) but Mark...

3rd July 2002

Digital Web magazine

The latest issue of Digital Web Magazine is out, and it includes an excellent case study on redesigning a table based layout to use CSS: Web Page Reconstruction with CSS. They also have a review of Er...

2nd July 2002

I want this book

Spotted on MeyerWeb: Eric Meyer on CSS has been released. This is one book I'm really looking forward to getting (at least when I can afford it) - Eric is one of the world's leading authorities on CSS...

25th June 2002

SitePoint CSS guide

SitePoint have a good new article on CSS layout, which includes some useful tips on how to use position: float and position: absolute to create columns on a page, as well as some tips on providing Net...

Dot leaders in CSS

Via Brett Merkey on CSS Discuss: Dot Leaders without Tables. Dot Leaders is a publishing term that describes the rows of dots frequently used in tables of contents to connect a chapter title with its ...

21st June 2002

Presenting your content first

Mark's accessibility tips are getting harder. Today we are advised to Present our main content first in our source code. This benefits both text based browsers and search engines such as Google. Mark ...

18th June 2002

XHTML list

I've signed up for a new mailing list (probably not a good idea, I'm getting over 200 mails a day which isn't much fun on a modem) - XHTML-L, which describes itself as A forum for discussing XHTML iss...

Language tag

Mark Pilgrim's accessiblity series continues: Day 7: Identifying your language. Since I'm using XHTML 1.0 I've changed my opening <html> tag to the following: <html xmlns="http://www.w3.or...

17th June 2002

Amazon with CSS

More CSS layout fun courtesy of Webdesign-L. This time Steve Clay has taken Anil Dash's standards compliant Amazon and reworked it to use CSS for layout. Unfortunately it is likely to be a while befo...

Day 6: Doctypes

Mark Pilgrim starts his series of weblog accessibility tips today with tutorial on adding a doctype to a blog....

Styling <hr>

Interesting thread today on css-discuss about styling <hr> elements. I had tried this before with no luck, but the thread provided some useful tips. Marek Prokop provided this tutorial, and Kevi...

Micah's alternative Yahoo

Micah S Sittig on css-discuss has created an alternative version of the new Yahoo site design using CSS for layout instead of tables. The aim of the excercise was to demonstrate how much code can be s...

16th June 2002

My first XHTML mind bomb

I've been looking at PHP's XML handling functions (in particular the xml_parse() function) and I've suddenly realised the advantages of writing entries in valid XHTML. Before I started this blog one o...

Fixed validation again

The road to validity is frought with peril. I've just fixed another small group of errors that were preventing this page from validating (after spotting the ominous W3C validator in today's user-agent...

15th June 2002

Anil Dash does Amazon

Anil Dash provides a copy of Amazon's home page in HTML 4.0 Transitional, and it validates. Solid proof that you can rewrite a complex ecommerce site in valid HTML, and another victory for the web sta...