Working Without Annette

So I'm reading the notes on a CSS and XHTML course I'm taking online, kind of a brush-up and a reiteration of those things CSS you might have figured out but haven't thought about for a while. 

I come to a line about "list-style-image." It's the code for putting tiny pictures in the place of bullets in a list. 

It's like the devil was whispering in my ear.

"Do it, Sid. Come on, use that line of code."

It's the curse of web developers everywhere. You've seen the horror of personal websites in which everything but the kitchen sink is thrown in. A weather bot on one side, transparent waves of snowflakes wafting across the home page.

"I've learned something new. I must put it on my website with all the other new things I learned last week, and my web cam pointed at a lizard in a terrarium."

List-style-image is not new, but I don't have a lot of occasion to use picture bullets on our corporate website. All serious, you know.

I probably would have just turned the page, but we have a fairly new and slightly edgy area of our intranet. It has super heroes with our corporate logo, created by my buddy Steven Butler, and it has a list of service principles. 

What does a list of service principles on an edgy site cry out for? Picture bullets!  Especially if, just sitting on your hard drive asking to be used, is an artist's rendering of an exclamation point--already sized to 32 x 32 pixels because it's the favicon. 

If in Japan the hand can be used as a knife, in Adobe a favicon can be converted to a png in a matter of seconds.

What you see

So I went to the WYSIWYG area of the service principles article, switched to the HTML source view and entered the style code, fought with the parser a few seconds and voila - my bullet points were small orange exclamation points.

On my computer. 

I have Internet Explorer 7 and Firefox to name a few of my browsers. I'm a web editor. After about eight years of war, our IT department conceded about a year ago that maybe I ought to have a few more network rights than the average clerical worker.

Everyone else in our sphere has IE 6. IE 6 really hates CSS. 

In IE 6, for some reason, my bulleted list pushed an entire right-hand column where the service principles resided, down under the page's central column.

Oops. Hope no one is looking. 

I excised the code and returned to a traditional bulleted list then popped over to a neighboring office to check the re-set on a computer using IE6.

And the column stayed under the middle column. 

I returned to the WYSIWYG editor and started to tinker with the code a little more. One of the secretaries came in then to show me an invoice. 

"What cost center should this newsletter go to?"

"I don't know. Whatever cost center we used the past 52 times we've done that newsletter."

The service principles disappeared. I wish I could make secretaries go away like that. I had to go find a project manager who had the original copy so I could put them back. (Always save a back up.)

Then the phone rang.

"Hello, Mr. Williams. We need to ask you a few questions so that we can renew your free subscription to Network World. Can you respond to which of the items on this list you might influence the purchase of in the coming year..."

Speaker phone - yes, no, maybe...

Meanwhile back at the train wreck

I cut and pasted from a .pdf to Notepad then to the WYSIWYG editor.

Service principles back in place. 

Column still at bottom of page.

"How many people are in your organization. More or less than one million? Slightly less than one million?"

There are people among those employees who have used the web before, so they are experts on web design, usability, demographics, social media and optimization of all kinds. I was convinced the were looking at the same web page I was trying to fix, while I was trying to fix it. I envisioned them preparing to call to "help" me by telling me an errant column was pushing to the bottom of the intranet microsite home page.

"Really? You don't like that? It's not aesthetically pleasing?" 

I went back to the HTML view and typed the unordered list code in exactly as it is supposed to be. No go.

Ahhh! Ahhh! Ahhh!

I e-mailed the guy who maintains the intranet server. He didn't respond. He's the guy who picked the free, open source content management system we're using. 

I made more adjustments. Nothing.

I tore locks of hair out. I wept. I gave up on pure code, cut the principles from the .pdf again with bullets represented with just text. 

I pasted that into the WYSIWYG window. 

Hit Save.

The column jumped back into place, and I quit playing with the code. Well enough alone and all that.

What's the moral of the story? Don't try new code without a sandbox. Sometimes the absolutely correct code isn't the right thing to do if everybody is using IE 6, I guess.

And don't do things on a whim, no matter how cool they'll look.