Today I’m coding a site that needs little ‘TM’ text attached to all the product names. I wasn’t sure how to do this but Wikipedia to the rescue:

/* keep superscript text from breaking the line-spacing */
#bodyContent sup {
font-size: smaller;
vertical-align: baseline;
position: relative;
bottom: 0.33em;
}

This code plays nicely with FF, IE7 and 6, and Opera.

Today I was working on an ad banner for one of my clients. This banner used a large background image, but they wanted to make a button in the image clickable.

I wasn’t sure how to do this but I found a handy tutorial on A List Apart.

Now I didn’t write this - I’m just summarizing the important points. I’d refer you to the original article for more information, it tells how to make multiple clickable areas on a background image.

In your XHTML file, add in this code:

RitzPix Share Online!

This defines an area ‘button’ that we’ll use for the clickable area and sets its link target. The author used the semantically meaningless ‘i’ tag to wrap it, as I did here (but Wordpress keeps changing it to em’s no matter what - it’s supposed to be ‘i’), but we’ll make that text invisible in just a minute.

Now for the CSS: apply a background image to an element (probably a wrapper or something similar). Then create the ‘button’:

#button a {
position: absolute;
top: 594px;
left: 440px;
height: 26px;
width: 118px;
text-decoration: none;
}

Position it where you want it on the page. Finally, we’ll need to hide the link text (but still provide it for accessibility purposes). This bit of code will make the text within the ‘i’ links invisible:
#menu a i { visibility: hidden; }

And that’s it! This works fine in IE7, IE6, FF, Opera and Netscape.

I was directed to this really nice CSS-based form by a colleague a few weeks ago and I’ve used it in three sites so far. I have in the past built a number of forms but this one looks nicer; I like that it provides an example of just about every type of input field you might need. Highly recommended.

I don’t know about other designers out there, but when one of my clients has someone in-house that’s ‘helping’ with the site or installing backend interfaces and that kind of thing, it just makes me cringe when I get a page back that I carefully put together (indents and all) and find it triple-spaced with a nested table dropped right into the middle of my carefully written CSS.

If I reformat it, sure enough that works like a pheremone to bring the ‘editor’ back for more. Maybe to throw in a few more 3-deep nested tables just for fun.

Call me obsessive, but I like my super-clean, super easy-to-read code. When it gets mutilated even before the site launches, it makes the hair on the back of my neck stand up.

I don’t like to think about what happens to it after I turn it over to them. That’s a nightmare I choose to avoid.