Stop worrying and love CSS

[chipotle]

After a couple weeks of vaguely feinting at Textpattern, a freeware content management system that's somewhere between weblog software and full kitchen-sink style CMSes, I spent most of today beating on its templates and CSS. I've finally managed to get -- well, I don't know if it's what I'll want long-term but it's at least close to what I envisioned. Textpattern (or "TXP" to its friends, which I am not sure I am one of) takes an approach I described to a friend today as "More Modular Than Thou," which is more flexible than a system like Movable Type is (I think I've already done things that would be hard to pull off in MT), but a little difficult to wrap your head around.

Like nearly all of the freeware systems, TXP strives to be chock full of semantic goodness, using XHTML templates and styling everything with CSS. (TXP goes MT and WordPress one better in this respect by having tags which are well-formed XML in their own namespace -- although in practice that's an advantage only in the sense of philosophical purity.) I love CSS. And I hate CSS.

CSS has a reputation for being difficult to use and inconsistent across browsers. Well, it's not too difficult to use, and it's not that inconsistent across browsers anymore. CSS Level 2 has been around five years or so, after all. The problem these days is with -- surprise! -- Internet Explorer, which had buggy CSS support circa 1999, just like everyone else, but unlike everyone else, never had it fixed.

After a great deal of beating things with a stick, I managed to get CSS that looks more or less the same on all the browsers I have access to. The problem is that I don't have access to IE for Windows currently, and IE for Mac doesn't use the same rendering engine. As they say, though, I'll burn that bridge when I come to it. (There's more than a few PCs wandering the house.)

I have one other IE-related bugaboo currently -- the title graphic I'm using is a PNG, and for the view I have in mind, it has to be a PNG because it'll need alpha transparency. Theoretically, there's a way to pummel IE for Windows into displaying that correctly. I suppose I'll find out.

Even so, I think most people will like the design, save for the ones who are going to shake their fingers at me for using a fixed-width page if I go with the look I'm currently sketching out. To those people, I say: kindly put a sock in it. What I have in mind will have a "landscape" image across the top of the page, possibly a fixed one, possibly one that changes based on what the top story is, possibly a randomly-chosen one. (The title graphic overlaps the box for this picture, which is why there's a need for the PNG format.)

This, of course, means I'll need to get an artist who's good with color to come up with something that'd look good in what I believe will be a 720×200 box. The difficulty of that might be a reason to be playing around with other formats (perhaps a front-page image to the right that's in normal portrait orientation, 360×450 or so?).

Now, though, it is well past time for bed.

Comments

[cargoweasel.livejournal.com]

You are SOL using a PNG transparency with IE, without making the user install a plugin, and nobody will install a plugin. Internet Explorer has singlehandedly blocked PNG from popularity by failing to bother to support it.

For CSS tips and tricks I highly recommend alistapart.com.

[citrusmink.livejournal.com]

Owch. I've been wondering for years why PNG wasn't more universal, but now I know why.

[chipotle.livejournal.com]

It seems that IE actually *has* the ability to do this, at least with version 5.5 and higher -- but you need to call it with an ActiveX component as an "alpha transparency filter" rather than displaying your image normally. I found a Javascript code snippet lurking about somewhere that checks to see if you're running IE 5.5 or higher, and if you are, it goes through a Rube Goldberg routine to rewrite image tags for PNG images to call this filter rather than be displayed normally. When I tested it a while ago, it worked, although I'll have to test it again on what i'm doing to make sure I haven't confounded it in some fashion. If this utterly fails, I'll... try something else.

A lot of the CSS quirks I was fighting last night had to do with drawing borders. Among other things, I learned that "border-color: grey" does not work in IE (at least IE on the Mac). That one took a bit to puzzle out.

[shockwave77598.livejournal.com]

Be advised that if your page is IE only, a great number of us won't be able to see it. I use Netscape 7.1 at work and at home, with both laptops running Firefox. My first instinct when encountering a company webpage that wont work with them is to shop elsewhere. I've left many a place that required IE and spent cash with their competitors rather than launch IE and expose my computer to whatever exploit is out that week.

[chipotle.livejournal.com]

I think you missed my complaint -- IE is the one I'm having to design *around,* not the one I'm designing *for.* :) If everyone was using Firefox, Safari or other Mozilla- and KHTML-based browsers, my design work would be a lot easier. The problem is that I can't realistically expect most people not to be using IE, so I have to make sure my designs work there as well.