Polymorphism » Design & CSS

Adding borders to Blueprint CSS

Chris Peters — Wed, 22 Sep 2010 00:42:26 +0000

I had a problem when adding vertical borders to my blocks in Blueprint CSS. It kept forcing the last block of the line to the “next line” below the row of blocks. I kept going back and counting up my spans, prepends, and appends, but it took me a while to figure out what the real issue was.

The solution: inspect one of the blocks in the affected row and reduce its padding by the number of pixels needed to fit the borders into that row. I found it helpful to do this to the block with the class of last because that was the easiest to grab from the style sheet.

Here is what one particular block of CSS looked like:

#contact div.last {
	border-right: none;
	width: 228px; /* Reduced by 2px to accommodate 2 vertical borders into the line */
}

This is probably known by anyone with intermediate knowledge of Blueprint, but it is something that I learned today.

Technorati Tags: blueprint, border, ccm, chris peters, clear crystal media, css, design, polymorphism

First step in throwing your XHTML document into Quirks Mode

Chris Peters — Thu, 31 Dec 2009 15:24:38 +0000

A lot of websites pursue XHTML as their document type, which is really cool. But a lot of them end up not validating with one little mistake. Even worse, with this mistake, documents that are made to run in “standards mode” are immediately thrown into quirks mode by browsers because web developers don’t know how to do their jobs.

If you want to author XHTML documents, your DOCTYPE declaration must start on the first character of the first line of the source code. No leading spaces or line breaks.

My favorite is how ASP.NET breaks this by following their practices. Take the example from Wikipedia (which I’ve seen used elsewhere as well):

<%@ Page Language="C#" %>   
 
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

This causes developers to insert 2 line breaks before the DOCTYPE, which is unacceptable if you want to comply with standards.

Because my weapon of choice is CFML, here’s how I handle this situation using and tags in my layout files:

<cfsetting enablecfoutputonly="true">
 
<cfparam name="layout.title" type="string">
<cfparam name="otherParams" default="here">
 
<cfset variablesThatNeedSet = "here">
 
<cfoutput>
<head>
<title>#layout.title#title>
...
head>
 
cfoutput>
 
<cfsetting enablecfoutputonly="false">

Because ColdFusion suppresses output until the opening tag, the DOCTYPE will appear on the first character of the first line, right where it belongs. And browsers will treat the document as standards compliant, not in quirks mode.

Technorati Tags: asp.net, ccm, cfml, chris peters, clear crystal media, ColdFusion, html, polymorphism, quirks mode, railo, standards, standards compliance, web standards, xhtml

Page heading at end of breadcrumbs

Chris Peters — Fri, 16 Oct 2009 11:56:48 +0000

I’ve become a fan lately of a small trend in breadcrumb design. Some sites are starting to put the page’s header (in

) at the end of the list of breadcrumbs. It’s an interesting way to show how the site’s hierarchy leads up to the current page.

On Adobe’s site:

On iLike:

On Google Sites:

Technorati Tags: breadcrumb, breadcrumbs, ccm, chris peters, clear crystal media, css, design, ia, Information Architecture, interface, interfaces, polymorphism, Usability, web design, web development

IE6 helps you see your true colors

Chris Peters — Tue, 13 Oct 2009 22:12:16 +0000

There is much truth in what martinibuster says about designing for IE6 in this Webmaster World discussion:

In my experience, when a site layout was blowing up, it usually took my site designer about an hour or two to fix the error and make the site display well for IE6.

So I am still not convinced that spending an hour, two hours, or even a single day is such a hardship, and less convinced that the minimal time typically required, about the time it takes to eat a sandwich, is going to impact sales to those who use more modern browsers. How could an hour or two spent upgrading a site for IE6 take away from sales? Is that a legitimate reason to throw away 10-15% of web traffic?

As far as the assumption that those who use IE6 don’t have money and correlate to trailer parks, I think there is absolutely no basis for that conclusion. Equally, I believe there is no foundation for believing that those who use modern browsers are more technically savvy.

The question should not be, Do you still design for IE6? The question should be, Why are you throwing away traffic by not designing for IE6?

This got me thinking about some of the assumptions that I’ve made over time. For example, I picture most IE users as grandmothers feebly trying to read the text on their screens. But would you be confident that your VP or CEO would not be the same?

I know of the pain and hardship that Internet Explorer 6 causes. I’m there often. But he has a really good point. Don’t get me wrong. I still look forward to the day that we can bid IE6 adieu.

Technorati Tags: ccm, chris peters, clear crystal media, css, ie6, internet explorer, internet explorer 6, microsoft, msie, polymorphism, web design, windows

Accessible links in printer style sheets

Chris Peters — Thu, 24 Sep 2009 21:14:04 +0000

Eric posted a question in the Wheels Google Group about a strange CSS display problem. What came out of it was a very interesting CSS trick that has a very practical use.

Using some CSS voodoo, you can display a text link’s URL in parenthesis after the link text. This would be very useful for printer style sheets, where you can’t see where the links are pointing when the page is printed out.

Here’s an example of what you’d see on the screen:

I wrote an blog post about printer style sheets a while ago.

And here’s what you’d see on the printed page:

I wrote an blog post about printer stylesheets (http://www.clearcrystalmedia.com/gc/green-printer-style-sheet/) a while ago.

Here’s the CSS code, which I would definitely use some specificity on. (I added a reference to #content as an example of using a selector for specificity. We wouldn’t want to have images in our navigation with parenthesis!)

#content a:after {
    content: " (" attr(href) ")";
}

This trick appears to work in all browsers except for Internet Explorer versions 6 and 7.

Technorati Tags: Accessibility, ccm, chris peters, clear crystal media, css, html, polymorphism, tip, tips, web design