Don't stand, don't stand, don't stand so close to me

[venta]

Yet another boring geeky work question.

I have the following html:

<div style="background-color: #C7C7FE;
border-style: solid;
border-color: blue;
border-width: 0.25pt;
padding: 1pt">
<p class="instruction">Get to bed immediately.</p></div>
<div><img src="picture_of_bed.png"></div>

(OK, I've changed some of the text, but the markup's the same.)

Its job is to print "Get to bed immediately" in a nice blue box, and then a picture underneath. Unfortunately, it doesn't look very good because the picture and the blue box are jammed right up against each other instead of having space between.

The html is auto-generated (by and XSLT transform thingy), so it's not something I can do anything about without serious knowledge of XSL stylesheets. However, I could wrap another <div> tag round the <div> that contains the image, and give it some properties which added a little padding... if only I knew what those properties were.

I've tried:

<div style="padding: 1pt">
<div><img src="picture_of_bed.png"></div>
</div>

but that doesn't seem to be the answer. My html skills start to fail after headings and paragraphs, so can anyone suggest a property (or anything else) I might want to investigate ?

Comments

[onebyone.livejournal.com]

Could you wrap a "p" around the "div"?

Failing that, padding and margin are usually appropriate. They do different things, but the difference may not matter in this case. Or border, although this isn't what it's for.

[ewx.livejournal.com]

A div with padding: 1pt does what I'd expect, i.e. introduce a small amount of space above and to the left of the image. padding-top: 1px (or some higher number) is more like what I'd write myself. Perhaps it would help if you posted a screenshot showing what you got and indicating what you'd expected - "doesn't seem to be the answer" is, um, not very specific.

A "div" was an idiot when I was at school.

[metame.livejournal.com]

Don't know at all definitively but it might be worth trying the padding stuff on the image div...

Layout fiddling sucks.

[metame.livejournal.com]

Hmm, re-reading, I may be suggesting the thing you said you explicitly couldn't do, not controlling the XSLT.

You can tell I've finished work for the week and settled into G&T mode.

[broadmeadow.livejournal.com]

Use margin or margin-top etc, eg

<div style=margin:10px><img src...

If you want to do this a lot use a separate style sheet or embed the style for a new class of img. Here is an embedded example:

<style type="text/css"> <!--
  img.spaceypic {
    margin:10px;
  }
} -->
</style>

Then instead of using div and defining the style each time, use

<img class="spaceypic" src...

[broadmeadow.livejournal.com]

Sorry, an extra brace got in there whilst I was transcribing it - the one on the penultimate line of the 2nd code fragment should not be there.

[ewx.livejournal.com]

NB if your screen doesn't have many dots per inch [in reality or in the imagination of your software] then I could well imagine 1pt being rounded down to 0 pixels. Which might be the source of the problem.

[qatsi.livejournal.com]

The 1pt of padding will be inside the blue border ... you probably need a margin, which will be outside it. Full gory explanation here (http://www.w3.org/TR/CSS21/box.html#box-dimensions).

Mind you, as they say, if I were going to the Post Office, I wouldn't start from here. We much prefer ems as the units of measurement, but that's on the desktop. px should produce quite predictable results too, though they don't size well if the user changes the text size; but pt really could be quite device-specific.

[floralaetifica.livejournal.com]

Am on my way out, so haven't looked at this properly, but padding ought to do what you want - but 1pt is an insignificant amount. In fact, I wouldn't personally put it in points at all, but in pixels. 5 or 10, maybe, if you only want a little gap. 'padding: 10px;' will put space all around the image, though - if you only want it at the top then you want 'padding-top: 10px;' or 'padding: 10px 0 0 0;', or if you want it top and bottom but not left and right, then padding: 10px 0;'

[floralaetifica.livejournal.com]

The border's on the div with the text, though - the image is in a separate div.

[venta.livejournal.com]

I did try with the P, but it didn't seem to make any difference. Even though I thought it should. However, what I said originally doesn't work now seems to, so I may just be Wrong. About everything.

[venta.livejournal.com]

A div with padding now does what I'd expect, too. I guess I somehow failed at rebuilding the html when I tried that earlier.

I really must work out how to fix my makefile so that it rebuilds things if the stylesheet has changed instead of just if the XML has changed. Maybe I forgot to touch the XML before building or something.

I think it was more "divvies" round our way.

[onebyone.livejournal.com]

IIRC, add a line:

%.html : stylesheet.xsl

pretty much anywhere in your makefile (maybe not first).

Since there's no tab-indented stuff underneath it, it's not a rule, just a dependency, and it adds to any dependencies elsewhere for the same target. I think. I could be wrong.

[onebyone.livejournal.com]

On the same subject, I generally make any target with non-trivial rules dependent on the makefile itself, as well as any stylesheets, scripts etc used to generate it.