I originally designed this website using the wizard and I am trying to get it to look the same at all resolutions.
It seems to look fine at 1152x864 or above, which I suppose isn't too bad, but I would like it to look ok below this as well. Anything below this and the photo etc runs off the edge of the page.
Images have always been an issue, not just with the Wizard, but with most layouts. When a layout is fluid and a image is fixed, funny things start happening when the image is bigger than the available space. The first obvious answer is to make the images small enough, so that they fit reasonably will in most cases. But that's usually not the answer anyone wants to hear. So here are a couple other possibilities.
The first is to post a thumbnail image and then add some javascript that will display the larger image when the cursor is hovering over the thumbnail image. An example of that can be seen at Page3 - Hover Image . It appears to work a little differently in Firefox and IE, but generally displays the same. The positioning and size is adjustable. The Javascript was borrowed from "DynamicDrive.com". If you like that method you can either get the code yourself or I can post the exact code I used. Since you are using a Wizard layout, you have access to the header/footer for the HTML body. So I added the Javascript code to the header. This makes it available to all pages, so you don't have to repeat yourself on every page .
The second method doesn't involve any Javascript. Just CSS and HTML. You can see and example at Page3 - Autosize Image . This method was tricky to get working right in IE. What you see is actually two images, side-by-side. As you resize your browser window, the image changes size so that it always fits within the content area.
First I added the following code to the end of "header" code, using the "Code Editor" mode. Like with the Javascript, this is so I don't have to include it on every page. What this does is creates a wrapper for the image(s), that is percentage driven, so that your image and layout are both fluid.
The tricky part was making a rectangular image work right in IE. I didn't have any problems with making Firefox do this, but IE displays the image square when the page is initially displayed. This distorts the image initially, but it fixes itself with the first browser resize. A browser "refresh", however, will distort the image again. So I took the image and resampled it to exactly 800 pixels wide, but preserved the aspect ratio. This just made it easier to cut in half. I used IrfanView to resample and split the image into two "almost" rectangular images that were 400 pixels wide. The distortion is still there, but not as pronounced. The closer the image is to square, the better.
To get the images in the content area, I first used the "image" icon to just upload the images and place them on the page. This gave me the URLs without having to deal with them manually. Then I went in to the content using the "Code Editor" mode, wrapped a "div" around the images, and added the necessary "id"s to the "div" and "img" tags. In the end, this is what my image code looked like.
Note, there is no space between the two image tags. This is important. If you leave a space, the images will display with a small gap between them. But if you have a image that is mostly square, you only need one image tag, so that won't be a problem.
The second method works the best, and is the cleanest, but may be a little tricky to understand at first.
Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....
