Please help with marginal problem

Ok. Simple problems that I can't figure out are the worst... So, I'll appreciate a response to this even more than other posts...

I have this simple page, most of the layout with an external css. COntainer 2, the main body of the page has space on top. I think it has something to do with the image map used on top because when I eliminate that container2 body will align way on top fine. So, not sure what the fix is to that and not even totally sure that's it. Help? Heres the code/

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>title</title>
<link href="glide.css" rel="stylesheet" type="text/css" />
</head>

<body>

<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>

</body>
</html>

css:

@charset "UTF-8";
/* CSS Document */

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 {
margin: auto;
width:600px;
background-color:#FCD537;}

#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;

}

[edited by: SuzyUK at 3:02 pm (utc) on Jan. 26, 2008]
[edit reason] removed site specifics [/edit]

Please help with marginal problem

mirozake

robsoles

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week