There is a little gap between mainMenu and h1 span, and between h1 span and mainWrapper. My doctype is <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>. I have been trying to solve this problem, but haven’t been able to, so could someone please tell me how to solve the problem? Thanks in advance.
<div id="pageWrapper">
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Etc</a></li>
</ul>
<h1>
<span><img alt="Description goes here" height="366" src="images/main-header.jpg" width="800" /></span>
</h1>
<div id="mainWrapper">
<p>Main information goes here.</p>
</div>
</div>
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/140% arial,helvetica,sans-serif;
color: #00ABD4;
}
#pageWrapper {
width:800px;
margin:0 auto;
text-align:left;
overflow: hidden;
padding-top: 1em;
}
#mainMenu {
list-style: none;
background: url('images/navbg.gif') repeat-x;
margin-top: 1em;
padding: 5px 0px 10px 5px; /* top right bottom left */
float: left;
width: 100%;
}
#mainMenu li {
display: inline;
}
#mainMenu a, #mainMenu a:visited {
margin-right: 25px;
text-decoration: none;
color: #FFF;
font-weight: bold;
}
#mainMenu a:hover {
margin-right: 25px;
text-decoration: underline;
color: #CCC;
}
h1 span {
display: block;
}
#mainWrapper {
width: 100%;
overflow: hidden;
}