ruzee.com - Steffen Rusitschka

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

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.

(more…)

… 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:

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

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. (more…)

Imagine you have an image on your web page. And you want to crop an area from that image and display it with a given size. And you want to do that, without the server having to do the heavy work. Well then, read on, here’s a solution. (more…)