The Cynic Gazette

Internet Explorer 6. I don’t hate it. Yes I do.

Here’s the story of an interesting min-height hack I came upon working with an outside design firm today. Technically it’s an exploit, since it’s exploiting a bug in IE6’s box model, but since we all know what people think when they see “IE6″ and “exploit” in the same sentence, lets just leave ‘er be at “hack.”

When you define the height on a block element, let’s say a DIV, it’s pretty simple:

div { height: 500px }

However, if that div’s content (assuming normal document flow) will run longer than 500px in height, and you haven’t told the DIV what to do with the overflow, the height you’ve defined will act as a minimum height… like the min-height you can’t use since this is IE6.

So there you go. Use min-height in your master CSS document, and use height in your IE6 specific CSS document. Its really that simple.

Tricky, idin’t it

Joisey Mike Design css, html, ie6, web design

Tooltips are helpful in a semantic web world where the use of the “alt” attribute is restricted to those times an image won’t show because you’re  a jerk who fat fingered the image URL.

Lets get right to it since I’m busy as hell today.

The tooltip is a shorthanded way of referring to the title attribute of a link or image (most commonly) though it can be used on other HTML elements. Since we’re all SEO experts around here, we know the only way to fly is to make a link like this:

<a href="link-url.html" title="Descriptive and relevant keyword phrase">revevant text for destination</a>

But what of the cold, huddled masses who shout from the mountain tops “But Cynic, I want a two-line tooltip!” Well, sure. We can do that with Javascript.

1. Parse out and replace text in static tooltip.
2. Write the tooltip with a function

Parse out and replace text in static tooltip

Lets toss a bit of text in our title attribute to tell us where we want our line break. I’m going to pretend I’m on a forum and make a quicktag-looking [br]:

<a href="link-url.html" title="Descriptive and[br]relevant keyword phrase">hi mom</a>

Now we need to create that linefeed. Lets make a function, and pop it into the head tag (or linked .js file).

function makeMyLinefeedReal(imageElement) {
  var titleAttribute;
  titleAttribute = imageElement.title;
  titleAttribute = titleAttribute.replace(/\[br\]/, String.fromCharCode(10));
  imageElement.title = titleAttribute;
}

And finally call it from the element.

<a href=”link-url.html” title=”Descriptive and[br]relevant keyword phrase” onmouseover=”makeMyLinefeedReal(this)>hi mom</a>

Done and done. If you want to get really fancypantsed, you can call this from the BODY’s onload, or document.ready if you’re awesomesauce enough to use jQuery.

Write the tooltip with a function

Keep in mind a web crawler isn’t goin go to see something created with javascript, so sure this next method sparingly–we’re going to write the whole title attribute with Javascript. You get to feel good about having neater HTML, and you can toss “non-intrusive clientside DOM scripting” on your resume.

I’m currently using this for tooltips on a page of pie charts right now for a full-time-jobby-job project which won’t be indexed, and even if it was available to the public, I’m not worried about SEO for the statictical breakdowns on the pie charts; just of the page containing the statistics. (Btw–coming soon: Kickass tutorial on making webtastic pie charts using Adobe Photoshop and Illustrator)

So here’s our tag, with a normal attribute.

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

Our function can now take advantage of an escaped new line, \n, instead of having to mess with String.fromCharCode(10).

function makeMyLinefeed(imageElement) {

  imageElement.title = "This is my title\nAnd this is line 2!";

}

And…

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" onmouseover="makeMyLinefeed(this)"/>

Easy, right? I’ll let you get trickier than a straigh line of text on your own. One more version for you: here’s the non-intrusive javascript version. Start with your tag:

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

And this next line does all the fun stuff without any onmouseover attribute:

document.getElementById("favoritePies").mouseover = function () { this.title = "This is my title\nAnd this is line 2!"; }

So there we go, you have a few different ways to toss a line break into a title attribute. Have fun!

Joisey Mike Design html, javascript, non-intrusive, web development

