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 06: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 06: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 07: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 07: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 09: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 09: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 09: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 10: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 10:06 am on August 22, 2006 by Niek Emmen

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)