Firefox positioning/stretching of images

[PaulBethke]

Hello,

I have tried searching for a resolution to this issue, but haven't found the right keywords to lead me to a solution, so I'll post a question here. Thank you for considering this.

I have a website that was begun in PhotoShop, sliced, then augmented to function dynamically. The artwork offered a statically sized "body" area to work with, but the lower portion of that area had some overlap with the artwork, so I decided to get creative and split the body into a "stretchable" part and a bottom part. That splits the body text.

In IE and Safari, everything is cool. However, in Firefox, increasing the width of the window seems to stretch the border graphics both horizontally (correct) and vertically (where does this come from?). In IE and Safari, the border graphics only stretch horizontally when the window width is increased.

Here is the site:

http://bethkefamily.com/ARC/Resources.htm

The "Coming Soon" text on that page is relatively positioned with the bottom portion of the artwork. Notice, in Firefox as you make the browser window wider, the "Coming Soon" text rapidly drops down on the page. This happens because increasing the width seems to affect the "Sub_16.jpg" image both horizontally and vertically. This does not happen in IE or Safari.

So my question is, is there a way to have the image stretch only horizontally with the widening of the browser window?

Thanks in advance...Paul

[djr33]

Here's a very basic answer to your question. It may take some creative changes to actually make it possible to use with your current code.

Set the horizontal direction to a percentage-based width. For example, use 100% of some container.
Set the vertical direction to an absolute height, such as 300px.

Does that help some? Now the question is just how you can apply it.


My guess is that firefox is scaling the image proportionally because you have not forced the height to remain constant (at least not in a way that FF understands).

[PaulBethke]

Hi Daniel,

Thank you for the reply. Trouble is - I do want the image to stretch horizontally (when the window is widened) and vertically (when the amount of text in the body is changed), but the horizontal/vertical stretching should be independent. I suppose I could hard-code a height based upon how much text I have in the body at any given time. BUT, IE and Safari seem to understand the desired result just fine. That solution adds a lot of extra calculation and maintenance to the process of adding text to the body of the page. (i.e. add text here, adjust image-height there.)

Any other thoughts?

[djr33]

As you have described, though, those are actually two different things.

First, you want the image to fill its container.
Second, you want the image (that is: the container) to stretch as the page gets wider.

So what you will do is set the image to 100% width and height. Then make the container decide how it scales. The container can be given a fixed height or you can allow that to be determined automatically by the amount of text in it. Then set the container to a relative width, such as 10%. The container will get larger as the page gets wider, but its height will be constant.

(If you have trouble making the height stay constant for some reason, post the new situation here, but that should be easier to fix since we've now narrowed down the problem to one part.)

That's slightly different in one way from what you have described: if the page is changing width and so is the container, then the text or other contents may shift (the line breaks will be different as the text gets more width to expand in), so this may cause the container to get shorter. That's perfectly normal and makes sense. However, it might cause some things to become uneven. In that case, you could do something a little more creative. All containers in the row can get 100% height within a single larger container. That would make sure that they all are as tall as the tallest in the row, so that none are too short.

This sort of situation is when tables are nice, though in every other way tables are a bad idea for layouts.

[PaulBethke]

This post was more about why is Firefox acting differently than Internet Explorer and Safari than it was about how to make the image stretch. The image was already stretching properly in two of the three browsers, but what makes Firefox different?

I now have the answer!

Firefox treats images in a table data (<td>) area differently depending on if they are used as images (<img>) between the <td></td>, or if they are specified as a background image (background="") within the <td>.

If you link the image via <td><img></td>, widening the browser window stretches the image both horizontally AND vertically, which is different than IE and Safari. If you link the image via <td background="">, widening the browser window only stretches the image horizontally, and is equivalent to IE and Safari.

So switching from "foreground" images to "background" images fixed the problem.

I hope this will help the next programmer who runs into this.

[djr33]

Ah, yes, that makes sense. Glad you figured it out. Another way to think about it is that an <img> tag is an object on the page. A background is just a property (like a color) and doesn't really have a physical relationship to the page (just as much as it is attached to whatever it is the background for).