This comes up a lot in the web development world, especially with higher level coders who are in the Java or .NET world. After just having this coversation with a coworker, I came up with a metaphor to explain the relationship between block and inline elements. A few basics first.

A div is a generic block element with no inherent attributes. By default, it’s as wide as its parent element, and breaks the line. A few common block elements are DIV, P (P is special, we’ll get to that), and BLOCKQUOTE.

A span is a generic inline element with no inherent attributes. By default, it’s as wide as its content, and doesn’t break the line. Some inline elements you’d be used to seeing are the STRONG, EM, SPAN, and STRIKE tags.

To write valid XHTML, you need an understanding of what elements can be properly nested… which is pretty simple. Block elements can be nested in block elements, inline elements can be nested in block or inline elements. Easy peazy. Well, almost.

The exception to this is the P tag, which is a block element, but breaks the rules by only being allowed to contain inline elements. The nesting order DIV DIV P EM STRONG is fine, but DIV P DIV EM STRONG can’t validate because you’re nesting a block element inside the P tag.

Here’s an easy way to remember it. Imagine block elements as pieces of blank paper, and imagine inline elements as ink. You can stack as many pieces of paper as you want on top of each other, and you can contain anything written in pen on the paper. You can use the pen on a few pieces of paper and lay them out on a larger piece of paper, you can underline pen with pen, you can bold text by writing with more pen over the pen. You can’t put paper into the ink… that relationship only goes one way. 

Imagine the P tag is a lined piece of paper. All of the same ink rules apply, but if you try to put more paper into it, you won’t be able to see the lines usefully, so that’s a no-no.

So there you have it. To put it simpler, If you need a container, use a div. If you need to effect these three words, use a span.

Joisey Mike Design, The Internets div, nesting tags, span, XHTML

Logo design is an art form, having to come up with a brand-leading image, while managing not to kill anyone demanding you make the company name “just a bit bigger.” Note: if you can read it, it’s big enough.

Sometimes this art form is embraced and great things happen, like Apple, Nike, IBM, and countless others who have created memorable, eye catching, brand perpetuating logos. You could see a rat trying to gnaw through drywall, and if there was a swoosh, you’d know it was Nike.

But I digress. I’m writing to call attention to some of the worst logos ever created. Here’s a hint: have a teenaged-minded 30-year-old who drinks too much scotch look at your ideas before you put them on a banner.

The first entry is the logo for the Arlington Pediatric Center, which has since changed, but eluded to the possibility of employing Priests as doctors:

Next is the logo that spawned this post when a friend sent it: the logo for the UK’s Office of Government Commerce (OGC). They’ve actually come up with a good looking logo–until you look at it rotated 90 degrees clockwise:

Good stuff. Lets keep rolling on to the logo for the Instituto de Estudos Orientais (Institute for Oriental Studies). This little guy, well, took me a second to see it as anything other than a backdoor entry (it’s a Japanese-looking building with a sun behind it (they claim)):

And finally, my favorite cultural faux pas, assuming that everyone speaks your language in signage:

Note to self: don’t swap a heart for the letter “O” without running it past some international pals first.

Joisey Mike Design, Technology, The Internets bad logo, Design, funny, omg

A bunch of guys at Stanford who’re wearing their smartypants developed Vector Magic (http://vectormagic.stanford.edu/), a tool that vectorizes raster images. Looks like it does great work with logos, and it seems to make images decent, but not perfect. This could be a good timesaved, or maybe a mroe effective way to posterize photography. I think it’s worth a look, and it’s about as bookmarkable as it gets.

For those of us who occasionally have to zip things between Flash, Photoshop and Illustrator, this could be the bee’s knees. Well, what do you know, I happen to have two images just sitting on my desktop… so, hey, lets test the motherfucker!

On Medium:

On High:

All in all, I’m impressed. Trying to detect edges and retrace in illustrator is been the bane of a lot of designers’ existances. I know I really could have used this a few years ago for something that took 2 days to trace with Illustrator. Live and learn.

I think next I’m going to run some Sinfest strips through it to blow up and print out

Joisey Mike Design, Technology Illustratorvector, raster