I'm somewhat new to CSS, but I've recently been working with it on a site in which all images are background-images in CSS tables. All the images are in fact in the correct directory, and the filename's are correct. Everything's pretty straight forward, or that's at least what I thought. I use the following code in my css file for the footer and content <div> tables:
#content{
width:629px;
background-image: url(images/content_bg.jpg);
background-color: #C0C0C0;
margin-left: auto;
margin-right: 168px;
}
#footer{
width:629px;
height:50px;
background-image: url(images/footer.jpg);
background-color: #C0C0C0;
margin-left: auto;
margin-right: 168px;
}
Here are the two problems I've encountered with the #footer and its unpredicted interaction with the #content css table:
-The background image of the footer arbitrarily decides whether or not to be present
-A piece of the content background-image appears underneath the footer (only in Internet Explorer)
The code in action HERE (<!-- m --><a class="postlink" href="http://www.clayunion.com/polytech08/index.html">http://www.clayunion.com/polytech08/index.html</a><!-- m -->) (Please view in both IE and Firefox to see what I'm talking about)
My biggest question is why the footer wouldn't act exactly the same as the content table (since they both have the same properties, just with different background images).Fix the footer div (id="footer"), and try putting the footer div after the content div, not in it.I tried, but dreamweaver continually put it back automatically when i saved. I'll try your method out in notepad and see if there's any difference.Swapping Dreamweaver out with HTML-kit (<!-- m --><a class="postlink" href="http://htmlkit.com">http://htmlkit.com</a><!-- m -->) is an overall better solution than using Notepad.
#content{
width:629px;
background-image: url(images/content_bg.jpg);
background-color: #C0C0C0;
margin-left: auto;
margin-right: 168px;
}
#footer{
width:629px;
height:50px;
background-image: url(images/footer.jpg);
background-color: #C0C0C0;
margin-left: auto;
margin-right: 168px;
}
Here are the two problems I've encountered with the #footer and its unpredicted interaction with the #content css table:
-The background image of the footer arbitrarily decides whether or not to be present
-A piece of the content background-image appears underneath the footer (only in Internet Explorer)
The code in action HERE (<!-- m --><a class="postlink" href="http://www.clayunion.com/polytech08/index.html">http://www.clayunion.com/polytech08/index.html</a><!-- m -->) (Please view in both IE and Firefox to see what I'm talking about)
My biggest question is why the footer wouldn't act exactly the same as the content table (since they both have the same properties, just with different background images).Fix the footer div (id="footer"), and try putting the footer div after the content div, not in it.I tried, but dreamweaver continually put it back automatically when i saved. I'll try your method out in notepad and see if there's any difference.Swapping Dreamweaver out with HTML-kit (<!-- m --><a class="postlink" href="http://htmlkit.com">http://htmlkit.com</a><!-- m -->) is an overall better solution than using Notepad.