Please have a look at the following simple example of a custom
bullet-heading-subtitle style (I'm not referring to a LI element):
[IMG] Heading which might wrap
Subtitle which also might wrap
Mocked up here:
This mockup -- in IE5+ PC -- looks pretty much how I want it to, and
behaves, on linewrapping, adequately but not perfectly. My problems are:
1. CSS/HTML elegance.
Is this the best way of doing things? Should the whole unit not be
wrapped in a P or DIV? Should I be using Ps for the heading and
subtitle? Are all my selectors necessary? Could I use just one A tag
wrapping both bullet and heading? Is using a negative margin a good
idea? I'd like to minimise the number of custom class selectors
necessary and maximise use of inheritance from other styles in the site.
2. Improvement in line wrapping.
Currently the text wraps around the bullet arrow. I'd prefer it if both
heading and subtitle maintained the left-hand margin, 10px away from the
arrow, i.e. 33px total.
3. Text positioning relative to the arrow image.
While it's currently acceptable, I'd prefer if the top of the text
aligned perfectly with the top of the image (i.e. shifted up about 3px.)
4. Backwards compatibility.
I'd like this to work reasonably in NN4.x, which it currently doesn't.
At least, the bullet image and heading should sit on the same line. This
I can achieve by adding a redundant align="left" to the image,
unfortunately leaving the subtitle drifting far away. Can I hope for
I'd really appreciate some suggestions. I've tried many approaches, but
they're becoming increasingly random as my hunches fail me.
This message has been checked for all known viruses by UUNET delivered
through the MessageLabs Virus Control Centre. For further information visit