Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

span-6 append-2 colborder

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

span-6 append-2

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

and so our HTML now looks like this:

span-6 colborder

Lorem ipsum dolor sit amet, …

precolborder span-3 last

Lorem ipsum dolor sit amet, …

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.

Social networks

Workgroup list of 3 computers

Now, there’s a happy sight: all 3 main computers at Potting Shed HQ happily talking to one another on the local area network.

The two laptops (Gareth-laptop and Jane-laptop) are both running Windows 7 Release Candidate (build 7100), the desktop (Study) is still running Windows XP SP3.

At first my laptop wouldn’t appear in the list of workgroup PCs on the study PC, and vice versa — although each could ping the other and connect successfully by entering the UNC address (e.g. \\computername\foldername). I wondered if it was an issue with the NodeType setting in the registry.

As soon as I changed the NodeType setting on the XP machine it was picked up on my laptop. It could very well be co-incidence but I’m not complaining.

A reboot of all three PCs certainly didn’t do any harm.

So … I wish I could have categorically reported what I did to make it work, but as with so many things in life it appears that all I had to do was switch it off and switch it back on again.

For humans, I believe, they call that ‘sleep’. I’m retiring to bed now to switch myself off for the duration of the night.

Are you listening Reuben and Joshua? 😉

Dealing with spam

Junk E-mail folder

There’s a really interesting article in this month’s PC Plus magazine about the war against spam which gave me the impetus to try to do something about those annoying spam messages that appear in my inbox with my email address in the ‘from’ field, like this:

123greetings.com [[email protected]]

Anti-spam software

I use Cloudmark Desktop, a spam blocking add-in for Microsoft Outlook 2007. It’s unobtrusive and pretty reliable, eliminating about 99% of all spam that gets delivered to my inbox. (In the last 4 days I’ve received 166 junk mail messages.)

But it has been those last 1% of messages that have been really annoying me these last few weeks, the ones that have been sent out to look as though they have come from my email account.

So I did a bit of investigating and have discovered a way that I can also send those messages to the Junk E-mail folder while retaining those emails that have genuinely been sent my myself (test emails or those that I’ve CC-ed or BCC-ed to myself for archiving purposes).

Outlook rules

Like most email clients Outlook allows you to define rules (sometimes known as filters).

Rules help you manage your e-mail messages by performing actions on messages that match a specific set of conditions. After you create a rule, Microsoft Outlook applies the rule when a message arrives in your Inbox or when you send a message.

1. Rules and Alerts…

In Outlook 2007 you can access the rules wizard by going to Tools > Rules and Alerts…

Outlook rules

Not surprisingly, this brings up the Rules and Alerts window:

Rules and Alerts

2. Email headers

And now for the science bit… It occurred to me that I needed to create a rule that did two things:

  1. Flag any emails that have my email address in the sender’s address.
  2. Check to see if I really did send those or not.

So within any message supposedly sent from myself I needed to look for some kind of unique value that could prove to Outlook that I really did send those emails. For that information I turned to the email headers.

In Outlook 2007 these are located on the Options panel, by clicking the tiny arrow at the bottom right of the panel:

Viewing Internet headers in Outlook 2007

As well as the information that you can immediately read within an email there is a lot of hidden data, known as ‘headers’, also transferred with each email; information such as where the email message was sent from, its return path (where the email should be sent if the recipient presses “Reply”).

Here’s an example from a random item of spam I received yesterday:


X-POP3-From: [email protected]
Return-path: <surveyingxq @rossiter.com>
Envelope-to: [email protected]
Delivery-date: Mon, 12 Oct 2009 13:17:47 +0100
Received: from laubervilliers-000-11-22-33.w444-555.abo.wanadoo.fr ([123.145.156.178]:25793 helo=SpeedTouch.LAN)
by server.mymailhost.co.uk with esmtp (Exim 4.54)
id 1MxJqT-0000Xc-4O
for [email protected]; Mon, 12 Oct 2009 13:17:46 +0100
Received: from 123.145.156.178 by mail.rossiter.com; Mon, 12 Oct 2009 14:17:43 +0100
Message-ID: <[email protected]>
From: "123greetings.com" <gareth @garethjmsaunders.co.uk>
To: </gareth><gareth @garethjmsaunders.co.uk>
Subject: You've received a postcard
Date: Mon, 12 Oct 2009 14:17:43 +0100
MIME-Version: 1.0
Content-Type: multipart/mixed;
boundary="----=_NextPart_000_0006_01CA4B36.00064AD0"
X-Priority: 3
X-MSMail-Priority: Normal
X-Mailer: Microsoft Outlook Express 6.00.2900.2180
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.2180</gareth></surveyingxq>

I can immediately identify a number of values here that prove to me that I didn’t send this email:

  1. The return-path is wrong. It’s not set to my email address. (With some testing, however, I discovered that this isn’t a reliable field to check against as some spammers also populate this with the email address they send the email to, i.e. yours!)
  2. The HELO value is also wrong — “HELO” is the SMTP command that the sending machine uses to identify itself to the receiving machine — it should be set to the network name of my PC, which for arguments’ sake we’ll call ‘GARETH-PC’.
  3. The X-Mailer value is also wrong. I don’t use Microsoft Outlook Express.
  4. I also noticed that this email didn’t have an Organization set in the headers. Now I know that I have set the organization information in my email account, so that’s another value I can check for.

