CSS positioning help needed

Factual Questions
#1

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:

  1. 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?

  2. 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;
  }
#2

It might be anathema to you, but have you considered another container, the same width as the masthead, within the body itself?

<body>
<masthead>
content
</masthead>
<content>
main content

#3

d’oh. Stupid tab then space reflex…

anyway, if you complete the above example, and style the content the same width as the masthead, and center the elements rather than the background, it might solve your problem.

Failing that, could we perhaps get a link, so we can see the behaviour first hand, as I don’t really feel like making an interlocking image masthead right at the moment.

#4

Ah, good idea. I’ll give it a shot later tonight. Thanks!