Forum Moderators: not2easy
html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Glide Cycle</title>
<link href="glide.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="pageheader">
<img src="images/onebigtop.gif" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="575,16,697,33" href="#whatis.html" />
<area shape="rect" coords="576,37,685,52" href="#whyride.html" />
<area shape="rect" coords="576,56,686,73" href="#whocan.html" />
<area shape="rect" coords="576,79,686,94" href="#howto.html" />
<area shape="rect" coords="705,18,812,34" href="#whereto.html" />
<area shape="rect" coords="705,38,812,53" href="#ridingcan.html" />
<area shape="rect" coords="706,56,812,72" href="#packit.html" />
<area shape="rect" coords="28,130,76,151" href="#faq.html" />
<area shape="rect" coords="94,129,211,153" href="#models.html" />
<area shape="rect" coords="232,128,311,152" href="#accessories.html" />
<area shape="rect" coords="325,128,408,151" href="#testimonials.html" />
<area shape="rect" coords="426,128,512,153" href="#warranties.html" />
<area shape="rect" coords="521,129,622,152" href="#technical.html" />
<area shape="rect" coords="631,129,710,151" href="#contactus.html" />
<area shape="rect" coords="725,127,800,152" href="#aboutus.html" />
</map>
</div>
<div id="container2">
<div id="title1"><p><img src="images/watchaction.gif" /></p>
<div id="pic1"><img src="images/watch.jpg" /></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas, nisi et fringilla consequat, quam risus ultricies turpis, id eleifend nisi nisl ut nibh. Integer lacus. Donec a nibh nec libero auctor blandit. Nam bibendum purus sed nunc. Nulla fringilla. Curabitur sollicitudin, mauris nec faucibus vehicula, tortor quam lacinia neque, quis convallis mauris lectus sit amet augue.</p>
<p> </p>
</div>
<div id="title1">
<p><br />
</p>
<p> </p>
<p><img src="images/whatis.gif" /> </p>
<p> <img src="images/thatpic.jpg" /></p>
</div>
<div id="title1">
<p><img src="images/whyride.gif" /> </p>
<p> <img src="images/whyride.jpg" /></p>
</div>
<div id="title1">
<p><img src="images/whocan.gif" /> </p>
<p> <img src="images/whocan.jpg" /> </p>
</div>
<div id="title1">
<p><img src="images/howto.gif" /> </p>
<p> <img src="images/howto.jpg" /> </p>
</div>
<div id="title1">
<p><img src="images/whereto.gif" /> </p>
<p> <img src="images/whereto.jpg" /> </p>
</div>
<div id="title1">
<p><img src="images/canhelp.gif" /></p>
</div>
<div id="title1">
<p><img src="images/packit.gif" /> </p>
<p> <img src="images/packit.jpg" /></p>
</div>
</div>
</div>
</body>
</html>
css:
@charset "UTF-8";
/* CSS Document */
/* By Ferhad "Had" Erdogan */
html {
margin: 0;
padding: 0;
}
body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #a7cf52 url(images/bg1.jpg) repeat-x;
margin: 0;
padding: 0;
}
body a:link, a:active, a:visited{
text-decoration:none;
color:#720a0b;
}
body a:hover{
text-decoration:underline;
}
p{
margin: 10px;
padding: 0;
}
h3 {
display:none;
}
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
li {
background: url(bullet.gif) left center no-repeat;
padding-left: 7px;
margin-bottom: 5px;
}
#container {
margin: auto;
width:826px;
position:relative;
}
#container2 {
position:relative;
margin: auto;
width:600px;
background-color:#FCD537;
vertical-align:top;
}
#pageheader {
margin:auto;
width:826px;
height:155px;
overflow:hidden;
}
#title1 {
margin-top: 40px;
margin-left: -20px; }
#pic1 {
float: left;
margin-right: 10px;
margin-left: 10px;
}
#text1 {
position: relative;
margin-top: 80px;
float: right;
width: 200px }
/* #img1 {
margin-top: 20px;
margin-left: -20px; } */
#main {
position:relative;
}
How big is the gap, little(3px) or big(16px)
you say you don't have a <p>.. but you do, if the gap's 16-20px then it could be collapsing margins..
<div id="container2">
<div id="title1">
<p><img src="images/watchaction.gif" /></p>
that <p>'s top margin could be collapsing up through it's 2 x parent divs, to check if it's that one put 1px top padding onto #title1..
if that's not it give a shout back with the gap size (approximately ;)
I see
#title1btw: you should only use an ID once per page.. so you might want to change #title1 to a class
