Help with CSS!

[lldesign]

Hello,

I am new to this site, and new to designing web pages with CSS. I am having a browser related problem and sure could use some help!

This is the page in question:
http://www.ll-design.net/newOnlineGuide/sectionsLabs2.html

The problem is with the bottom footer (yellow/peach color).

If you look at it in IE6, it aligns with the above section just fine, but the images have a border (that I did not specify!) around them.

If you look at it in Safari (my MAC browser of choice), there is a gap between the footer <div> and the content <div> above it. When I try to add a negative margain to the footer div, it seems to fix the problem but then messes it up in IE6.

Any ideas on the gap? the box around the image?

Any help is greatly appreciated. A copy/paste of the CSS follows:

#footer {
background-image:url(../images/footerBG.gif);
background-repeat:no-repeat;
padding-left: 5px;
height: 55px;
margin-top:0;
padding-top:0;
top:0px;
}

<!-- the divs above the footer -->

#content {
position:relative;
background-image:url(../images/contentLines.gif);
background-repeat: repeat-y;
}

#header {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position:left;
padding-left: 15px;
height: 75px;
}