the text won't display close to itself, if you know what I mean.
Not entirely, but I'll try to figure it out.
You're looking to reduce the
leading in typographic terms - the vertical spacing between lines. You've actually found the right CSS property for this - [tt]line-height[/tt]:
Code:
.smoothguide9blue {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #0033CC;
[b]line-height: 7px;[/b]
}
The problem is (I think) you're applying this style to an inline element - <span> - which will ignore the line-height property. I suggest you lose the <span>s and either use a <div> instead, or apply the class to the <td> directly:
Code:
<td class="smoothguide9blue">
designed, updated and<br>maintained by <a href="[URL unfurl="true"]www.sheffieldmind.org.uk"[/URL] class="effect2">Sheffield Mind</a>
</td>
Here's two further tips. One, don't waste bandwidth declaring font families for every CSS class. Just declare it for the <body> and all other elements will inherit it:
Code:
body { font-family: Arial, Helvetica, sans-serif; }
If there are elements on your page that you
don't want to display in that font, declare a [tt]font-family[/tt] for those specific elements (or classes).
Secondly, give your classes meaningful names. When you come to maintain this site in 12 months' time, you'll have quite forgotten what "smoothguide9blue" means and where it's used. Once you've figured that out, you may decide that that text looks better 10 pixels high in orange - making the class name even more cryptic. So call that class, say, "pagecredit" instead - it's the styling applied to the credits on each page. You'll know what it means and you're not tied to any specific visual presentation by the name.
You could also get rid of a lot of those nested tables...
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
