Question

I am working on this site. When I zoom in the browser (ctr +/-) the elements at the top change position (the menu, and featured slider). Is there a way to make them stay in the some position no matter what the zoom.

Here is a link to the site – http://www.independentlynew.com/dev/5church

Answer 1

it seems like the main menu container is overflowing the logo container, causing it be pushed upwards. this is likely to be caused by those containers having an access margin or padding, fitting exactly into their wrapper, and the browser’s rounding method used during the zoom.

try and remove the left padding from the #menu container:

#menu {
    float: right;
    background: url(images/left-menu-bg.png) no-repeat top left;
    /* padding-left: 12px; */
    height: 48px;
    margin-top: 40px;
}