1 eeek, inline styles...

...just kidding actually :)

Here’s yet another reason why inline styles have not been deprecated.

Very neat trick. I wonder how this compares to the other technique of slicing the image into little pieces on-the-fly (performance-wise).

posted at 05:07 am on August 22, 2006 by Justin Perkins

2 The sandbag's height...

...is actually easy to determine: In order to avoid too much div-containers, the height should be at least the font size + line height of the surrounding text. After all, there’s nothing between those lines.

E.g. a font size of 1em and a line height of 1.5 would make a sandbag’s height of 1.5em.

Just my two cents

posted at 05:50 am on August 22, 2006 by Christoph Boecken

3 Example pages too instead of just PHP source?

Is it possible to show the code as it’s delivered to the browser (especially the final version)?

posted at 06:37 am on August 22, 2006 by John Lascurettes

4 Safari fixed?

The problem you mention with Safari is mostly fixed with the latest Webkit, though there’s other problems inherent . I don’t know when Apple plans on releasing Safari with this latest Webkit patch.

posted at 06:47 am on August 22, 2006 by John Lascurettes

6 cleaner markup

How about using ajax to do your sandbagging, keeping the original markup free from all those divs and style attributes?

posted at 08:33 am on August 22, 2006 by Keith Alexander

7 Fun

Interesting. I wonder if it’s possible to do the same but use justified text, so it comes up to the actual edges of the sandbags; I think this would look much nicer. (I will have a go but will have to translate your efforts into ASP first)

posted at 08:33 am on August 22, 2006 by Ian Ferguson

8 Maybe I missed something...

... but you CAN have 1px high DIV’s with no content in IE. IT doesn’t like the block to be empty – however IE is stupid enough to consider a remark as “something” and obey’s the height… For example: This (probably) wont work in IE: <div style=”height: 1px”></div> but this will… <div style=”height: 1px”><!

---

></div>

posted at 08:36 am on August 22, 2006 by Nicholas Thompson

9 SERVER LOAD

How long does this code take to process? Just wondering with it being an interpreted language and if you had maybe 10 images like this on a page, reading each file from disc in order to work this out would take time? Or is this pre-processed?

Nice idea though :)

posted at 09:04 am on August 22, 2006 by Paul Solecki

10 Less inline style is possible

You can shorten the parts: div class=”sandbag-right” style=”background: url(an_image.png) -58px -60px no-repeat; width: 192px;

By adding the parts: background-image: url(an_image.png); background-repeat: no-repeat; height: 30px; to the style-definition for the sandbag-right class in the header.

That will leave the inline style: style=”background-position: -58px -60px; width: 192px;”

And that’s a bit shorter :-)

posted at 09:06 am on August 22, 2006 by Niek Emmen