CSS Help Pile » Assorted Goodness.

CSS Hacks and Issues has some interesting suggestions for when you're in a pinch. The reason I'm posting it here is for tip number 4 -- removing dotted links in Firefox.

CSS Documentation Shortcut makes sense of the W3C website and allows easy access to information on CSS properties. You can even just type the property you seek into the url: http://cssdocs.org/position. Very handy.

Going through and fixing sites for IE7 (yes, I know, I put it off too long... but, seriously, I mean try and get excited about new IE, just try... ok, no excuses!) the biggest issue I came to was the clearfix float fixer breaking and *+html not exactly solving the problem. Enter New clearing method needed for IE7 and inline-block to the rescue! Sweet!

(Also, huge thanks to the expertly created and executed stand alone version of IE7 for helping me test the new browser when for some reason MS needed me to install their validation software AGAIN and RESTART because of it even though I went through all that less than a month ago... stupid piece of sh...)

Automatic pullquotes with JavaScript and CSS is a clever way of creating snazzy pullquotes without duplicating text.

From the author of the effect: "This unobtrusive script will throw a drop shadow on any block element with the class highContrast. The result is a hard-edged offset shadow that's not necessarily pretty, but it gets the job done."

P+C DTR with Word Wrapping fixes one of P+C DTR's more annoying limitations by correcting the word wrapping limitation found in the original version.

Great job Joao!

The good people at Eight Media have added yet another flavor of the popular Light Box effect to the pile with Leightbox. Unlike Particle Tree's Lightbox gone wild, Leightbox keeps all the lightboxed markup within the body of the page. Read more about it at the Eight Media blog.

Tags, AJAX, ratings and CSS! SkimCSS makes traversing hundreds of CSS-related articles easy while providing linkage to valuable information. You can even add your own links to the site without having to login. Very cool.

Lightbox JS is a slick little way of popping up an image within a browser window. It uses some JS and CSS to create the effect and I think it would be cool if this could be used for other non-image purposes as well (think about those web-app confirmation boxes and such).

If you're interested in Dynamic Text Replacement -- swapping plain text for images of text (think in terms of using additional fonts without having to resort to PhotoShop) -- you might also be interested in PHP + CSS Dynamic Text Replacement (P+C DTR). P+C DTR is a slightly different take on text replacement that doesn't rely on any JavaScript but does include the ability to "style" your heading text image with a basic style guide to control font-size, color and background-color.

This is a rather alpha-stage experiment, so there are some limitations, but there are a lot of possibilities too.

Dynamic Resolution Dependent Layouts uses a nifty little javascript trick to to hide and realign layout elements based on the size of the browser window. I honestly can't think of how one would use this on a complex site, but I'm sure it could be achieved with careful, thoughtful consideration.

CSS Beauty has remained an excellent source of new CSS and web-releated information. So, it's great to see that with the recent redesign a new section dedicated to CSS and web news has been created. But that's not all, there's also a new CSS Shuffle contest section and a jobs section.

It's great to see such an excellent site expanded with so many great features!

I will probably create an infinite loop by linking to Don't Meet Your Heros - The CSS & Web Standards News Compilation Site. Compiling the best CSS news and resources all one page. but what the hell. DMYH has nice design and it as of 9/28 @ 1:31pm spells CSS Help Pile wrong, you can't beat that.

Also, with the absence of an "about" page, it's up to the individual reader as to why, exactly, they don't want you to meet your hero.

I don't really use dashboard as much as I thought I would but that's because the widgets, for the most part, don't really have any added value what with being tucked away off the main desktop area and all. However, if you're the type who DOES use it, and you want detailed information on all the CSS 1, 2 and 3 properties, then you should check out the SeeSS Dashboard Widget.

The reason I'm linking to a post about a soon to be CSS-based site is:

"Lastly, once Slashdot has successfully been ported to CSS, we'll have a lot more design flexibility. I expect that soon after we'll actually be ready to give the tired old design a facelift. If anyone has ideas, you can start playing with designs today by simply modifying www.slashcode.com's CSS stylesheet. my guess is we'll have a contest similiar to the T-Shirt contest we ran awhile back- users can contribute designs and I'll select from the best a new look for Slashdot."

