Archive for the 'XHTML / CSS' Category

Typetester is an awesome tool–a must for XHTML/CSS-heads–created by Marko Dugonjic. Also, make sure you check out his explanation for using the base font/ems approach. Very flexible and smart.

Content with Style: Playing Nice with the Other CSS Kids <- This article has some good ideas for developing in CSS across a team. Some great organizational tips, too. Not too sure about the importing of multiple CSS files into a master CSS file, though.

Other gems this article leads to is some interesting thoughts on creating a standard CSS framework (see previous post) and some tactical stuff, like using "tags" to organize your mondo-biggo CSS files:

• http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
• http://www.contentwithstyle.co.uk/Articles/12/modular-css
• http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html

Wow, I’m becoming quite the XHTML/CSS geek these days, eh?

In this article, the author takes a stab at creating a naming convention for universal web page elements. Ambitious, if not a bit simplistic.

(more…)

This column from PC Magazine is a funny read for us HTML geeks. The author seems to get a few things wrong (or glosses over a few steps in logic), like in his assertion that:

“…CSS’s real benefit was that the layout not only could be changed easily but also could become dynamic: The content is stored in a database and presented as necessary, with instant updates.”

We all know that this really has nothing to do with CSS, but whatever…

If anything, this article underscores the true broken promise of web standards: you still need to pay a design professional oodles of money if you want to do it “right”. CSS for the masses has failed, thus far.

This forum had a post regarding a good cross-browser list style hack that gives one more precise control over custom bullet point graphics. The gist is here:

1. HTML:

• Issue 5 - October 12, 2005
• Issue 4 - August 22, 2005
• Issue 3 - July 27, 2005

2. CSS: (comments added for post)

#newsList ul { /* for positioning and styling preferences */
padding:0;
margin:0;
}

#newsList li a, #newsList li a:visited {
list-style-type:none; /* removes default bullet */
background-image:url(../img/arrow_red.gif);
background-repeat: no-repeat; /* ONE bullet only please */
background-position: 0 .45em; /* .45em from top (vertical) */
padding-left:12px; /* space between bullet and text */
/* styling options below */
line-height:1.5em;
font-weight:bold;
color:#000;
text-decoration:none;
}

Pretty painless and degrades nicely to boot. Noo doot aboot it.