On Sun, 27 May 2007, [EMAIL PROTECTED] wrote:
> I had a display that looked like this:
>
> Máiréad is co-composer of the original score for the dance show Invasion.
> -- Choreographed by Stephen C. Scariff and Ronan Morgan.
> -- Music by Máiréad Nesbitt and Tibor Kasza.
> -- Directed by Robert Alföldi.
> Watch this space for tour dates.
The plain text presentation is not sufficient for indicating all aspects
of rendering. Although most features can be inferred from the markup and
CSS code that you specify, it is not clear whether the <br> is meant to
generate an empty line. (In browser practice, it may or it may not.)
> <font class=b2><br><b>Máiréad</b> is co-composer of the original score for
> the dance show <b>Invasion</b>.
> <br>-- Choreographed by Stephen C. Scariff and Ronan Morgan.
> <br>-- Music by Máiréad Nesbitt and Tibor Kasza.
> <br>-- Directed by Robert Alföldi.
> <br>Watch this space for tour dates.
> </font>
Logically, this might perhaps best be marked up as follows. (Many people
would use <p> instead of <div> at least for the first sentence, but that's
debatable logically - a single sentence seldom constitutes a paragraph.
In styling, it would just imply that the element has some default top and
bottom margins that you would remove in CSS, if desired.)
<div class="adv">
<div><strong>Máiréad</strong> is co-composer of the original score for
the dance show <strong>Invasion</strong>.</div>
<ul>
<li>Choreographed by Stephen C. Scariff and Ronan Morgan.</li>
<li>Music by Máiréad Nesbitt and Tibor Kasza.</li>
<li>Directed by Robert Alföldi.</li>
</ul>
<div>Watch this space for tour dates.</div>
</div>
> font.b2{
> color:#000000;
> background:transparent;
> font-size:12px;
> }
- -
> Is there a more suitable method for achieving the same using CSS?
I'm pretty sure that people on this list agree that the <font> markup is
inferior to using CSS. Using my suggested markup, you would use the CSS
rule
.adv { font-size: 12px;
color: #000000;
background: transparent; }
(Of course, there a different views on whether a font size of 12px should
be used, but that's not relevant here. Setting background to transparent
is risky, since due to the effects of other style sheets, the background
that shines through might be different from what you expect. The risk is
small, but it would be safer to set background to a specific color.)
If you want to have an empty line at the start, as the leading <br>
suggests, then you can add
* { line-height: 1.22; }
.adv { margin-top: 1.22em; }
The value 1.22 is just an example here. Note that setting line-height
explicitly for all elements prevents many bugs from biting you. In
particular, if lists are used, it fixes the IE feature that line-height is
larger for <li> elements than for normal text. (The feature might be
desirable in some situations, but not in cases like this.)
The most difficult issue is the list formatting, in particular changing
the list marker from the default bullet to the string "-- ". There
is no direct way to do this, and any approaches have drawbacks: using
generated content fails on IE, using background images fails when images
are not shown. Whether you actually want "--" and not en dash or em dash
is not relevant to this issue; en dash and em dash can of course be
written in HTML as – and — if desired, and they work well
these days.
Thus, if you really want such rendering, the practical approach is to put
the markers into document content proper, as in your markup. Using list
markup, that would mean
<li>-- list item text</li>
and then you would need to use
.adv ul { list-style: none; }
in CSS to suppress the default list marker.
Admittedly, the use of list markup means a little more work than just
using <br> between items, when you really want to _suppress_ any
browser-generated markers. However, should you design e.g. that the items
be slightly indented on the left, list markup would let you do that
directly.
Other issues in list formatting in this case can be handled easily. You
can make the formatting compact (corresponding to the effects of your
markup) as follows:
.adv ul, adv.li { margin: 0; padding: 0; }
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
