Ik ben bezig met de layout van m'n app, en nu blijkt dat er verschil zit tussen de IE7 en Firefox.

De positie van de DIV begint 1 pixel eerder.

De afbeelding die ik gebruik is een gif van 800px breed en 12px hoog.
Weet iemand een oplossing hiervoor?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

<body>
  <div id="wrap">
    <br /><br /><br />
  </div>
</body>
</html>

body {
  background: #777;
  background-image: url("../img/background.gif");
  background-repeat: repeat-y;
  background-position: center;
  margin: 0;
  text-align: center;
}
#wrap {
  background: #272727;
  margin: 0 auto;
  max-width: 800px;
  text-align: left;
letterlijk in je css:

//margin-top:1px; /*om in IE 1px lager te zetten*/
De zoveelste hack voor de IE.

Ik neem aan dat '//margin-left:1px; /*' ook kan?

Bedankt Kalle
Ik heb de hack toegepast, maar het gaat nog niet helemaal goed.

CSS:
Ik gebruik 'text-align: center;' om de hoofd DIV (wrap) te centreren.

Vervolgens gebruik ik in #wrap 'margin: 0 auto;' om ook voor firefox de DIV te centreren.

Wanneer ik nu de hack ('//margin-left:1px; /*') toepas staat de DIV wel 1 pixel verder naar links, maar niet meer gecentreerd.

De hele DIV staat nu weer links op de body.

Wat ik dus graag zou willen is om de DIV te centreren, maar voor de IE toch 1px naar rechts (marge links dus 1px) te verplaatsen.
Voorbeeld online?

Om een div te centreren gebruik ik altijd deze:
#container {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
Werkt voor alle browsers.

Elwin

Reageren