Cannot hover over link

Hello,

If you go to http://hanoverhome.org, and you try to hover your mouse over the links at the top, it is hard to hover over the links..

The reason for this is because the "wrapper" div has been moved upwards (margin -px....).

I can't seem to figure out how to move the layer of the links forward or somehow make the links work right.

Any ideas? Thanks!

 

Nope, your css doesn't refer the same; there is no -ve margin set to wrapper.

from your css

#wrapper {
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;

What has hapend here is you've floated #pagemenucontainer by setting some top margin and immdiately bottom edge of this div you've pushed the header div with some -ve margin. So #pagemenucontainer div is not having breathing space.

solution 1: set some margin-bottom for #pagemenucontainer (however this will push the layout a bit downward.

solution 2: the easy fix and preferred is use some z-index to layered the div of header div.

#pagemenucontainer
{
float:right;
height:30px;
margin-top:16px;
position:relative; <!-- add this property -->
z-index:9999;<!-- add this property -->
}

 

Wonderful! Thank you very much.

 

You could improve your CSS file.

Start with this one here:

#wrapper {
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}

Code (markup):

This could be "merged" into one line like this:

#wrapper {
padding:0;
}

Code (markup):

Same with this line from style.css

#content {
	background-color: #fff;
	padding: 15px 15px 15px 15px;
	}

Code (markup):

Could be like this here:

#content {
	background-color: #fff;
	padding: 15px;
	}

Code (markup):

Good luck optimizin