Hello!
I am designing a website that has an image sliced into pieces and placed into a table. The image is of a red theater curtain that frames the entire web page at the top, left and right sides. The image is in pieces so that I can control which parts stretch so that the overall image isn't distorted.
It is a perfectly seemless image in IE and maxthon but when you view it in Mozilla FireFox, there are some problems. I've attached a screenshot of the page in Mozilla with reference marks made.
Issue #1
Across the top, you will see images 1,2 and 3. I have circled the problem in green where there is a black space between the three images.
I have images 1 and 3 set to the exact width of the column so that the image doesn't change in size. Image 2 is set to a width of 100% to adjust for the screen size. I have tried to set all three images to a width of 100% but it doesn't fix the problem.
The gaps are only seen in Mozilla so what do I need to do to for Mozilla to make this appear seemless like the other browsers?
Issue #2
This issue deals with images 6 and 7. In Mozilla, they are completely missing. Both of these images are set to a specific width in pixels and 100% in height so that they will stretch the length of the content found in the center.
Again, the images appear perfectly fine in IE and Maxthon.
I have a
css file in place if that will help to get the images to behave properly. I would just need some help on what the
css code should look like.
Any suggestions would be greatly appreciated here!