This is one I struggled with for a long time. The menu at the top of my site was always giving me trouble. It would always be two pixels off when I looked at it in firefox vs. IE. This is because IE screws up the box-model. I won’t go into what exactly it screws up, but I’m telling you it does.

There is a simple fix to the problem though. It requires the use of a wrapper div. By creating a wrapper div, the two pixel difference is correctly compensated in both IE and other CSS2 compliant browsers. Here is the code:

#wrapper {
  border-style : none;
  width : 750px;
}

#mydiv {
  width : 100%;
}

Then the HTML is pretty straight forward too:

<div id="wrapper">
  <div id="mydiv">
    <!-- Put some content here! -->
  </div>
</div>