Results 1 to 6 of 6

Thread: Firefox positioning/stretching of images

  1. #1
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Firefox positioning/stretching of images

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    PaulBethke (04-11-2011)

  4. #3
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. #5
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •