Hover and Linking Problems & div Scroll Problem

[phasr389]

So I'm building a CSS/XHTML1 site. I'm having a few rather strange problems, so here goes. If someone wants a link to the site, instead of figuring it out by my description, send me a message.
1. I have navigation links, which include all four css link properties (link, hover, visited, active). They seem to work, but the odd part is that when hovering over the link, it only seems to work at the very top couple pixels of the text. You can only click the link at the top part as well. Kind of strange,does this sound familiar to anyone? (These are the 'a' modifications under the #h1 div id I have set up. )
2. I'm also having a problem with another set of links which I cant seem to click on at all. (These are the universal 'a' modifications as defined in the css) I'll put the css up below.

3. Finally, I have the div id '#right' set to overflow auto. In firefox on mac, it works properly with working scroll bars. Safari, it shows the scroll bar, but you can't click it or scroll with it, even though it appears ready to go. In windows, firefox has the same problem. I've read about some overflow problems, but never about a scroll bar being there and not working...

I should also note that *everything* works perfectly in IE 6 for windows.

Heres the css:

body {
text-align: center;
background-color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
background-position: center 0px;
background-repeat: no-repeat;
}

#container {
text-align: left;
height: auto;
width: 820px;
background-color: #555555;
margin-top: 50px;
margin-right:auto;
margin-left:auto;

}

#left{
background-color:#660000;
width: 395px;
height: 510px;
padding: 0px;
float: left;
color: #FFFFFF;
background-image: url(left.jpg);
background-position: bottom;
background-repeat: no-repeat;

}

#right{
width: 375px;
height: 500px;
padding: 0px 10px 10px;
float: left;
overflow: auto;
background: #FFFFFF url(right.jpg) no-repeat bottom;
color: #222222;
}

a:link{
color:#000077;
text-decoration: underline;
}
a:visited{
color:black;
text-decoration: none;
}
a:hover{
color:white;
background-color:#000000;
text-decoration: none;
}

a:active{
color:#000077;
text-decoration: none;
}

#h1{
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}

#h1 a:link{
color:#eeeeee;
text-decoration: none;
font-size: 18px;
font-weight:bold;
}
#h1 a:visited{
color:#eeeeee;
text-decoration: none;
font-size: 18px;
font-weight:bold;
}

#h1 a:hover{
color: #000
background-color: #FFF;
font-size: 18px;
font-weight:bold;
}

#h1 a:active{
color: #000;
background-color: #FFF;
font-size: 18px;
font-weight:bold;
}

Thanks in advance for your help guys!
dj

[londrum]

whenever i've had this problem, i've always found that it was because i've overlapped two blocks.

i've either used position:absolute, or used negative margins on position:relative to shift one block over top of another.
and, of course, it only lets you click on the top block.
so i'm guessing that you've moved a block on top of another one but left a few pixels at the top.

i can't see anything in your css, but is it possible that you've done something similar?

[phasr389]

hmm perhaps, but i cant quite put my finger on it. it isnt really making sense for any of the other elements to affect it in that position in that way...perhaps would messing with z-indexes get us some answers?

[londrum]

i would temporarily color the blocks, and put!important on it to make sure the color shows. something like this

div.blah { background-color: red!important; }

you should soon find out if they are overlapping then

[phasr389]

yup, you nailed it... it was the footer. amazing how a nice vivid shade of green will clear things up ;)
awfully strange how it was positioned though...hm.i just changed it to inherit and made some mods and it works fine now. much thanks!