Hey guys.

Need help. I've made a site design in Photoshop. Sliced the picture into: header, controls, content, footer. Assembled them using DIVs and css classes. When viewing in chrome white gaps apper at the borders of the divs, especially when zooming in/out!! I tried adjusting margins, paddings, borders, but none of this worked. Here is my website link. Please help.

http://http://psoriginalstory.narod.ru/

and here is the HTML code:


<body>
<div class="container">
<div class="header"></div>
<div class="controls"></div>
<div class="content"></div>
<div class="footer"></div>
</div>

</body>

.container {
width: 1440px;
margin-right: auto;
margin-left: auto;
height: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(../images/container.jpg);
}

.header {
vertical-align: bottom;
display: block;
height: 219px;
width: 1440px;
margin: 0px;
padding: 0px;
background-image: url(../images/bg__header.png);
position: relative;
white-space: nowrap;
}

.controls {
vertical-align: bottom;
display: block;
height: 164px;
width: 1440px;
margin: 0px;
padding: 0px;
background-image: url(../images/bg__controls.png);
position: relative;
white-space: nowrap;
}

.content {
width: 1440px;
height: 1900px;
margin: 0px;
padding: 0px;
background-image: url(../images/bg__content.png);
}

.footer {
width: 1440px;
height: 477px;
margin: 0px;
padding: 0px;
background-image: url(../images/bg__footer.png);


.footer p a:visited {
color: #F00;
}