Maybe you can be the designer for slashdot?

For a while now I've wanted to promote access to the Help Pile's archives. The site search is alright, but if you're not sure of the exact language for a request, that's not very helpful. So, I wanted something that would list all of the help pile's links on one page, grouped by category. It would be easy enough to dump a list of the links, but while working on the redesign of another artypapers' mini-app that stores bookmarks called scribble, I had a better idea: create a scribble page of only Help Pile links.

CSS Help Pile Directory: Scribble View

If you've been following along with the old Help Pile then you already know how to center a table with CSS, how to make a scrollable table with a fixed header and even how to make a snazzy CSS-styled table-based calendar.

But, do you actually know anything about tables? Do you know when you've taken avoiding tables too far? Do you want to read the actual W3C recommendation?

Fortunately for anyone who answered 'no' to the questions above, you can learn more about tables from a standards aware perspective thanks to resources like the Designing Data series (Part 1: Table Structure and Part 2: Adding Style) over at snook.ca. Articles like these are great because they explain the concepts in simple to understand step-by-step language. Who knew learning about colgroup could be so satisfying?

And -- for all you designer types out there -- once you have the basics of the mark-up and styling, veerle.duoh.com has an example of how to make that table data look great, too.

S5: A Simple Standards-Based Slide Show System is a great way to create a simple slide show for your next presentation. S5 is not only standards-based and fully accessible, it also has a small footprint in terms of file size. Another benefit is the ability to easily style your presentations with CSS to fit your tastes and/or particular branding. If you're interested, be sure to check out the introductory slide show for more information as well as a demo of the system.

CSS reboot, a css-specific offshoot of the famed May 1st reboot, was rebooted and all the redesigns are listed and linked. I'm pretty impressed with the quality of some of the sites and the format of the reboot site itself lends well to design browsing. (The site rating feature is pretty slick too.)

Offering short posts on CSS & standards-related design news design.Principles is the latest addition to the CSS Help Pile's resources section. Its most recent post highlights yet another fantasic post from Veerle titled: "2 level horizontal navigation in CSS with images".

via benjaminadam.com

I haven't experimented much with sIFR (Scalable Inman Flash Replacement) but when I do I will be sure to check back on the recently created sIFR Wiki - Documentation and FAQ. If you already have extensive experience with sIFR and would like to share, become an author and help fill out the site.

Andy Budd has amassed a spectacular list of CSS and Web Standards links. The list includes many sites not listed here in the pile, including a link to the MIS Web Design CSS Positioning Properties page -- where the basic building blocks of CSS positioning are explained alongside links to the respective W3C documentation. Andy's list of links is the latest addition to the css help pile's resources list.

I pushed out an update to the old help pile today 'round lunch time. I got tired of the old "I am learning web standards" feel of the place and gave it a "I just washed my face" feel. I plan on pruning things here an there over the course of the next month and will probably reintroduce more artypapers linkage & branding (or totally redesign the whole thing again) as time goes on.

The main reason for the clean up was to get rid of all my crappy, non-specific names for the page elements. So, away went ".indent" to be replaced by "note" or "categories" or whatever. Just before I began work on the side job site, I realized that CSS labels and PHP function names should probably be damn near similar and that I should really pay attention when adding mark-up.

Feel free to drop a note in the comments if you have suggestions or bugs or send me an email if you're so inclined.

Following through on the promise of being more than a CSS Showcase site, Stylegala.com has launched a message board/forum that will likely include links and discussion about the best css resources available on the web. (Wait a sec. Goddamnit!) From where I sit Stylegala is one of the finest CSS and web standards resources out there and so far has promoted really high quality sites -- which leads me to believe the forum could grow into something helpful and informative. I can already think of a few IE bugs I might need solicit help for in the problem solving category...

I caught W3 Planet in the sidelinks of Zeldman's The Daily Report and it sounds like a good idea. Looks like those that put it together gave it a ton of thought and pooled a lot of excellent sites via their RSS feeds (I hope they don't forget to tap into sidelinks!). It's well on its way to become what I had hoped this site would be -- good luck to W3 planet and check on the site often.

