Recently in XHTML and CSS Category

For the new site I am working on, I have been working with a new CMS (Content Management System) and as a result of learning about that tool I have learned some new things that I think other web designers will find useful.

I have previously mentioned the Web Developer Tool for Firefox. I recently discovered the Edit CSS feature of this which should be very useful for users who do not edit files on the console like I do. (Do you rebuild the CSS through MT? ARG!)

The feature allows you to easily edit a local copy of a CSS file and see the changes with a quick refresh. When you are satisfied, then you can copy and paste and rebuild.

and if that wasn't cool enough

satzansatz -- About Ingo Chao. It makes me giggle to write something so silly about a person. And I wouldn't call someone I don't know a pervert of any kind except that he says it himself in describing his CSS debugging service:

So far, you were working out the browser-specific problems on your own, read the mailing lists, kept up-to-date with latest bug reports, and searched bugzilla entries.

But why not leave CSS debugging to a man who cultivates this little perversion?

I was attracted to his site and stayed to read about CSS hasLayout which is new to me. It has some information regarding designing for IE browsers, and the difficulty of floats in IE while maintaining cross-browser compatibility. I thought it was very informative. Maybe I am a pervert too.

If you don't get this yet: Content (the words I write, the pictures I show you) should be separate from presentation, or the way a web page is styled to make it appear to the reader.

Ingo also controls the size of his type and lines in his CSS. (i.e. some measure on some other measure like 11/12pt used to be specified for printed type) This is something graphic artists from the "old days" always used to complain about HTML's inability to correctly handle. CSS font specification has become fairly complex compared to what we were doing on the web back in 1995.

Well, I didn't mention it until now, because my own home page broke when IE 7 was released last week. It really fries my chops, because I know of a couple 7 year old sites designed in tables that didn't break. My site is XHTML 1.0 Transitional and it validates, yet when I saw it in IE 7 I wanted to yell! It looked like some avant garde horizontal CSS layout.

The problem is discussed by guys who do this stuff more than I do, and so they should know. It didn't work for me, but I didn't try very hard to make it work either. (These things seem known.)

I was pleased to see this come in my RSS reader today: New Color Scheme Tool - Brainstorms and Raves. Shirley E Kaiser doesn't know it, and I don't know her or I might mention it, but she was one of my motivations for getting involved with blogging.

I'm also a painter and interested in color so I was glad to follow her link to GenoPal, a Windows software tool for making color pallets. There is also a free program called GenoSwatch on the GenoMetri - GenoColor web site .

There are a lot of color pickers available, I have mentioned more and Shirley has a whole page of them. I am not quite sure what they mean when they say "All presently available color tools and rules start with the color of an object or the color of light. GenoColor starts with your mind." (Emphasis added, because that was the part I didn't understand.) I will say that GenoColor does not work like any other color picker tool I have ever worked with, and its worth a look for that reason alone.

At JSW4.NET Internet Hosting Services for Small Business we just finished another web site managed using MT for my friend and picture framing specialist Jeff Risley. Jeff owns Park Row Gallery, and he is having his twentieth year anniversary this year. I used this opportunity to employ MT both in the primary site, and with far less customization in a news site. This lets him manage the content on his site very easily, and gives him an easy way to post regular news items.

David Jacobs made a post on ProNet mailing list this week, pointing us to a page at Type Pad which explains the default HTML template classes and CSS style sheet more clearly on two pages than I have been able to gather working with the stuff for almost a year. TypePad and Movable Type share some HTML and style sheet code in common because they are both products of SixApart.

David also deserves honorable mention for two other features of his blog "hello, typepad". First I though his design was pretty imaginative and quite pleasing while staying well within the original framework of the markup provided by Type Pad (or Movable Type.) The second feature of his blog that really made me smile was the testimonial from his mother, who is also a blogger.

Thanks for the reference David.

If I am lucky, I know just enough about typography to write this article. If the way the article is set appeals to you, you can probably thank your browser, or luck, I am no type expert by any means. I wonder at the artists who create fonts—fontographers and those who know how to use them well—typographers. This post is about how to use certain typographical characters correctly in XHTML documents.

em and en are units of typographical measurement. An em is the size of the letter M. Since type sizes may vary the size of an em is relative to the size of the type. (An em inside of an <h1></h1> is larger than an em in <h2></h2>)

When I first switched to Firefox, one of the things that made me crazy was trying to figure out why my own company home page didn't render exactly as it did in IE. I tried everything and just couldn't resolve some single pixel CSS issues. I decided that rasther than worry about the details, I would fix it in a future release of my site. Most users probably see it in IE, and the Firefox users haven't said anything to me in yet, so maybe they thought it was intentional.

As I write this from Deer Park Alpha 2, I am pleased to report the problem has been resolved. Unfortunately for me, this bit of fourtune comes a bit late as I am about to release a new site where the issue was "worked out". Which is to say, I used a whole different navigation system which doesn't suffer from the same issue.

In case you're wondering, alpha software is in theory even less stable than beta software. It is full of bugs and finding them is part of the purpose of using alpha software. Plus, some of us just like new toys. The weak of heart and those who don't back up their data shouldn't be trying alpha software.

I was researching installation instructions for Movable Type, and I got a little off track. I came across this resource for "Free drop-in styles for Movable Type" over at Style Monkey.

I couldn't easily figure out the monkey's name to give the author credit. If you stop by you may want to wish them encouragement on their impending graduation from college while you grab a style sheet to use with the default Movable Type version 3 templates.

I recommend beginning MT bloggers start out with the default templates. They are a good starting point for semantic markup of entries. You can build templates from scratch as I have several times, but even on those occasions I used snips of code directly from the default templates.

A few weeks ago, I had a discussion with Guy Leo of Galileo IMS, a friend of mine who does some work with the USBSF. We were discussing how to identify an acronym in a press release I was writing. Guy wanted me to do the traditional thing which is to identify the acronym by following it with the expanded phrase immediately following the first use in a document.

As a bit of an HTML prude, I think that's pretty FUBAR, or Fouled Up Beyond All Recognition.

The code looks like this, if you're interested:

<acronym title="HyperText Markup Language">HTML</acronym>

If you're really interested, this tag falls in the category of phrase elements. Phrase elements add structural information to text fragments, according to the documentation.

The other phrase elements are:

• em
• strong
• cite
• dfn
• code
• samp
• kbd
• var
• abbr