[thelist] CSS Help

M. Seyon evoltlist at delime.com
Fri Sep 16 23:00:53 CDT 2005

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
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 

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


More information about the thelist mailing list