Hi guys. First post. Have just got into web design in the last month and am learning as i go. I am building a site for a friend and for some reson i really wanted to make a opaque (semi-transparent) border around the main container. I have a image for the main background so couldnt just use a color to get effect. Now, after about 5-6hrs of fumbling around a finaly got it and it looked perfect in IE, but when viewed in FF or GC iits NOT perfect.
So, i made the opaque border by placing an empty div with size to match my main container with the border that i wanted opaque, at the bottom of my page and used a -1500px placement and z-axis:-10; to get it to overlap the main container above it thus locating the border around my main container and then made this div opaque to get exactly what i wanted.

Now problem in FF and GC is that they are still show the empty div at the bottom of my page extending 1500px below my content and the overflow:invisible is not affecting it so there is a hugh empty space at the bottom in the browsers. Have also tried wrapping container in opaque div but that just makes everything opaque(and setting container opasity to 100,1 doesnt help, and have tried placing the opaque div at the top and then positioned it over the container below, but then just get the same problem except then theres a gap at the top.
If anyone can suggest a solution to this i would be extremely thankful.
my site is
piermarkupholstery.co.nz

thanks heaps, hope this make sence. ps. im new to web design so excuss the code. cheers