So against any of these four items I can check any message that has been supposedly sent to me and determine whether I really have sent it or not.

3. My rules

So I have built up my rule piece by piece to read:

Apply this rule after the message arrives
with [email protected] in the sender’s address
move it to the Junk E-mail folder
except if the message header contains ‘helo=GARETH-PC’ or ‘my_alternative_isp.com’ or ‘Organization: My organization name’

And that’s it. Remarkably, it seems to work quite effectively. In the last few days that I’ve been using it I’ve had only 1 spam message left in my inbox. Everything else has been suitably and efficiently whisked away to the Junk E-mail folder. Long may that continue.

Fixing Blueprint CSS 0.7.1

Blueprint CSS

Note: Updated Tuesday 24 March 2009 @ 10:00

Blueprint CSS is a CSS framework. The latest version is v.0.8 but a lot of people are still using version 0.7.1, even though there are a number of irregularities in it.

So, this evening I’ve been sifting through the Blueprint CSS version 0.7.1 code and making a few corrections. The bulk of irregularities can be found in the source code (within the /blueprint/src/ folder) and not in the release code (/blueprint/screen.css) but these source files can be very useful so should really be fixed. There is also one error in the ie.css file in both the source and release code.

There may well be other edits, corrections or enhancements that could be made, but these are the obvious ones that I’ve spotted. Note that all line numbers refer to the original, unedited code’s line numbers, i.e. the code in version 0.7.1.

Copy everything

Rather than making changes to the original code, I created a copy of the Blueprint CSS 0.7.1 folder and imaginatively called it Blueprint CSS 0.7.2.

Edit #1: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .pull-6 to .pull-24 are missing from grid.css.

The solution: Replace the following lines of code:

with this code:

Edit #2: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .push-6 to .push-24 are missing from grid.css.

The solution: Replace the following lines of code:

with this code:

Edit #3: /blueprint/src/typography.css

The problem: the .left class has been omitted, which can cause unexpected results.

The solution: Replace the following lines of code:

with this code:

Edit #4: /blueprint/screen.css

The problem: As above, the .left class has been omitted, which can cause unexpected results. Do exactly the same in the release code, i.e.

The solution: Replace the following lines of code:

with this code:

Edit #5: /blueprint/src/typography.css

The problem: the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line. (Thanks to Steve Yorkstone for spotting this one.)

The solution: Replace the following lines of code:

with this code:

Edit #6: /blueprint/screen.css

The problem: As above, the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line.

The solution: Replace the following lines of code:

with this code:

Edit #7: /blueprint/src/ie.css

The problem: Legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column.

The solution: Replace the following lines of code:

with this code:

Edit #8: /blueprint/ie.css

The problem: As above, legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column. Do exactly the same with the release code, i.e.:

The solution: Replace the following lines of code:

with this code:

Changelog

The last thing I do is update the changelog file to record the edits made, and change the version number in screen.css to 0.7.2 so that I know that this is my updated version.

I hope that helps someone.

Updates to version 0.8

I’ll blog later about things I’ve spotted need fixing in version 0.8.

Fixing ActiveSync woes with Outlook 2007

Microsoft ActiveSync

Now here’s a remarkable (even blogable) thing: my slow Windows Mobile to Outlook ActiveSync synchronization woes now appear to be a thing of the past. But not before running into some difficulties.

After I upgraded from Microsoft Outlook 2003 to Microsoft Outlook 2007 ActiveSync point-blank refused to connect to my beloved O2 Xda Orbit.

Not only had I upgraded Outlook itself, I’d also moved from the older “Outlook 97-2002” PST file format to the newer “Outlook 2003-2007” format. I didn’t even realise that I had been working with the older format. That must go back to my upgrade from Outlook 2000 to 2003.

My usual solutions did nothing to help:

  • Remove the Windows Mobile 6 device from the cradle and then reseat it.
  • Reboot the Windows Mobile 6 device.
  • Reboot the Windows XP device.
  • Run scanpst.exe on my Outlook.pst file.

I went for a solution-hunt on Google, and discovered that disabling the advanced nework functionality might just do the trick. And you know what: it did.

What I did

  1. Click Start > Settings
  2. Click on the Connections tab, and you see this:

Windows Mobile 6 Settings

  1. Double-tap the “USB to PC” icon
  2. Now untick the only option available: “Enable advanced network functionality”.
  3. Click OK button (top right).

Windows Mobile 6 USB to PC settings

Now everything seems to be running faster and more responsive on my O2 Xda Orbit (not just connecting to ActiveSync but accessing menus, calendar data, contacts, applications start faster), and it connects to ActiveSync first time, even straight after a system reboot. Previously it would always object, and I’d need to remove it from the cradle and leave it until after the system had completely booted up.

But …

The only thing is that I’m not entirely sure what “advanced network functionality” is. I’m not sure what I’ve disabled, what I’m missing out on … any ideas?