from photoshop i sliced and wanted to convert it in to html i used Div tag and used images as background but when i see in browser i see some gap between div tags how can i remove that gap
here is html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif
}
-->
</style>
</head>
<div id='wrap'>
<div id="header">
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="navigation">
<p class="style3">Home | Forum | Web Hosting | Web Directory | Templates</p>
</div>
<div id="content">
<p>dghdfghzfdsffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffff</p>
<p>sdfdsfd</p>
<p>dsffds</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="style2" id="footer">Home · Forum · Webhosting · Web Directory · Tempaltes | <span class="style1">SRR Website © 2008</span></div>
</div>
</body>
</html>
here is CSS code:
@charset "utf-8";
/* CSS Document */
*{outline: 0; }
#wrap{width:801px;
margin:0 auto;
}
#header{background-image:url(images/header.gif);
height:138px;
position:relative;
width:801px:}
#navigation{background-image:url(images/navbar.gif);
background-repeat:no-repeat;
height:43px;
margin:0 auto;
font-size:95%;
line-height:35px;
text-align:center;
color:#000001;
width:801px;
font-weight:900;}
#content{background-image:url(images/content.gif);
background-repeat:repeat-y;
height:auto;
width:801px;
margin:0 auto;
padding-left:20px;
padding-right:20px;
}
#footer{background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:87px;
padding:30px;
color:#fff;
text-align:center;
width:801px;
font-stretch:ultra-expanded;
font-weight:700;
i know that u will help me