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