CSS + Adding Mouseover Image Links

I have tried to enter in mouseover image links but they always seem to separate instead of lining up one below the other.
What is the trick to fix this?

 

Can you send me your URL and I'll take a look at the code.

 

yeah.. post the link.... I can help too..

 

try to post link or code
its the best way that we can help you

 

Unfortunately it is not on a live server.
I'll try to explain it this way. I have my background image in place, and on top of that image I have text links. However, what I would like to do is use images instead so I can do the old mouseover where the images switch out when you hover. You might be asking, why not just do it with CSS and change colors but the background to these images is unique

 

Then post what you have already in your .css file and we'll take a look at it. Just copy and paste.

 

body {
background-color: #313430;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0px 0px 0px 0px;
width: 775px;
height:auto;
border-right: solid #FFFFFF 1px;
border-left: solid #FFFFFF 1px;
}


#header {
background: url("../images/JJ.jpg") fixed center no-repeat;
background-position: center top;
height: 315px;
width: 775px;
}

#indexheader {
background: url("../images/index_main.jpg") fixed center no-repeat;
background-position: center top;
height: 692px;
width: 775px;
}



#main {
background: url("../images/line_c.jpg") fixed center repeat-y;
height: auto;
margin-left: 0px;
margin-right: 0px;
overflow: hidden;
padding: 0px 0px 400px 0px;
width: 775px;
}


#footer {
background: url("../images/footer.jpg") fixed center repeat-y;
height: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0px 0px 0px 0px;
width: 775px;
}


a:link {
color: #FFFFFF;
text-decoration: none;
}

a:visited {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #c2fe0c;
text-decoration: none;
}

a:active {
text-decoration: none;
}

.links {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-stretch:expanded;
font-style: bold;
position:absolute;
margin-left: 130px;
margin-top: 110px;
width: 200px;
text-decoration: none;
line-height: 30px;
}

.latestnews {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
position:absolute;
margin-top: 365px;
margin-left: 110px;
}

.tdindex {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
position:absolute;
margin-top: 535px;
margin-left: 110px;
}

.aindex {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
position:absolute;
margin-top: 595px;
margin-left: 330px;
}

.wjfcindex {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
position:absolute;
margin-top: 595px;
margin-left: 550px;
}

.welcome {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
position:absolute;
margin-top: 400px;
margin-left: 450px;
}

#footer.copy {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #ffffff;
float:right;
}