Steffen Hi, the name's Steffen and I'm writing about the Web, programming and all those things coming to my mind. Enjoy your stay.

I'm currently working on fabidoo.com - 3D Printing for everyone!

Ellipsis or “truncate with dots” via JavaScript

August 11th, 2007

Internet Explorer comes with a nice CSS feature for truncating text by appending three little dots: text-overflow:ellipsis. Here’s a screen shot:

IE Ellipsis

Unfortunately text-overflow:ellipsis is no standard and not supported by Firefox, Opera, etc. With some JavaScript hacking however you can have something similar to IE ellipsis on all browsers. It even degrades gracefully if JavaScript is disabled.

Read the rest of this entry »

Berlin

May 24th, 2007

Memories. Memories that come into your mind when things happen - reminding you - … Right now my girlfriend is in Berlin and one of my best friends lives in Berlin.

This one is to Andy and Anna - and to New Zealand where I really met both of them the first time.

It’s online since almost six weeks. And I don’t know how long it’ll last… Check it out on last.fm as well - although you’ll only get 30 seconds there…

Oh, and btw. I’m not religious - it’s just the name of the goddess’s child ;-)

Tags: , ,

Align List Items Horizontally with CSS …

May 6th, 2007

… or: “Cross Browser display:inline-block”.

If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get… Here’s an example:

The Problem

Well, yeah… not exactly what you wanted, I guess… It would be nice to have something similar to this:

The Solution

Usually at this point you stop bothering and use a table, right? ;-) But what about liquid layouts? It would be nice to have “something” that can do the trick with a simple unordered list (ul).

Actually, CSS has a solution for this problem: setting the item to display:inline-block will do. There’s just one minor problem. inline-block is currently only supported by Safari and Opera in a usable way. There are workarounds for Internet Explorer and Firefox. The one for Firefox is extremely buggy, especially when it comes to manually setting the width of an item or when wrapped text should be supported.

I combined the workarounds and found a way to deal with fixed widths of items which results in a cross browser solution for the problem. Check out the demo. Read the rest of this entry »

60452