I'm a total newbie to CSS, and am not sure that this is correct. Actually, I know it's not, because I'm having a few problems. If somebody could take a look at the CSS rules I have on this page and give me some suggestions, it would be greatly appreciated. (I'm pretty dense when it comes to this stuff; so please explain it as you would to a 5 year old.)

Here's the page: mattelmore.org/test_newsite.htm

And here are the CSS rules as they appear on the page:

<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
background-color: #013567;
}
.MattElmoreLinks {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: bold;
text-decoration: none;
line-height: 200%;
color: #FFCC20;
text-decoration: none;
}
a:link {
text-decoration: none;
}
.logo_text {
font-size: 36px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.style3 {font-size: 10px}
.page_title {
text-indent: 100px;
}
.MainScreenContents {
line-height: 100%;
}
</style>
<!--Fireworks 8 Dreamweaver 8 target. Created Sun Aug 05 13:34:30 GMT+0200 2007-->
<style type="text/css">
<!--
td.special {
border:12px solid black;
line-height: 100%;
}
.page_title {
font-size: 16px;
font-weight: bold;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
.MainScreenTitle {
color: #FF9900;
font-weight: bold;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
vertical-align: 50px;
text-indent: 50px;
}
.special .MainScreenContents {
margin-bottom: 50px; margin-left: 50px; margin-right: 50px }

.MainScreenContents {
font-size: 18px;
color: #FF9900;
}
.special .MainScreenContents {
line-height: 100%;
}
a:link {text-decoration: none; color: #FFCC20;}
a:visited {
text-decoration: none; color: #FFCC20;
}
a:hover {
color: #FF3300;
}
a:active {
text-decoration: none;
color: #FFCC20;
}
.MainContentsMargins {
left: 100px;
right: 100px;
bottom: 100px;
}
MainScreenLineHeight {
line-height: 100%;
}
.MainScreenContents1 { font-size: 18px;
color: #FF9900;
}
.special .MainScreenContents {
line-height: 100%;
}

-->
</style>

1) All links are black with no change?
Change all "A:family" color to be black.


3) Too much space between paragraphs. 200% is what I want for the links at the right, but not here in the main screen.

.special .MainScreenContents {
MARGIN-BOTTOM: 50px; MARGIN-LEFT: 50px; MARGIN-RIGHT: 50px
}

***just remove "MARGIN-BOTTOM: 50px;"****






Edited by - happyraedygo on 06 Aug 2007 21:20:58

Thanks HappyReady, that fixed my line height problem alright.

I'm still having a hell of a time getting different font colors for my links. It's not that I want <i>all</i> link colors to be black. I want the ones on the right to be yellow and the logo up top (which links back to the homepage, obviously) to be black.

It's hard to believe that something so basic is so hard to do --or find out how to do. If it's possible to make an overarching rule with no text decoration or underline, it seems to me there should be some means of making a rule "No Color Change for Active Links." I've been through hours and hours of tutorials in the past day and have learned a lot, but still don't feel any closer to achieving that. The only thing I've learned for sure is that my CSS styles are pretty sloppy and haphazhard, so I'm in the process of deleting them all and starting over from scratch.

Another day down the drain.