I just used Doug's article (http://www.sitepoint.com/article/1221) on Header Image Replacement on my site. In the article he surrounds the image with <h1> tags. Because of this, it creates a margin around the picture.

Original code:
Code:
<h1 id="album"><span></span>My photo album</h1> 

/* repeated code per header */
#album, #album span {
 width: 300px; height: 75px;
 background-image: url(header.gif);
 background-repeat: no-repeat;
}
#album span { margin-bottom: -75px; }
/* non-repeated code */
h1 span {
 display: block;
 position: relative;
 z-index: 1;
}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */
To get rid of the margins, I added margin:0; to the h1 tags:
Code:
<h1 id="album"><span></span>My photo album</h1>
 
/* repeated code per header */
#album, #album span {
 width: 300px; height: 75px;
 background-image: url(header.gif);
 background-repeat: no-repeat;
}
#album span { margin-bottom: -75px; }
/* non-repeated code */
h1 span {
 display: block;
 position: relative;
 z-index: 1;
}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; margin:0;}
/*/
h1 { text-indent: -100em; margin:0;}
/* End Hack */
Why wasn't this in the orginal code? Is there something wrong with my method, or is there another way to do it?