Problem Seeing Image In Mozilla

Geeky Girl · Mar 21st, 2008, 14:23

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!

Andy K · Mar 21st, 2008, 15:49

You should not design websites using Tables. Use XHTML layers <div></div> tags and CSS this allows maximum control over your design across browser platforms. Using this approach most of these issues should not happen. There are many threads in this forum that can help you with this.

Check images are saved in RGB and not CMYK

Geeky Girl · Mar 22nd, 2008, 16:07

So I switched from using GoLive to Dreamweaver CS3 which basically changes over to the XHTML coding.

I set up my file to have three columns with a header and footer. The transition works great for everything except my curtain image. The curtain image doesn't work as a background so the only way to get it to work correctly is to still nest it inside a table. Leaving the same issues so I haven't solved my problem.

Andy K · Mar 22nd, 2008, 16:15

Why doesnt the curtain image work as a background? Does it not display at all, does it display but out of position or........?

Geeky Girl · Mar 22nd, 2008, 16:27

Quote:

Originally Posted by Andy K

Why doesnt the curtain image work as a background? Does it not display at all, does it display but out of position or........?

As a background, the image repeats or it doesn't fit the width of the screen correctly. I researched trying to get it to stretch but kept seeing that it is not possible to stretch a background yet. Anyway, stretching it doesn't really work either since it brings the top part down too low.

I tried to use a smaller slice of the curtain for the left and right columns and just let it repeat-y. But I can't get it to line up with the top image and the words go on top of the curtain, making it hard to read.

Andy K · Mar 22nd, 2008, 17:04

How about having images 1,2,3,4 as a single image - just the curtain and black bg - and use this as a background image aligned center top no-repeat inside your main container div (you should contain everthing inside a div with fixed width, height can be fixed or set to auto).

Create a header div to stretch the full width exactly within this you can add your 'brainiac productions title' or include this title on the background image described above. Set the height upto where your middle content box starts. Then have a 3 column layout below the header and place the other relevent content inside these.

I can see on images 4 and 5 you might be including the curtain and the images at the top of the columns. Instead I am suggesting doing the background image without column graphics and use curtain only. Then put these column graphics (without curtain) in the columns below.

Hope this makes sense!?

Geeky Girl · Mar 22nd, 2008, 17:55

I thought it might help to attach the html file at this point. I've only been working with the images so far but you can see what it happening. I also attached a screen shot so you can see it with the actual pictures, etc.

I had already tried to combine images 1-5 plus the logo and company name into one image. I did it again in the attached file. The problem is that you can't get the top image to line up with the side curtain images. Even if you put the image in as an image in the header, instead of the background, and stretch it, it distorts the image too much.

The other problem being how it will resize on different screen sizes.

That is why the image was originally sliced into so many pieces. The left and the right side of the image stays the same and the middle top image stretches and shrinks to fit the screen. This way the side curtain pieces all remained the same size and could line up.

Andy K · Mar 22nd, 2008, 18:40

Used fixed widths in pixels then it wont resize. If you use Percentages as widths you will have problems. The screen grab looks as if it is set to a percentage and is trying to fill the browser window?

Geeky Girl · Mar 22nd, 2008, 18:54

I guess that is where my problem ultimately lies - I don't like the look of fixed width websites, especially on widescreen monitors.

Geeky Girl · Mar 22nd, 2008, 20:36

As much as I don't like the fixed width page, I have been playing around with it and ran into some problems.

I have attached the html, css and the IE screen shot files.

Here are the problems:
1. There is a space to the top and bottom of the header. I have the margin and padding set to 0.

2. Somehow, in making everything fixed sizes, my main content has dropped below the two sidebars instead of between them in IE and Maxthon.

3. Things are still messed up in Mozilla! The buttons overlap the curtain image on the left sidebar and the curtain doesn't appear again on the right sidebar.

4. Is there a way to center the whole thing. I thought I had it once but now I can't get it back that way. [SOLVED]

Geeky Girl · Mar 23rd, 2008, 01:21

I've tried unsuccessfully to edit the message above several times so I'll just post a new reply.

I was able to solve all the problems by starting with a much simpler template using 3 columns. I originally used an existing template in Dreamweaver but the css file was causing me some issues.

I guess I will be using a defined sized page afterall.

Thanks for the help!!! I'm sure I'll be back with other issues before I'm finished with the entire site.