In addition to getting my best links from the amazing dezwozhere/blog, I also get quite a few from the Mezzoblue dailies side links. In what I can only assume is a recent expansion of the site's search capabilities, you can now not only dig right in to the amazing content of Mezzoblue, but also the not-to-be-over-looked dailies archive.

An ambitious new project has recently been started by Adam Howell. CSS 1.0 Once-A-Day is a series of write-ups on various aspects of the CSS 1.0 specification. Already known for quality articles on the sites he reviews for The Weekly Standards, he makes the otherwise dry information more palatable for those new to standards-based design. Also new to the recently resigned site is the daily standards, a companion blog. Be sure and read the post about CSS 1.0 Once-A-Day for more information on the project.

via the dezwozhere super css blog

I just gave a really bad presentation. That in and of itself is not news, but the materials I'd put together for the lab were actually pretty good and that might be a shock. So, for you dear help pile visitors, I thought I'd post all that stuffs: CSS Labs: Positioning, floating and an example 2 column site.

The three labs cover the box model, basic positioning and floating, and how all that relates back to a real-world example site. I dunno, I spent an hour or two on it, and thought maybe someone other than the people in the lab could get some help from it.

Special thanks goes to Jon Hicks for letting me use his awesome 3D CSS Box Model diagram.

So, I'm playing with this site's css, in production mode instead of dev mode because my dev environment is, well, lets say it works but it's occupied. Anyways, if you feel so bold as to suggest something, throw it in the comments of this thread or send me an email. I have no definitive plan of where to go next, but I need to get away from the old style 'cuz I'm not sure people noticed a lot of the resources available.

New to the CSS Help Pile's resources page: CSSCreator.com. The CSS Creator site actually delivers on the phrase "links and discussion" where the Help Pile does not. In fact, between the creator site and the exceptional dezwozhere blog, the help pile seems a bit redundant in the larger scheme of things... I may restructure this site to better match my assumptions of how people use the help pile (since I rarely get direct feedback about this site) and to avoid becoming merely an echo. Maybe I'll convert it to the archive and resources pages only? I'm not sure, but things will most likely change or be discontinued.

"This project aims to take the principles of pure CSS design, and apply them to a versatile, standardized HTML template that is flexible enough that people can readily adapt it for use on their websites."

Potentially exponentially useful is beseku.com's excellent XHTML Semantic Validator. This is different than my XHTML checker enforcer thinger (which I updated last night) in that, though they both use the word validator, the beseku sucker takes in a whole site and optimizes it for you, providing tags and styles as output, remarkable.

From the site: "The XHTML Semantic Validator is a system designed to help developers prototype and test URL's to ensure they contain basic accessibility and usability features present in modern web technologies, and automatically implement them if possible."

How did I find this you may ask? From a post by John to the wow-factor forums.

If you run a blog or any site with user-contributed content, if you're worried about the potential for invalid XHTML making its way to your painstakingly formatted code, and if your server runs the PHP the artypapers.com valid xhtml checker might be of interest. Essentially the function takes in a string of XHTML and checks for things like proper nesting and lowercase tags. Currently in use in the css help pile for all comments and posts, it either returns an error for any invalid code or null if everything checks out OK. Additional code could (should?) be added to escape non-ending tags. If you like the code or even if you don't like it and have something better, email me or stick your thoughts in the comments of this thread.

An amazing post at Mezzoblue.com today: A Roadmap to Standards. Once again Dave Shea has gone above and beyond in taking the time to compile this array of information. While the intended audience is for those experienced designers who are new to standards, the lessons are applicable to a far wider audience.

Based on Chicago Web Design's awesome investigative work that led to the tutorial on running multiple versions of IE in Windows, Skyzyx.com has taken the next step of zipping up the modified versions of IE and providing them for easy download. With no installation needed all one needs to do is download and extract the zip of the version you're interested in, then click on iexplore.exe. These are not totally functional versions of the browser, so while you can view your pages with no problems, things like favorites may not work (but you can always store your bookmarks online).