Archive for April, 2007


I read a post in a mailing list today that made me think. I know that the homepages for the big search engines are full of errors. They don’t validate – and it doesn’t matter. They’re not hurting for it. It makes not one iota of difference as far as search engines go whether code validates.

I try (I don’t always succeed, but I always try) to make sure my code is valid for both HTML and CSS. Why do I do this? Because I feel it’s the right thing to do.

I know that there are usually many ways to accomplish the same result when you’re building a web site. I get that, and I like that. But I with my idealist viewpoint believe that there are ways that are more clean, less intrusive, easier to later understand and change than others.

Take for instance CSS hacks. When I first began using CSS heavily, I used hacks. But since I discovered conditional comments, I very rarely use a hack (the last one was about four months ago and specific to Opera). I like conditional comments because they seem to me to be a cleaner, more correct solution than toying with presentational elements in CSS that may later reveal incompatibilities as new browser versions are released (look at the list of CSS hacks that stopped working in IE7).

I met a designer last week whose work I love – he’s a very talented individual and a standards advocate as I am. We were talking about a common issue in CSS and I asked how he got around that – he agreed that conditional comments were the way to go but that he defined them within the stylesheet and not in the actual HTML page. He whipped out his laptop and showed me what he meant.

I looked at the code and thought ‘that’s a hack’ even as he said ‘this is a conditional comment.’ He supposed that a purist wouldn’t agree with his labeling.

I’m a purist. I think hacks are messy, they’re more like bandaids than real solutions. For me, conditional comments are the cleaner fix.

I validate because I care very much that my code is clean. I define clean, in part, as being error-free, and validating helps me accomplish that, most of the time. I know it doesn’t matter to search engines, nor to the vast majority of my clients. But I consider my work as a web designer/developer to be a craft – and it matters to me.

A colleague from the Women Designer’s Group has a great little PHP contact form script posted on her blog. I recently used it for a client with just a bit of easy modification to the CSS styles to make it play nice with the rest of the page.

However, this client needed to have two different emails sent upon submitting the form – two emails with two different headers. Here’s how you take care of that:

Download either script – the Simple one just has name, email and a textarea for comments, while the Complex one has other input elements like radio buttons and dropdown lists. I used the Simple one.

Open up index.php, this is the actual form processing script. Note that what I’m doing here is not the only customization you’ll need to do to use this script! But it’s very well-documented and should make sense to anyone with a smattering of PHP.

Scroll down to the bottom and find this section:

$mailheader = "From: $name < $email>nContent-Type: text/html";

mail("YOUR NAME OR COMPANY NAME HERE","$subject","$message","$mailheader");

The first line pulls the user’s name and email from the form that’s being processed and sets that up as the ‘from’ information for the email that’s coming to you.

The second line is where the email’s actually going – pretty self-explanatory. You enter your company name and email address, and it pulls in the subject (which you’ll define earlier in this script), the message (which includes all the information the user submitted), and the mailheader (the ‘from’ information above).

Pretty simple.

So what happens if you need to send two emails? What if you’d like one email to come to you, but you’d like another to go back to the user who filled out the form?

Not too difficult, really. What you’ll do is create copies of the two lines shown above. We already have ‘$mailheader,’ so just copy that and change it to ‘$mailheader2.’

For $mailheader2, let’s change it so it indicates that it came from your company:

$mailheader2 = "From: YOUR COMPANY NAME \nContent-Type: text/html";

Now copy the ‘mail’ line and we’ll change that like so:

mail("YOUR COMPANY'S VISITOR < $email>","$subject","$message","$mailheader2");

This will send an email with the subject line ‘Your Company’s Visitor’ to the email address entered by the user, the subject line you created earlier in the script, the message containing all the data submitted by the user, and your second mailheader showing your company as the ‘From’ address.

Make sense?

All browsers have built-in, predefined presentational features that apply to the rules we all commonly use. For example, links are blue and underlined by default… Everyone’s seen this.

A colleague pointed me to this interesting post by Eric Meyer  about clearing out all of the default presentational effects that browsers apply to documents with no specific CSS styling. This post in turn refers to Tantek Celik’s post about his file ‘undohtml.css’ that strips out these defaults.

I’ve actually been using most of the elements described in Tantek’s file for quite a while now in the top of all my CSS files – they were collected over the last two years as I ran into problems. But it’s nice to have it in a separate file and more complete than my own version.

Ah, it’s been sooooo busy but I actually took a few minutes to browse this site this morning. There are some good ones on here – check out La Trobe.

Ran across this horror re-cut of Mary Poppins tonight. And quite a while ago, I found this  nicely-done rehashed trailer for The Shining.

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.

© 2012 position: relative; All rights reserved. Powered by WordPress.