Forum How do I...?

Control spacing between list elements?

jean
I'd like to reduce the amount of vertical white space between list elements. The following has no effect:

li { 
    padding: none;
    margin: none;
}


Any idea what's going wrong?
jean
Ah, the problem was the margins of the P elements inside the LI elements. This works:

li p { 
    margin: 0.1em;
}


But 'margin: none' didn't.
mikeday
Right, 'none' is not a valid value for margin or padding, and will be ignored. Better to use '0'.
jean
mikeday wrote:
Right, 'none' is not a valid value for margin or padding


Aargh :oops:

Is there a way to make Prince complain about CSS errors?

Edited by jean

jean
Anyway, what I really want to do is to display this as a table:

<dl>
  <dt><img src="resources/asset-icon-on.png"></dt>

  <dd>
    <p>Circular shape: On.</p>
  </dd>
  ...
</dl>


with the icon in the first column and the explanation in the second.
Having the icon on a line by itself doesn't look good.
mikeday
You could float the dt to the left, or use "display: table-cell" on the dt and dd, or use table markup, there are a few different ways to do it.
jean
Hey, 'float' works great :) Thank you.

Now I just need to add a class to lists that should be treated this way. I wish I could write a CSS select that selects DT elements which contain SPAN with class 'guiicon'. I.e. to select an ancestor instead of a descendant.
jean
Hmm, this is tricky.

In case someone comes after me .. the DocBook stylesheets don't allow me to add a class on the DL (it is possible for some other elements; search for "propagates" on DocBook XSL Stylesheets User Reference: Parameters ).

I can use the 'list-presentation' processing instruction to make the DocBook stylesheets generate a table for the list (see
Part HTML Processing Instruction Reference ). But this is a list, not a table, so that's ugly. However I think it's the best I can do now.

Without a distinguishing containing class, I can't easily use CSS to style the specific lists, as they're distinguished by a descendant, not an ancestor, of the DT.
mikeday
Right, this would require the hypothetical ":has()" pseudo-class selector. People propose this from time to time, but it hasn't been standardised or implemented yet.