I'm currently working on my new website, and I'm facing some problems with the aligning of an element to the bottom of the body element.
I'm working on a laptop which has IE 6 installed (yes, I know, it's crap....), and suprisingly everything is looking perfect, all images are positioned correctly, the colors all match.... However, when I open the file in Firefox (or Safari, or IE 7), the bottom images are moved to the top.
Here's a link to the new website:
http://www.divergentminddesign.com/layout.html (don't mind the Dutch content, it will be removed very shortly).
Here's an image of what I want the site to look like:
http://www.divergentminddesign.com/dmd_nieuwelayout.jpg
Notice that the bottom gradient (named gradient_bottom_bg.png in the css stylesheet) isn't where it's supposed to be.
Does anybody know how to make it appear at the bottom of the body? I tried using the
bottom:0; property in css, but for some reason it would allign midways (can't find why), I also tried using
margin-bottom:0; but no success either.
I even tried swapping the background-image of the body with the gradient_bottom_bg so it would automatically display at the bottom of the body, but then I had to create an absolutely positioned div at the top of the body, and apparently it would always overlap the other divs on the page (making the Divergent Mind Design title disappear).
I've been trying to fix this for more the 10 hours now, and I still haven't found a solution, so many thanks for anyone who can help me