I’m designing a new web page. I’m trying to get a masthead background image to align perfectly with a body background image. For the most part, it’s working fine, but there are a couple of issues:
-
Resizing Internet Explorer to certain dimensions (I’m guessing odd-numbered) will cause the images to be misaligned by 1 pixel. This is annoying, because both images are the same width, and are both supposed to be centered in the browser. I can understand that the browser has a choice to make when dealing with odd dimensions, but why would IE center 2 elements differently?
-
Resizing Firefox down to less than the width of the masthead (694px) causes complete misalignment. I’m not so worried about this effect, since I don’t really want my web page viewed at anything less than 700px wide.
Here’s my code:
#masthead {
margin: 0 auto;
border: 0px solid #999;
background-image: url(masthead.png);
background-position: center;
background-repeat: no-repeat;
width: 694px;
height: 60px;
}
body {
background: #cccccc url(background.jpg) repeat-y center;
margin: 0 auto;
font:x-small Verdana,Helvetica,Sans-Serif;
text-align:center;
color:#333;
font-size:11px;
}