I am trying to finish converting a layout that was sliced in ImageReady to CSS using only DIV's and XHTML compliant code.
Currently I have a footer image that is hovering over the main div with a z-index of 1.
The DIV itself is outside of the main DIV and has a relative position and height of 0px. The image is placed in the DIV.
The image is placed properly in Safari, Firefox, (havent test IE6+ yet).
The only ISSUE is that in Safari there is "extra" space after the layout, in Firefox there is not (because of the height: 0px)
Here is the CSS:
Here is a link to the page:Code:/* CSS Document */ body { background-color: #FFF1C8; } #content { padding: 0 35px 0 25px; float: right; width: 550px; } #layout { background-image: url(images/contentbg2.jpg); background-repeat: repeat-y; width: 700px; margin: 0 auto; } #airmail { border: 0px; position: relative; background-image: url(images/airmail.jpg); z-index: 1; width: 113px; float: left; visibility: visible; bottom: 321px; height: 0px; min-height:0px; max-height:0px; } .form { color:#000066; font-size: 16px; } .text { color:#000066; font-size: 15px; display:block; padding: 1px 10px; }
http://www.123shoot.com/tsc