Gaps between divs and tags?

HTML & CSS
1

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;
}
2

try this, seems like u have a lot of extra spaces;

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

3

Hi,
It would be best to give a link to the page if you have one so we can view all the images you are using.

In the meantime I set up BG colors so I could see what was going on. I am not seeing gaps where you described them.

I did notice that the h1 needs to clear the floated menu above it. That may have an effect on your end.

h1 {clear:both;}

…and between h1 span and mainWrapper.
That’s caused by the h1 span img being an html image, images are inline elements default and the gap at the bottom is caused by the default vertical-align:baseline

Either set it as v-a:bottom or display:block to remove the gap.


h1 span img {
    vertical-align:bottom;
}
h1 span img {
    display:block;
}

Or you could target all html images in your reset rather than just the “h1 span img”


img {
    vertical-align:bottom;
}