Question

I have been fighting with this issue for several days now. I have a sprite menu that works as expected with all my hover events, however I want to put the complete logo over the top of my “center” element. When I am in Dreamweaver it displays as expected, however when I use Safari or Chrome the logo from the “logo” element is misplaced. Any assistance would be highly appreciated.

Here is the HTML.

<div id="logo">
<h1 class="logo">
<a href="#" title="Test">Logo</a>
</h1>
</div>
<ul>
 <li><a class="home" href="#">Home</a></li>
 <li><a class="products" href="#">Products</a></li>
 <li><a class="philosophy" href="#">Philosophy</a></li>
 <li><a class="center" href="#">Center</a></li>
 <li><a class="news" href="#">News</a></li>
 <li><a class="myaccount" href="#">My Account</a></li>
 <li><a class="customercare" href="#">Contact Us</a></li>
</ul>​

Here is the CSS for one of the menu elements as well as the CSS for the center image.

ul {
width: 1000px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
list-style-type: none; 
}

ul li {
float: left;    
}

ul li a {
height: 50px;
display: block;
text-indent: -9999px;
}

/*home*/
ul li a.home {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 100px;
}

ul li a.home:hover {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px -50px;
}
/*Main Logo*/
#logo {
position: absolute;
width: 100%;
}

#logo h1 {
/* [disabled]height: 100px; */
/* [disabled]width: 201px; */
margin: -100px 282px;
/* [disabled]padding: 0; */
}

#logo h1 a {
color: transparent;
background: transparent url('CenterLogo.png') no-repeat;
width: 370px;
height: 201px;
top: 10px;
left: 30px;
margin: 0 0;
z-index: 200;
}

/***** Header Logo *****/
h1.logo a {
background: url('CenterLogo.png') no-repeat center right /* Company Logo */;
display: block;
height: 35px /* Sets overall height of header */;
margin: 0px 0 0 -2000px ;
outline: none /* Removes Link Outline */;
position: relative;
text-decoration: none;
top: 0px;
width: 2195px;
}​

Edit 1 ——-
Per Tim I made the following changes

ul {
    width: 1000px;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    display: block;
}
ul li {
    float: left;
    display: block;
}

I also changed the logo spacing and switched it to relative to see if I can get it in the right position.

/*Main Logo*/
#logo {
    position: relative;
    width: 100%;
}
#logo h1 {
    /* [disabled]height: 100px; */
    /* [disabled]width: 201px; */
    margin: -100px 282px;
    /* [disabled]padding: 0; */
}

I can get it to display in the right position now, however when I scale my window the menu moves apart from the logo.

Edit 2 ——
Per Kraz I made the following change. The menu now behaves as expected.

ul {
    width: 1000px;
    margin-top: 100px;
    /*margin-right: auto;*/
    /*margin-left: auto;*/
    list-style-type: none;
    display: block;
}

Answer 1

however when I scale my window the menu moves apart from the logo.

Your logo is a relatively positioned block element. Your menu is also a relatively positionned block element.

Your logo simply appear where it has to appear. (top left corner)

However, your menu as a specific width (1000px) and it’s right and left margin are set to auto. Hence it is centered according to its container width. And since it’s probably the body, increasing the page width will move the menu to the right.