Take our footer for example, I got to update all of them using the CSS a few times and then we decided we wanted to mix up the HTML. Templates and applications were updated with the new code in phases. There were a few different ways the CSS for this could have been managed but I chose to have the old code co-exist with the new in the same style sheet and differentiated the two with IDs (let’s say I called them #footer and #fatfooter).

We’ve phased in #fatfooter slowly across the 46ish templates, 3 CMSs, and only Brandon knows how many applications with their own code that make up our website.

We should be done now and, unintentionally, I made it easy for us to check. A quick search of the server for id=”footer” turned up all the stragglers.

Some of the stragglers had been neglected for a while and turned out to need more than just a new footer…

So what’s languishing in your code that you can delete?

All the work for the solution was done by Tanfa, who wrote an article on IE Pure CSS Pop Ups Bug, I just thought it was worth mentioning that this bug can be generalized to more than the CSS menus.

Here’s what happened to me:

I had some text inside a link, and I wanted some of it to do one thing when rolled over and some of it to do something else. I marked it up like this:

<div class="promo">
<h3>News</h3>
<a href="link.html">IE has lots of bugs <strong>read more</strong>.</a>
</div>

It’s sort of a solution to the fact that “read more” makes bad link text. Bad. And I don’t write the copy.

Then I tried to style it with something like this:

/*default link behaviour*/
a{
text-decoration:none;
color:#8ec3e2;
}
a:visited{
color:#6d80a8;
}
a:hover{
color:#c1fcff;
}


/* overrides for this element */
.promo a{
color:#000;
}
.promo a:hover{
color:#000;
}
.promo a strong,
.promo a:visited strong{
color:#8ec3e2;
display:block;
}
.promo a:hover strong{
color:#c1fcff;
}

Which did exactly what I wanted it to do… in FireFox but in IE 6 the hover was not displaying properly. After a little tinkering the IE bug alarm bells started going off in the back of my head and Google provided Tanfa’s article on IE Pure CSS Pop Ups Bug in response to my query.

I added float:none to my declaration for .promo a:hover{} and all is now well :)

.promo a:hover{
color:#000;
}

Thank you Tanfa!

I was trying to find out if legend was a required tag in fieldset and I got a tutorial that said not to use legend because Netscape 4 doesn’t support it yet but should soon!

Well, I get my wish. We’re going to take some baby steps towards semantic HTML and CSS (POSH if you like) and despite my aversion to being in charge, I’m leading the project.

As a first step I’m trying to write a CSS coding style guide. I can’t necessarily clean up the current mess but I can try to stop any new ones from being made ;)

What I want to do is develop guidelines for:

• if and how style definitions should be divided between multiple style sheets
• what order style definitions should be listed in (I currently put all my tag definitions at the top of documents and then place my id and class definitions beneath them in the order they’re anticipated to appear on the page)
• naming conventions for ids and classes
• commenting conventions
• what order properties should be arranged within definitions
• if and when we should use shorthand properties
• formatting guidelines

So far my research has turned up very few examples to help me with the development. This somewhat out dated post is the best I’ve found so far. Part of my problem is that searching for a style guide for CSS is just coming up with guides to styling with CSS.

Do you work with a CSS coding style guide or know any good resources for developing one?

I didn’t actually tell anyone at HOPE that I’d done it that way since it doesn’t effect the way the page looks and I figure they’ll discover it for themselves if it’s useful to them. However, my friend thinks I should tell them so they recognize just how good a job I’m doing for them.

I don’t really feel like I did anything other than my job. Isn’t it my job to do a good job?

In the last two weeks of February, CBC’s IDEAS aired a couple programs on the ideas of Richard Sennett, a sociologist and author who has studied the organization of work. Among other things he suggests the Western world is obsessed not with the idea of craftsmanship but with productivity. In other words: it doesn’t matter how well you do you job – just how quickly.

The speaker at my graduation ceremony spoke at length encouraging us to “strive for excellence” in everything we do. Not just in the work we do but also in our interactions as part of our daily lives. From answering a client’s e-mail to cooking dinner, he urged us to do our best.

Is doing a good job something society has to be told to do now?

<a href="http://stephaniehobson.ca/file.php »
?fire=hot&amp;beer=foamy">link</a>

I spotted this little CSS tidbit in a presenter’s code at the Web Directions North conference a few weeks ago and now I’m wondering if this is the sort of thing I missed out on by being self taught:

table
{
border-collapse: collapse;
}

There are quite a few tables I’ve designed where this would have been very useful.