problems with using an image as a link

[Kysmiley]

I have a header set as .top and it has the css information for the <a> links including the hover.
I have a footer div with a .footer p <>
in that <p> i have an image and want to link it yet its taking thed properties of the .top class link setup. I do not have the main body setup with nothing but a white background
Can any one offer any help
here is my coding for the links and top and bottom divs
before i started messing with it the logo in the bottom lined up nice now it does not either

######################
div.top {
margin: 0%; width: 95%; height: 200px; font-family: "sans serif" script, Arial; background: url(../mbglogo-1.gif); background-repeat: no-repeat;
position: relative; left: 2%;
}

/* Link properties for header */
div.top a:link, a:visited, a:active {display: block; font-family: "sans serif", Arial; 1.5em; color:black; text-decoration: none; background-color: #0099CC;}
div.top a:hover {display: block; font-family: Arial; 1.5em; color:black; text-decoration: none; background-color: #8B795E;
}

/* footer div properties */
div.footer {
width: 95%; height: 150px; position: relative; left: 3%; bottom: 3%;
background: url(../bluegrassbtm.jpg); background-repeat: no-repeat; background-position: bottom;
}
/* footer div p properties */

div.footer p {
position: relative; left: 2.5%; bottom: 10px;
}

I hope someone can offer some insite
Please
Thanks, Pat

[4css]

One thing that I see is that you have your links in the incorrect order,
They should be in the following order all the time.
A:link
A:visited
A:hover
A:active

Fix this and see what happens.

Hope this helps you out!

[Kysmiley]

still picking up the hover properties. Could it be because of the display: block;

[BjarneDM]

To me it looks as if you inadvertently have included the footer-div inside the header div like this:
<div header start>
<div footer start>
<p footer start>
<p footer stop>
</div footer stop>
</div header stop>

[4css]

Hi Kysmiley,
After you check out what BjarneDM is pointing out to you, make sure that you run this through the validator. Sometimes you could just be missing something that you have overlooked tons of times, and the validator can help you to find these errors. This is something that I always suggest that people do.

Also, display block should not interfer with this.

[sonjay]

Also, your css syntax for that declaration is not what you intended for the .top link classes. This is your selector:

div.top a:link, a:visited, a:active

This will apply your css rules for that declaration to a:links inside div.top, and to ALL a:visited and a:active

Try this instead:

div.top a:link, div.top a:visited, div.top a:active

(Edited to add: Also put them in the right order, as 4css said.)

[Kysmiley]

Thank-you everyone for the replies. I have checked and the header asnd footer seem to b places out side of each other but I will try the div.top a link div.top a active in the right order of course. i thought I could use short hand here and bunch the coding together as I would do to fonts of different areas instead of a new line for each one.
Thanks again

[Span]

i thought I could use short hand here and bunch the coding together

If the only difference between the various state of the links is the background color, you can do it like this:

div.top a {display:block;background:#09c;text-decoration:none;font:1.5em "sans-serif",arial;}
div.top a:hover {background:#8b795e;} 

..instead of this:

div.top a:link, a:visited, a:active {display: block; font-family: "sans serif", Arial; 1.5em; color:black; text-decoration: none; background-color: #0099CC;} 
div.top a:hover {display: block; font-family: Arial; 1.5em; color:black; text-decoration: none; background-color: #8B795E; 
}

Note: there should be a dash in sans-serif in your CSS..