Opera stretching my img 4000+ pixels

Discussion in 'Web Design and Development' started by angelwatt, Aug 9, 2007.

  1. angelwatt, Aug 9, 2007
    Last edited: Aug 26, 2011

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #1
    Got an odd problem with Opera (on Mac, didn't check on Windows) displaying an img link that I haven't run into before. It looks fine in Firefox, Safari, and even IE7 amazingly. The image is stretched horizontally making it some 4000+px wide. Anyone have any ideas one what is causing this? Links to page and picture below.

    [obsolete link removed]
     
  2. jng, Aug 9, 2007
    Last edited by a moderator: Aug 26, 2011

    jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #2
    I get a 403 error when trying to view the image.
     
  3. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Alright, guess that's kind of my bad. My web server doesn't like the REFERRER coming from another server than my own when directly accessing image files. I set this up because people were hot linking some of my images. If you copy the link I have above it will work. Sorry I didn't realize this before.
     
  4. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #4
    I don't even see that image in the safari version. Perhaps you should do a full screenshot (I don't have opera).
     
  5. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Code snippets

    For added help in discovering the problem here is some of the HTML,

    HTML:
    <div class="artwork">
    <ul>
      <li>
        <p><a href="art/abstract_03.jpg"> <img
        src="thumbs/abstract_03_t.jpg" alt="Abstract painting" /></a>
        <ul>
          <li class="title"> Galloping Forest</li>
          <li class="style"> Acrylics.</li>
          <li class="desc"> Based on an unknown artist that a
          friend asked me to do.</li>
    
        </ul></p>
      </li>
    ...
    And here is some of its CSS,

    HTML:
    div.artwork {
     background-color: #ffb;
    }
    div.artwork a img {
     position: relative;
     margin: 0 .4em 0 0; padding: 0;
     float: left;
     width: 20%; min-width: 80px; max-width: 90px;
     height: 20%; min-height: 50px; max-height: 100px;
     border: 3px ridge #990;
     z-index: 1;
    }
    div.artwork a:hover img {
     border: 3px solid #a02;
    }
    div.artwork li {
     position: relative; float: left;
     margin: .2em; padding: .3em;
     width: 98%; min-width: 210px;
     background-color: #fff;
     list-style-type: none;
     border: 1px solid;
    }
    div.artwork li li {
     display: block; float: none;
     margin: 0; padding: 0;
     width: auto; min-width: 110px;
     border: none;
    }
     
  6. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #6
    Why do you have all that convoluted CSS?

    The problem may lie here:
    HTML:
    <a href="art/abstract_03.jpg"> <img
        src="thumbs/abstract_03_t.jpg" alt="Abstract painting" /></a>
    
    you should specify a height and width. Maybe then opera will read is properly.
     
  7. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I want to use CSS to control height and width that's why they're left out. The thumbnail images come in varying sizes and don't want to change the thumbnails every time I change the site design.

    There may be some extra CSS in there since I just changed this part of my design, but most of it is necessary for what I'm doing. My old way worked fine in Opera and it was more complicated. May just have to given to my stubbornness to fix this issue, though I don't get a lot of Opera traffic.
     
  8. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #8
    Meh, I still think it's somewhat convoluted.

    It's a PHP page, did you hand code it? You can fetch the height and width of the thumbnail using PHP. That's what I do (or standardize all my thumbnails).

    I try to avoid scaling via CSS because it tends to look choppy on the PC. Looks gorgeous on the Mac though.
     
  9. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Solution discovered

    Though I don't completely understand why it works, it now works. I removed a CSS reference for my "div.artwork a img" that had width:20%. Apparently Opera 9 doesn't like that (Opera 8.5 worked mostly). I have min-width and max-width also set, which alone does what I need I guess. IE6 isn't so happy, but too bad for that browser. Most of my visitors use Macs :D

    Thanks jng for giving ideas. I do hand code all my pages. I'll have to think about that php idea for fetching sizes.
     

Share This Page