Please help! Sliced pictures and DIVs
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;
}