[thelist] CSS Help

[M. Seyon]

Message from ben morrison (9/16/2005 04:14 PM)

> > h2 {
>
> > border-top:1px solid #333;
> > border-bottom:1px solid #333;
> > }
> > Substitute whatever line thickness, style and color you want. No need 
> to use
> > an extra span. If you don't want the borders to exceed the width of the 
> text
> > at all, then just zero out your left and right margins and padding.
> >
>
>Headings are Block level elements the margin/padding will not have the
>desired effect.
>
>Try using an Inline element:
>
>h2 em {padding:5px 0; border-top:1px solid #333;border-bottom:1px solid #333;}

Why not just
h2
{
display: inline;
border-top: 1px solid red;
border-bottom: 1px solid red;
}

?

Are there caveats regarding borders and inline elements?

I can think of one - If your header wraps, it'll look a bit weird.


>You could reduce the typing by inheritance:
>
>p.Caps i {font-weight:bold;color:red;}
>
><p class="Caps"><i>A</i>sthma<i>Q</i>uell</p>

Of course this wouldn't work if you were using the product name in a sentence.


>I tend to use <i> or <b> to apply styles without adding semantic
>structure as in <strong> or <emphasis> is that correct??

It could be argued that AsthmaQuell is being visually bolded to emphasise 
the product name.

I thought first-letter may have been usable in this situation, however a 
quick check of the specs suggests that it may only be used on block level 
elements.
http://www.w3.org/TR/CSS21/selector.html#first-letter

Also, of course, support for this property is spotty at best.

regards.
-marc